目标
能使用emmet语法
能够使用CSS复合选择器
能够写出伪类选择器的使用规范
能够说出元素有几种显示模式
能够写出元素显示模式的相互转换代码
能够写出背景图片的设置方式
能够计算CSS权重
目录
目录
0. Emmet语法
Emmet语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法。
0.1 快速生成HTML结构语法
1. 生成标签直接输入标签名按tab键即可 比如div 然后tab，就可以生成<div></div>
2. 如果想要生成多个相同的标签 加上*就可以了 比如div*3就可以快速生成3个div
3. 如果有父子级关系的标签，可以用> 比如ul>li就可以了
4. 如果有兄弟关系的标签，就可以用+就可以了，比如div+p
5. 如果生成带有类名或者id名字的，直接写.demo或者#two tab键就可以了
6. 如果生成的div类名是有顺序的，就可以用增符号$
7. 如果想要在生成的标签内部写内容可以用{}
0.2 快速生成CSS样式语法
CSS基本采取简写的形式即可。
1. 比如 w200 按tab键可以生成width：200px
2. 比如 lh26 按tab键 可以生成line-height：26px
0.3 快速格式化代码
1. CSS复合选择器
1.1 什么是复合选择器
在CSS中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上的，对基本选择器进行组合形成的。
1. 复合选择器可以更准确、更高效的选择目标元素（标签）
2. 复合选择器是由两个或多个基础选择器，通过不同的方式组合形成的
3. 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
1.2 后代选择器（重要）
后代选择器又称为包含选择器，可以选择父元素里面的子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。
语法：
1. 元素1和元素2 中间用空格隔开
2. 元素1 是父级，元素2 是子级，最终选择的是元素2
3. 元素2可以是儿子，也可以是孙子等，只要是元素1 的后代即可
4. 元素1 和元素2 可以是任意基础选择器
1.3 子选择器（重要）
子元素选择器 （子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素
语法：
1. 元素1和元素2中间用大于号隔开
2. 元素1是父级，元素2是子级，最终选择的是元素2
3. 元素2必须是亲儿子，其孙子、重孙之类的都不归他管。你也可以叫他亲儿子选择器
1.4 并集选择器（重要）
并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。
并集选择器是各选择器通过英文逗号（，）连接而成，任何形式的选择器都可以作为并集选择器的一部分。
语法：
1. 元素1和元素2中间用逗号隔开
2. 逗号可以理解为和的意思
3. 并集选择器通常用于集体声明
1.5 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。
伪类选择器书写最大的特点使用冒号（：）表示，比如：：hover、：first-child。
因为伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。
1.6 链接伪类选择器
1. 链接伪类选择器注意事项。
（1）为了确保生效，请按照LVHA的循顺序声明：link- ：visited- ：hover- ：active。
（2）记忆法：love hate或者lv包包hao。
（3）因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
2. 链接伪类选择器实际开发中的写法。
1.7 :focus伪类选择器
:focus伪类选择器用于获得焦点的表单元素。
焦点就是光标，一般情况下<input>类表单元素才能获取，因为这个选择器也主要针对于表单元素来说。
1.8 复合选择器总结
2. CSS元素显示模式
了解元素显示模式可以更好的让我们的布局页面。
2.1 什么是元素显示模式
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
元素显示模式就是元素（标签）以什么方式进行显示，比如<div>自己占一行，比如一行可以放多个<span>.
HTML元素一般分为块元素和行内元素两种类型。
2.2 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
2.3 行内元素
2.4 行内块元素
2.5 元素显示模式总结
2.6 元素显示模式的转换
2.6 一个小工具的使用 snipaste
案例：简洁版小米侧边栏
2.7 一个小技巧 单行文字垂直居中的代码
2.8 单行文字垂直居中的原理
3. CSS背景
通过CSS背景属性，可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
3.1 背景颜色
3.2 背景图片
3.3 背景平铺
3.4 背景图片位置
3.5 背景图像固定（背景附着）
3.6 背景复合写法
3.7 背景色半透明
3.8 背景总结
综合案例：五彩导航
98
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
