前端逼死强迫症系列之css
2021-06-30 18:05
标签：har 自身 css 颜色 font lin 16px link 虚线 由于ID唯一，所以也是写多遍。 class选择器是最常用的。 不管那一层，只要是这个标签就应用这个样式。 也叫关联选择器。如下：span里面的div才应用样式 层级也可以标签和类选择器做层级，比如 ID组合 class 组合 对选择到的标签再通过属性再进行一次筛选 如果对一个内容指定多个样式，样式没有重合，就都应用上了。 css文件写法，直接写，不用再写 html标签中，div是块级标签，一个标签占一整行。显然好多网站都是分左右栏的，那怎么实现呢？ float飘起来之后，撑不起父标签，需要加一句，如下。 前端逼死强迫症系列之css 标签：har 自身 css 颜色 font lin 16px link 虚线 原文地址：http://www.cnblogs.com/lixiaoliuer/p/7135959.html一、编写css样式
1.ID选择器
head>
style>
#i1{
background-color: #2459a2;
height: 48px;
}
#i2{
background-color: #2459a2;
height: 48px;
}
style>
head>
body>
div id="i1">ffdiv>
div id="i2">ffdiv>
body>
2.css选择器
head>
style>
.c1{
background-color: #2459a2;
height: 48px;
}
style>
head>
body>
div class="c1">ffdiv>
div class="c1">ffdiv>
body>
3.标签选择器
head>
style>
div{
background-color: black;
color: white;
}
style>
head>
body>
div >ffdiv>
span >f
div >fgfdiv>
span>
body>
4.层级选择器
head>
style>
span div{
background-color: black;
color: white;
}
style>
head>
body>
div >ffdiv>
span >f
div >fgfdiv>
span>
body>
.c1 .c2 div a h1{
}
5.组合选择器
head>
style>
#i1, #i2{
background-color: #2459a2;
height: 48px;
}
style>
head>
body>
div id="i1">ffdiv>
div id="i2">ffdiv>
body>
head>
style>
.c1, .c2{
background-color: #2459a2;
height: 48px;
}
style>
head>
body>
div class="c1">ffdiv>
div class="c2">ffdiv>
body>
6.属性选择器
head>
style>
.c1[type="text"]{ width:100px; height:200px; }
input[name="fgf"]{width:40px; height:40px; }
style>
head>
body>
input class="c1" type="text" n="alex">
input class="c1" name="fgf" type="password">
body>
二、css的存在形式及优先级
如果有重合，优先级，标签上style优先，编写顺序，就近原则,越往下越优先。head>
link rel="stylesheet" href="css/commons.css" />
.c1{
background-color: #2459a2;
height: 10px;
}
.c2{
}
head>
body>
div class="c1 c2" style="color: pink">asdfdiv>
body>
.c1{
background-color: #2459a2;
height: 10px;
}
.c2{
}
三、css边框以及其他常用样式
body>
div style="border: 1px solid red;">
asdfasdf
div>
div style="height: 48px; /*高度（像素）*/
width:80%; /*宽度（百分比）*/
border: 2px dotted red;
/*dotted：虚线的 （border-left）*/
font-size: 16px; /*字体大小*/
text-align: center; /*水平居中*/
line-height: 48px; /*垂直居中根据标签高度*/
font-weight: bold; /*字体加粗*/
color: white; /*字体颜色*/
background-color: lawngreen; /*背景色*/
">asdfdiv>
body>
四、css之float样式
这里就需要用到float样式，让块级标签飘起来。自己有多少占多少。body>
div style="width: 20%;background-color: red;float: left">1div>
div style="width: 50%;background-color: black;float: left">2div>
div style="width: 20%;background-color: blue;float: right">2div>
body>
div style="width: 300px;border: 1px solid red;">
div style="width: 96px;height:30px;border: 1px solid green;float: left;">div>
div style="width: 96px;height:30px;border: 1px solid green;float: left;">div>
div style="width: 96px;height:30px;border: 1px solid green;float: left;">div>
div style="clear: both;">div>
div>
五、css之display样式
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
display: none; -- 让标签消失
display: inline; -- 让标签变成行内标签
display: block; -- 让标签变成块级标签
display: inline-block; -- 拥有两者的属性↓
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
六、css之内外边距
DOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
title>Titletitle>
style>
.pg-header{
height: 38px;
background-color: #dddddd;
line-height: 38px;
}
style>
head>
body style="margin: 0">
div class="pg-header">
div style="width: 980px;margin: 0 auto;">
div style="float: left;">收藏本站div>
div style="float: right;">a>登录a>div>
div style="clear: both">div>
div>
div>
body>
html>
七、css总结
CSS
在标签上设置style属性：
background-color: #2459a2;
height: 48px;
...
编写css样式：
1. 标签的style属性
2. 写在head里面 style标签中写样式
- id选择区
#i1{
background-color: #2459a2;
height: 48px;
}
- class选择器 ******
.名称{
...
}
标签>
- 标签选择器
div{
...
}
所有div设置上此样式
- 层级选择器（空格） ******
.c1 .c2 div{
}
- 组合选择器（逗号） ******
#c1,.c2,div{
}
- 属性选择器 ******
对选择到的标签再通过属性再进行一次筛选
.c1[n=‘alex‘]{ width:100px; height:200px; }
PS:
- 优先级，标签上style优先，编写顺序，就近原则
2.5 css样式也可以写在单独文件中
3、注释
/* */
4、边框
- 宽度，样式，颜色 (border: 4px dotted red;)
- border-left
5、
height， 高度 百分比
width， 宽度 像素，百分比
text-align:center, 水平方向居中
line-height，垂直方向根据标签高度
color、 字体颜色
font-size、 字体大小
font-weight 字体加粗
6、float
让标签飘起来，块级标签也可以堆叠
老子管不住：
7、display
display: none; -- 让标签消失
display: inline; -- 让标签变成行内标签
display: block; -- 让标签变成块级标签
display: inline-block; -- 拥有两者的属性↓
具有inline,默认自己有多少占多少
具有block，可以设置无法设置高度，宽度，padding margin
******
行内标签：无法设置高度，宽度，padding margin
块级标签：设置高度，宽度，padding margin
8、padding margin(0,auto)