CSS 全称层叠样式表，是用来给网页 HTML 结构设置样式的语言，可以控制网页的文字颜色、大小、背景、布局、间距、边框、动画等所有外观效果。HTML 负责搭建网页骨架，CSS 负责美化和排版，二者搭配使用就能做出好看的网页页面。CSS 可以写在标签内部、页面头部样式标签里，也可以单独写成外部样式文件，实现结构与样式分离，方便网页后期修改和维护。
一、样式类型
1.行内样式
优点：优先级最高
缺点：
结构与样式未分离
代码结构混乱
样式不能复用
使用频率：很低
作用范围：当前标签
2.内部样式
优点：
样式可复用
代码结构清晰
缺点：
结构与样式未彻底分离
样式不能多页面复用
使用频率：一般
用范围：当前页面
3.外部样式
优点：
样式可多页面复用
代码结构清晰
可触发浏览器的缓存机制
结构与样式彻底分离
缺点：
需要引入才能使用
使用频率：最高
作用范围：多个页面
二、css语法由两部分组成
1.选择器：找到要添加样式的元素
2.声明块：设置具体的样式（声明块是有一个或多个声明组成的），声明格式为：属性名：属性值；
写链接的状态：
常用的：
1.:first-child 所有兄弟元素中的第一个。
2.:last-child 所有兄弟元素中的最后一个。
3.:nth-child(n) 所有兄弟元素中的第 n 个。
4.:first-of-type 所有同类型兄弟元素中的第一个。
5.:last-of-type 所有同类型兄弟元素中的最后一个。
6.:nth-of-type(n) 所有同类型兄弟元素中的第 n 个。
关于 n 的值：
1.0 或 不写：什么都选不中 —— 几乎不用。
2.n：选中所有子元素 —— 几乎不用。
3.1~ 正无穷的整数：选中对应序号的子元素。
4.2n 或 even：选中序号为偶数的子元素。
5.2n+1 或 odd：选中序号为奇数的子元素。
6.-n+3：选中的是前 3 个。
div:empty{}:选中的是div，且div是空的
三、伪元素
CSS伪元素纯文本版 伪元素标准写法用双冒号::，旧版单冒号:也兼容。
（1） ::before 在元素内容前方生成虚拟元素，必须带content
（2）::after 在元素内容后方生成虚拟元素，最常用做装饰、清浮动 用法示例 .clearfix::after { content: “”; display: block; clear: both; }
（3） ::first-line 选中段落第一行文字设置样式 p::first-line { font-weight: bold; color: blue; }
（4）::first-letter 选中第一个字符，做首字下沉 p::first-letter { font-size: 30px; float: left; }
（5） ::placeholder 修改input输入框占位文字样式 input::placeholder { color: #999; }
（6）核心规则
1 .before和after必须写content，不需要文字就设为空字符串""
2 .伪元素默认行内特性，设置宽高需要加display:block
3. 一个普通元素只能同时使用before和after两个伪元素
4. 伪元素属于CSS生成，不存在真实DOM结构
四、常用选择器
1.元素选择器 例如：p{}
2.Id选择器 例如：#p1{}
3.class选择器 例如：.hello{}
4.选择器分组 例如：#p1，.hello,p{}
5.通配选择器 例如：*{}
6.复合选择器 例如：span.p3{}既是span还要是p3 （复合选择器不建议id使用，适用于class）
7.后代元素选择器 例如：div span{}
8.子元素选择器 例如：div>span{}，作用：选择指定的父类中的子类
9.伪类选择器
五、总结
本周主要学习了css的主要书写格式，常用选择器和方法。
