目录
1.1 块元素：h1; p; div; ul; ol; li等
1.2 行内元素：a; strong; b; em; i; del ;s; ins; u; span等
5. 背景图像固定（背景附着）：background-attachment
一、Emmet语法
前身是Zen coding,使用缩写来提高HTML/CSS编写速度，Vscode内部已集成改语法。
1. 快速生成HTML结构语法
a) 生成标签: 标签名+tab键
b) 生成多个相同标签：加* ，如div*3
c) 如果有父子级关系：> ，如ul>li
d) 有兄弟关系的标签：+，如div+p
e) 如果生成带有类名或id名字的：.demo或#two +tab键即可，如p.two
f) 如果生成的div类名是有顺序的，可以用自增符号$，如.demo$*5
g) 如果想在生成标签内部写内容：{}，如div{春天$}*5
2. 快速生成CSS样式语法
写首字母即可，如tac(代表text-align：center)，w00px
3. 快速格式化代码
二、CSS复合选择器
复合选择器由两个及以上的基础选择器构成
1. 后代选择器（重要）: 空格
<style>
ul li {
color: pink;
}
</style>
2. 子选择器（重要）：>
只能选择某元素的最近一级子元素
<style>
.nav>a {
color: pink;
}
</style>
3. 并集选择器（重要） ：，
4. 伪类选择器
用于向某些选择器添加特殊效果，比如给链接添加特殊效果，或者选择第1个、第n个元素。
书写的最大特点是用冒号：表示，如：hover，：first-child。
4.1 链接伪类选择器
注意：安装LVHA的顺序来声明。
4.2 :focus伪类选择器
选取获得焦点的表单元素。
<style>
/* 选取获得光标的表单元素 */
input:focus {
background-color: sandybrown;
color:seagreen;
}
</style>
总结
三、CSS的元素显示模式
元素标签以什么方式显示
HTML元素一般分为块元素 和行内元素。
1. 种类
1.1 块元素：h1; p; div; ul; ol; li等
自己独占一行；
宽度、高度、内外边距都可以设置；
宽度默认是容器（父亲宽度body）的100%；
是一个容器，其中可以放行内元素、块元素。但注意文字类标签内不能有块元素。
1.2 行内元素：a; strong; b; em; i; del ;s; ins; u; span等
又叫内联元素。
一行内可以显示多个；
高和宽设置无效;
默认宽度是内容本身宽度；
只能容纳文本或者其他行内元素。
注意：链接内不能再放链接。特殊情况链接内可以放块元素，但给a转换下一级模式最安全。
1.3 行内块元素：img; input; td
同时具有块元素和行内元素的特点：
和相邻行内块元素在同一行但之间有空白缝隙（行内）；
其默认宽度就是内容宽度（行内）；
高度、行高、内外边距都可以控制（块）。
2.总结：
3.元素显示模式的转换：
一个模式的元素需要另一种模式的特性，如扩大链接a的触发范围。
4.截图取色小工具：Snipaste
5. 小技巧-单行文字垂直居中的代码
让文字的行高等于盒子的高度: 行高的上空隙和下空隙将文字挤到中间
四、CSS背景
通过CSS背景属性给页面元素添加背景样式：背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定。
1. 背景颜色：background-color
2. 背景图片：background-image
background-image: none | url(猫.webp);
<style>
div{
width: 200px;
height: 100px;
background-image: url(猫.webp);
}
</style>
3. 背景平铺：background-repeat
若既有背景图片又有背景颜色，则图片压住颜色
4. 背景图片位置：background-position
background-position: x y;
x/y坐标可以使用方位名词或者精确单位。
4.1 方位名词
若两个值都是方位名词，则x y顺序不影响。
若只指定了一个方位名词，则第二个是默认居中对齐。
4.2 精确单位
第一个一定是X坐标。
4.3 混合单位
如果方位名词和精确单位混用，则第一个一定代表坐标。
5. 背景图像固定（背景附着）：background-attachment
背景图像是否随着页面的其余部分滚动。
background-attachment：scroll | fixed
背景复合写法
简化背景属性代码，将其合并在一个background属性内。
位置不固定，需用空格隔开。
<style>
body {
background: transparent url(猫.webp) repeat-y top fixed;
}
</style>
6. 背景色半透明
内容不受影响，仅背景半透明。
background: rgba(0,0,0,0.3);
最后一个参数是alpha透明度，取值范围0-1之间。
CSS3新增属性，IE9+版本才支持。
总结：
五、CSS三大特性
1. 层叠性
若样式冲突，依照就近原则；那个样式距离结构近，执行那个样式
2. 继承性
子标签会继承父标签的某些样式，（text-, font-, line-, color）
行高的继承性：
body {
/* 行高是当前文字大小的1.5倍 */
font: 14px/1.5 "Microsoft Yahei";
}
行高可以跟单位，也可以不跟单位。
如果子元素没有设置行高，会继承父元素的行高：当前子元素文字大小*1、5；
3. 优先级
当同一个元素指定多个选择器 就会有优先级的产生
选择器相同，则执行层叠性
选择器不同，则根据选择器的权重执行
注：
权重由四位数组成但是不会有进位；
等级判断由左向右，若某一位相同，则判断下一位数值；
简单记忆: 通配符和继承的权重为0，标签选择器的权重为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，！important为无穷大。
继承的权重为0；
复合选择器的权重叠加。
1157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
