目录
2.4.5 :nth-last-child()和:nth-last-of-type()都是倒数选择
2.8.3 ::first-letter和::first-line
1. CSS3基础入门
1.1 CSS3简介
CSS(cascading style sheet，层叠式样式表)是用来给HTML标签添加样式的语言
CSS3是CSS的最新版本，增加了大量样式、动画、3D特效和移动端特性等
1.2 前端三层
CSS使样式和结构分离，样式和结构不用“杂糅着写”，而是彼此分开的，HTML负责结构，CSS负责样式
1.3 CSS选择器
CSS的本质就是样式的“清单”，书写合适的选择器，把指定元素的样式一条一条罗列出来。
.spec{
color: black;
font-weight: bold;
font-style: italic;
}
.warn{
font-style: italic;
background-color: #fff;
}因此，CSS就是简单的罗列样式，背诵一些CSS属性是重要的。
1.4 CSS书写位置
1.4.1 内嵌式
在<head></head>标签对中，书写<style></style>标签对，在这里写CSS
1.4.2 外链式
将CSS单独存为.css文件，然后使用<link>引入它
优点：多个html网页，可以公用一个css样式表文件
1.4.3 导入式
最不常见的样式表导入方法
1.4.4 行内式
直接通过style属性附在标签上
2.CSS3基本语法
2.1 标签选择器和id选择器
2.1.1 标签选择器
又称元素选择器、类型选择器，直接使用元素的标签名当做选择器，选择页面上所有该种标签
标签选择器将选择页面上所有该种标签，无论这个标签所处位置深浅
标签选择器“覆盖面”非常大，所以通常用于标签的初始化
2.1.2 id属性和id选择器
标签可以有id属性，是这个标签的唯一标识。id一般由字母、数字、下划线、和短横组成，不能以数字开头，区分大小写字母。一般为小写字母。同一个页面不能有相同id的标签。
<p id="para1">
<span>北京</span>的区号是<span>010</span>
</p>id选择器，CSS可以使用#前缀，选择指定id的标签
2.2 class选择器
2.2.1 class类名
class表示“类名”，类名的命名规范和id命名规范相同
<p class="fs12">
<span>上海</span>的区号是<span>021</span>
</p>2.2.2 class选择器
使用点.前缀 选择指定class的标签
.fs12{
font-size: 12px;
}class类名非常灵活
- 多个标签可以为相同类名
- 同一个标签可以同时属于多个类，类名用空格隔开
- 原子类
做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等设置为单独的类
这样就可以非常快速的添加一些常见样式
2.2.3 复合选择器
- 后代选择器
CSS选择器中，使用空格表示“后代”
后代并不一定只是“儿子”，而可能是“孙子”或者“曾孙子”更晚的辈- -
后代选择器可以有很多空格，隔开好几代
- 交集选择器
例如：选择有.spec类的h3标签，此时应该选择交集选择器，注意，一定不能中间写空格，否则就成了后代
- 并集选择器
比如要去掉如上无序列表和有序列表的小圆点，可以利用并集选择器这么写：
2.3 元素关系选择器
2.3.1 子选择器
当使用>符号分隔两个元素时，它只会匹配那些作为第一个元素的直接后代元素，即两个标签为父子关系。而后代选择器不一定限制是儿子元素，孙子也可以。如下图标注
2.3.2 相邻兄弟选择器
相邻兄弟选择器(+)介于两个选择器之间，当第二个紧跟在第一个元素之后，并且两个元素都是属于同一个父元素的子元素，则第二个元素将被选中。说白了就是a+b就是选择“紧跟在a后面的一个b”
2.3.3 通用兄弟选择器
通用兄弟选择器(~)，a~b选择a元素之后所有同层级b元素
2.4 序号选择器
2.4.1 :first-child选择第一个元素
不要漏写p ，其他序号选择器同理
2.4.2 :last-child选择最后一个元素
2.4.3 :nth-child()选择任意序号的子元素
也可以写成an+b的形式，表示从b开始每a个选择一个，注意不能写成b+an的形式
2n+1等价于odd，表示奇数
2n等价于even，表示偶数
2.4.4 :nth-of-type() 类型序号
选择同种标签指定序号的子元素
2.4.5 :nth-last-child()和:nth-last-of-type()都是倒数选择
2.4.6 各符号选择器的兼容性
2.5 属性选择器
2.6 伪类
伪类是添加到选择器的描述性词语，指定要选择元素的特殊状态，也是用户赋予标签特殊状态
超级链接拥有4个特殊状态
<a>标签的伪类书写，要按照一定顺序书写，
2.7 CSS3新增伪类
举个例子，初始代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<p class="para"></p>
<p class="para"></p>
<p class="para">123</p>
<p class="para"></p>
</body>
</html> 
在style中加入伪类p:empty样式
p:empty{
background-color: red;
}效果：
因为只有3是非空标签，其他都是空标签，被CSS伪类设置为red
其他伪类：
实现起来还是比较简单，这里代码过多不粘贴赘述。
2.8 伪元素
表示虚拟动态创建的元素，伪元素用双冒号表示，IE8可以兼容单冒号
2.8.1 ::before和::after
::before创建一个伪元素，其将成为匹配选中的元素的第一个子元素，必须设置content属性表示其中的内容。
例如：
a::before{
content: "☆";
}就是在所有<a>标签的内部前面加上"☆"，
::after同理
这样添加的伪元素也能被点击，而不是单纯的在前后添加文字
2.8.2 ::selection
::selection CSS伪元素应用于文档中被用户高亮的部分(鼠标圈选的部分)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1::selection{
background: springgreen;
color: deeppink;
}
</style>
</head>
<body>
<div class="box1">
asdkljasldkjasldjasldjalsdsadaasdasdsadsadsa
</div>
</body>
</html> 
2.8.3 ::first-letter和::first-line
::first-letter会选中某元素中（必须是块级元素）第一行的第一个字母
::first-line会选中某元素中（必须是块级元素）第一行的全部文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 p::selection{
background: springgreen;
color: rgb(245, 4, 137);
}
.box1::first-letter{
font-size: 50px;
}
.box1::first-line{
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box1">
<p>pasdkljasldkjasldjasldjalsdsadaasdasdsadsadsa</p>
<p>asdsadasdasdasdasdasdasdasd</p>
</div>
</body>
</html>
3.盒模型
3.1 什么是盒模型
所有HTML标签都可以看成矩形盒子，由width、height、padding、border构成，成为“盒模型”
注意，width、height不是盒子的总宽高
盒子的总宽度=width+左右padding+左右border
盒子的总高度=height+上下padding+上下border
<style>
.box1{
width: 200px;
height: 200px;
background-color: gold;
border: 10px solid #000;
padding: 10px;
}
</style>
3.2 width和height属性
3.2.1 width属性
- width表示盒子内容的宽度
- 单位通常是px，移动端开发也会设计百分数、rem等单位
- 当块级元素（div、h系列、li等）没有设置width属性时，它将自动撑满，但这不意味着width可以继承
3.2.2 height属性
- 表示盒子内容高度
- 单位通常为px，与width相同
- 缺省值0，将被内容自动撑开
3.3 padding属性
盒子的内边距，即盒子边框内壁到文字的距离
padding有四个方向
padding的写法：
- 四数值写法，分别表示上、右、下、左的padding，即“逆时针”
- 三数值写法，上、左右、下
- 二数值写法
考虑几个模型padding：
很灵活
3.4 margin属性（塌陷现象）
margin是盒子的外边距，即盒子和其他盒子的距离
margin也有四个方向
margin存在“塌陷”现象，即竖直方向，上下两个margin的距离以大数为准，而左右方向没有塌陷现象，可叠加
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background-color:yellow;
margin-bottom: 50px;
}
.box2{
width: 200px;
height: 200px;
background-color:blue;
margin-top: 30px;
}
span{
border: 1px solid #000;
}
.span1{
margin-right: 30px;
}
.span2{
margin-left: 40px;
}
</style>
</head>
<body>
<span class="span1">我是一个span</span>
<span class="span2">我是另一个span</span>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
有点糊，，，不过大概能看懂啥意思，就是上下有塌陷，左右叠加
一些元素有默认的margin，比如body,ul,p都有默认的margin，需要清除：
3.4.1 盒子的水平居中
- 盒子左右两边margin都设置为auto，盒子将水平居中
- 文本居中是text-align:center，与盒子水平居中是两码事
- 盒子的垂直居中，需要用绝对定位技术实现
3.5 盒模型计算
导语：空间分配的艺术
3.5.1 父盒子、子盒子
实际上可比作为：父盒子、子盒子
由上节内容知：这个父盒子的一些参数
width=400+10*2+6*2=432
height=300+10*2+6*2=332
但是 实际留给子盒子可用的空间只有：400*300
老大的总宽度只能是400px,实际占有高度200px,又向下“踹”了20px,因此只给老二留下了80px
老二的总宽度只能是400px
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 400px;
height: 300px;
padding: 10px;
border: 6px solid #000;
margin: 40px auto;
}
.box .c1{
width: 388px;
height: 188px;
border: 6px solid rgb(48, 206, 119);
margin-bottom: 20px;
}
.box .c2{
width: 388px;
height: 48px;
padding: 10px 0;
border: 6px solid rgb(161, 73, 154);
}
</style>
</head>
<body>
<div class="box">
<div class="c1"></div>
<div class="c2"></div>
</div>
</body>
</html>
3.5.2 box-sizing属性
将盒子添加了box-sizing:border-box;之后，盒子的width、height数字就表示了实际占有的宽高(不含margin)，即padding、border变为“内缩”的，不再是“外扩的”
box-sizing属性大量应用于移动网页制作中，因为它结合百分比布局、弹性布局非常好用，在pc页面开发比较少
box-sizing兼容到IE9
3.6 行内元素和块级元素 display属性
3.6.1 行内元素和块级元素
来看div和span的例子
div的box1和box2可以设置宽高，同时天生就是上下排列的
span不能设置宽高（没有用），天生就是水平排列，padding是可以设置的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
width: 100px;
height: 100px;
background-color: blue;
}
.box2{
width: 100px;
height: 100px;
background-color: black;
}
span{
width: 100px;
height: 100px;
background-color: green;
padding: 2px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<span>111</span>
<span>222</span>
</body>
</html>
3.6.2 行内块
img和表单元素是特殊的行内块，他们既能设置宽高又能并排显示
3.6.3 行内元素和块级元素的相互转换
- 使用display:block;即可将元素转为块级元素
- 使用display:inline;转为行内元素，不常用
- 使用display:inline-block;转为行内块
span{
display: inline-block;
width: 30px;
height: 10px;
line-height: 10px;
background-color: green;
padding: 8px;
text-align: center;
}
仔细发现，下面的两个span具有了块级元素的属性，而且不再“侵占”上面两个元素的位置了
3.6.2 元素的隐藏
display:none; 可以将元素隐藏，元素将彻底放弃位置，如同没有写他的标签一样
display:hidden; 可以隐藏，但是不放弃自己的位置
扫一扫
548
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
