【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景（Day 2）

来源：黑马程序员pink老师前端入门教程

---

目录

I. Emmet 语法

①快速生成HTML结构语法

②快速生成CSS样式语法

③快速格式化代码

II. 复合选择器 

①后代选择器※

​

②子选择器※

​

③并集选择器※

​

④伪类选择器

​

❀链接

❀focus

⑤总结

III. 元素显示模式

​①块元素​ ②行内元素

​

③行内块元素

​④总结

⑤显示模式的转换

⑥snipaste的使用

⑦单行文字垂直居中

IV. 背景

 总 结 

①背景颜色 bgc

❀半透明

 ②背景图片 bgi

③背景平铺 bgr

④背景图片位置 bgp※

​

❀参数是方位名词

​

❀参数是精确单位

​

❀参数是混合单位

⑤背景图像固定bga

​⑥复合写法

​

V. CSS的三大特性

①层叠性→就近原则

②继承性

​

❀行高的继承性

③优先性

​❀!important 的写法

❀注意点

❀复合选择器的权重叠加

---

I. Emmet 语法

介绍：Emmet 语法的前身是Zen coding，它使用缩写来提高html/css的编写速度，Vscode内部已经集成该语法

①快速生成HTML结构语法

eg.代码只给出了里的部分

    
    
    
    

        

    
    
    

    
    
    
    
    
    
    
    

    

    

    
    
这个好有意思嘿嘿嘿
    
这个好有意思嘿嘿嘿
    
    
1
    
2
    
3
    
4
    
5

②快速生成CSS样式语法

主要是要记住

③快速格式化代码

新版本→搜索 Format On Type，打钩即可

II. 复合选择器 

①后代选择器※

②子选择器※

eg.代码：

    
    
    
    
    



    
    

        这个不是子节点
        
ol的子节点1
        
ol的子节点2
        
ol的子节点3
            
孙节点
        
    
    

        
ul的子节点1
        
ul的子节点2
        
ul的子节点3
    
    

        
ul的子节点1
        
ul的子节点2
        
ul的子节点3
    

效果：

③并集选择器※

一般竖着写，最后一个元素后不加逗号！

④伪类选择器

❀链接

※基本使用

※注意事项→按照LVHA的循顺序声明（即，link → visited → hover → active ) ，不然会无效！

※常用写法→标题标签 < h1-6 > 和链接标签 < a > 要单独设置样式！

❀focus

⑤总结

III. 元素显示模式

①块元素
 ②行内元素

③行内块元素

④总结

⑤显示模式的转换

⑥snipaste的使用

⑦单行文字垂直居中

❀解决措施→让文字的行高等于盒子的高度 

❀原理

IV. 背景

 总 结 

①背景颜色 bgc

❀半透明

※ 最后一个数值的 0可以省略 ※

 ②背景图片 bgi

③背景平铺 bgr

默认平铺（repect ）

④背景图片位置 bgp※

❀参数是方位名词

❀参数是精确单位

❀参数是混合单位

⑤背景图像固定bga

⑥复合写法

eg. 

background:black url(images/bg.jpg) no-repeat fixed center top;

V. CSS的三大特性

①层叠性→就近原则

②继承性

主要继承文本类 样式

❀行高的继承性

③优先性

• 选择器相同，则执行层叠性
• 选择器不同，则根据选择器权重执行

❀!important 的写法

div {
    color:pink!important;
}

❀注意点

❀复合选择器的权重叠加

按选择器权重叠叠加，注意没有进位

eg.例题

---

恭喜看到这的小伙伴，你已经完成CSS第二天的学习了~！

下面进入第三天吧(★ ω ★)→第三天

有用的话就点赞评论收藏嗷！！