CSS
1、Emmet语法
1.1 生成HTML结构语法
- 直接输入标签名按Tab键生成
- 生成多个相同标签："标签数量"+tab，如div3
- 父子级关系标签：“标签>标签”+tab，如ol>li
- 兄弟关系标签：“标签+标签”+tab，如div+p
- 生成带有类名或id名字，直接写.demo或者#demo ，再按tab 键
- 若需生成的div类名是有顺序，用 “div$*数值” + tab
- 生成的标签内部有写内容，用"标签{内容}" + tab；生成的内容自增则如 “div{$}*数值”
1.2 生成CSS样式语法
CSS基本采取简写形式
例如：
- w200 + tab 生成 width：200px;
- lh26 + tab 生成 line-height: 26px;
- tdn + tab 生成 text-decoration: none;
1.3 快速格式化代码
- 进入设置页面，搜索emmet.include;
- 在用户的settings.json下添加：“editor.formatOnType”: true 和
“editor.formatOnSave”: true 并保存
设置完成后写完代码保存页面时具有自动格式化代码的能力
2、CSS的复合选择器
定义：复合选择器是建立在基础选择器之上，对基本选择器进组合形成的
常用的复合选择器：
| 选择器 | 作用 | 特征 | 隔开符号及用法 |
|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 符号：空格，用法：.nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 符号：>，用法：.nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 用于集体声明 | 符号：逗号，用法：.nav,.header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接相关 | 记住a{}和a:hover实际开发写法 |
| :focus选择器 | 选择获得光标的表单 | 跟表单相关 | 记住input:focus写法 |
2.1 后代选择器
任意基础选择器的组合
语法：
元素1 元素2 {样式声明}
如：
ul li {样式声明} /*选择ul里面所有的li标签元素*/
注意：
- 元素1 和元素2 用空格隔开
- 元素1 是父级，元素2 是子级，最终选择的是元素2
- 元素2 只要是元素1 的后代即可
- 要一层一层的走
- 出现相同标签时，可以定义元素1的类名，然后 “类名 元素2 元素3 {样式内容}”即可，如定义
<ul class="nav">可使用.nav li a
2.2 子元素选择器（子代选择器）
子元素选择器只能选择作为某元素的最近一级子元素
语法：
元素1>元素2 {样式声明}
如：
div>a {样式声明} /*选择div里面所有最近一级的a标签元素*/
注意：
- 元素1 和元素2 用大于号隔开
- 元素1 是父级，元素2 是子级，最终选择元素2
- 元素2 必须是亲儿子，儿子的后代不选择
2.3 并集选择器
并集选择器可以选择多组标签，同时为他们定义样式，任何形式的选择器都可以作为并集选择器的一部分
语法：
元素1，
元素2 {样式声明} /*通常竖着写*/
如：
p,div {样式声明} /*选择 p 和 div 标签元素*/
注意：
- 元素1 和元素2 用逗号隔开
- 最后一组元素后不需要写逗号
- 任何形式的选择器都可以作为并集选择器的一部分，如：设置有
<ul class="ing">里面的<li>，可以使用：“div,p,.ing li {样式声明}”
2.4 链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果
链接伪类选择器：
| 语法 | 作用 |
|---|---|
| a:link | 选择所有未被访问的链接 |
| a:visited | 选择所有已被访问的链接 |
| a:hover | 选择鼠标指针位于其上的链接 |
| a:active | 选择活动链接（鼠标按下未弹起的链接） |
注意：
- 为确保生效，请按照LVHA的顺序声明：link - visited - hover - active
- 链接 a 在浏览器中具有默认样式，所以在实际开发中要给链接单独指定样式
在实际开发中的写法：
a {
color: gray;
}
a:hover {
color: blue;
}
2.5 :focus伪类选择器
:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况<input>类表单元素才能获取
例如：
input:focus {
background-color:yellow;
}
3、CSS的元素显示模式
元素显示模式就是元素（标签）以什么方式进行显示
HTML元素一般分为块元素和行内元素
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置高度宽度 | 容器的100% | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置高度宽度 | 它本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行可以放多个行内块元素 | 可以设置高度宽度 | 它本身内容的宽度 |
3.1 块元素
常见的块元素：<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>是最经典的块元素
块元素的特点：
- 独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器的100%
- 是一个容器及盒子，可以放行内或者块级元素
注意：
- 文字类的元素内不能使用块级元素
<p>标签里不能放<div>，<h1>~<h6>里也不能放其他块级元素
3.2 行内元素
常见的行内元素： <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<span>、<s>，<span>最典型
行内元素的特点：
- 相邻行内元素在一行上，一行可以显示多个
- 宽、高直接设置是无效的
- 默认宽度就是它本身的宽度
- 行内元素只能容纳文本或其他行内元素
注意：
- 链接里面不能再放链接
- 特殊情况链接
<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全
3.3行内块元素
行内块元素：<img />、<input>、<td>
行内块元素的特点：
- 和相邻的行内块在一行上，但是他们之间会有空白缝隙，一行可以显示多个
- 默认宽度是它本身内容的宽度
- 高度、行高、外边距以及内边距都可以控制
3.4 元素显示模式的转换
元素显示模式的转换：一种模式的元素需要另外一种模式的特性
- 转换为块元素：display:block;
- 转换为行内块元素：display:inline-block;
- 转换为行内元素：display:inline;
例如，增加链接 <a>的触发范围：
a {
width: 300px;
height: 150px;
display:block;
}
3.5 单行文字垂直居中的小技巧
让文字的行高等于盒子的高度，就可以实现让文字在当前盒子内垂直居中
4、CSS的背景
通过CSS背景属性，可以给页面元素添加背景样式
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制/rgb代码 |
| background-image | 背景图片 | url (图片路径） |
| background-repeat | 是否平铺 | repeat、 no-repeat、 repeat-x、 repeat-y |
| background-position | 背景位置 | length、position，分别为x和y坐标 |
| background-attachment | 背景附着 | scroll、fixed |
| 背景简写 | 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; | |
| 背景半透明 | 背景颜色半透明 | background:rgba(0,0,0,.2) |
4.1 背景颜色
属性 background-color定义了元素的背景颜色
语法：
background-color:颜色值;
注意：
- 一般情况下元素背景颜色默认值是transparent（透明）
背景颜色半透明：
background: rgba(0,0,0,0.3);
注意：
- 最后一个参数是alpha透明度，取值范围为0~1
- 习惯性把参数 0.3 的 0 省略，写为 background:rgba(0,0,0,.3)
- 背景半透明：盒子背景半透明，盒子里内容不受影响
4.2 背景图片
background-image 属性描述了元素的背景图像，实际开发常见于logo或一些装饰性的小图片或超大的背景图片，也非常便于控制位置（背景图片会压住背景颜色）
语法：
background-image:none | url(url) /*none——无背景图，url——使用绝对或相对地址指定背景图像*/
4.3 背景平铺和背景位置
1、背景平铺
属性：background-repeat
语法：
background-repeat:repeat | no-repeat | repeat-x | repeat-y
| 参数值 | 作用 |
|---|---|
| repeat | 背景图像在纵向和横向上平铺 |
| no-repeat | 不平铺 |
| repeat-x | 在横向上平铺 |
| repeat-y | 在纵向上平铺 |
2、背景位置
背景图片的位置：属性background-position 用来改变图片在背景中的位置
语法：
background-position:x y; /* x坐标和 y坐标,可以使用方位名词或精确单位*/
| 参数值 | 说明 |
|---|---|
| length | 百分数 由浮点数字和单位标识符组成的长度值 |
| position | top、center、bottom、left、right 方位名词 |
参数是方位名词：
- 如果指定的两个值都是方位名词，则两个值前后顺序无关，如center top和top center效果一致
- 如果只指定了一个方位名词，另一个值省略，那么第二个值默认居中对齐
参数是精确单位：
- 如果参数值是精确坐标，那么第一个一定是x坐标，第二个是y坐标
- 如果只指定一个数值，那该数值一定是x坐标，另一个默认垂直居中
参数是混合单位：
- 如果指定的两个值是精确单位和方位名词的混合使用，则第一个值是x坐标，第二个值是y坐标
4.4 背景图像固定
设置背景图像是否固定或者随着页面的其余部分滚动的属性：background-attachment
background-attachment 可以制作视差滚动的效果
语法：
background-attachment:scroll | fixed
| 参数 | 作用 |
|---|---|
| scroll | 背景图像随对象内容滚动 |
| fixed | 背景图像固定 |
4.5背景复合写法
为节约代码，可以将这些属性合并简写在一个属性background 中
简写属性时没有特定的书写顺序，一般约定为：
background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
例如：
background:black url() no-repeat fixed center top;
5、CSS的三大特性
CSS 三大特性：层叠性、继承性、优先级
5.1 层叠性
相同选择器给设置相同的样式，此时一个样式就会被层叠（覆盖）另一个冲突的样式，层叠性主要解决样式冲突问题。
层叠性原则：
- 样式冲突，遵循的原则是就近原则，哪个样式离结构近就执行哪个样式
- 样式不冲突，不会层叠
5.2 继承性
CSS 中的继承：子标签会继承父标签的某些样式，如文本颜色和字号
- 恰当使用可以简化代码
- 子标签可以继承父标签的样式（text-、font-、line-这些元素开头的都可以继承
特别情况：行高的继承
body {
/*子元素继承父元素的行高1.5，这个1.5就是当前元素文字大小的1.5倍*/
font:16px/1.5 Microsoft yahei; /*1.5也可以直接设置行高，如24px*/
}
注意：
- 行高可以跟单位，也可以不跟单位
- 如果子元素没有设置行高，则会继承父元素的行高，此时子元素的行高是：当前子元素的字号*1.5
- body行高 1.5 的写法的优势是子元素可以根据自己文字大小自动调整行高
5.3 优先级
当同一个元素指定多个选择器，就会有优先级的产生
原则：
- 选择器相同，则执行层叠性
- 选择器不同，则根据选择器权重执行
选择器权重：
| 选择器 | 权重 |
|---|---|
| 继承或 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器、伪类选择器 | 0,0,1,0 |
| id选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important | 无穷大 |
注意：
- 权重是有4组数字组成，但不会有进位
- 可以理解为类选择器永远大于元素选择器等
- 等级判断从左到右，如果某一数值相同，则判断下一位数值
- 继承的权重是0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0
权重叠加：
如果是复合选择器，则会有权重叠加（不会进位），需要计算权重
例如：
因为
ul li 的权重是：0,0,0,1 + 0,0,0,1 = 0,0,0,2
li 的权重是：0,0,0,1
所以 ul li 的权重大于 li 的权重
.nav li 的权重是: 0,0,1,0 + 0,0,0,1 = 0,0,1,1