【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结构语法

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第1张图片

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

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

②快速生成CSS样式语法

主要是要记住

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第2张图片

③快速格式化代码

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

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第3张图片

II. 复合选择器 

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第4张图片

①后代选择器

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第5张图片

②子选择器

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第6张图片

eg.代码:





    
    
    
    Document
    



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

效果:

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第7张图片

③并集选择器

一般竖着写,最后一个元素后不加逗号!

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第8张图片

④伪类选择器

❀链接

※基本使用

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第9张图片

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

※常用写法→标题标签 < h1-6 > 和链接标签 < a > 要单独设置样式!【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第10张图片

focus

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第11张图片

⑤总结

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第12张图片

III. 元素显示模式

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第13张图片
①块元素
【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第14张图片 ②行内元素

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第15张图片

③行内块元素

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第16张图片④总结

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第17张图片

⑤显示模式的转换

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第18张图片

⑥snipaste的使用

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第19张图片

单行文字垂直居中

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

❀原理

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第20张图片

IV. 背景

 总 结 

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第21张图片

①背景颜色 bgc

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第22张图片

❀半透明

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

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第23张图片

 ②背景图片 bgi

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第24张图片

③背景平铺 bgr

默认平铺(repect

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第25张图片

④背景图片位置 bgp

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第26张图片

❀参数是方位名词

❀参数是精确单位

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第27张图片

❀参数是混合单位

⑤背景图像固定bga

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第28张图片
⑥复合写法

eg. 

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

V. CSS的三大特性

①层叠性→就近原则

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第29张图片

②继承性

主要继承文本类 样式

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第30张图片

❀行高的继承性

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第31张图片

③优先性

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

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第32张图片
!important 的写法

div {
    color:pink!important;
}

❀注意点

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第33张图片

❀复合选择器的权重叠加

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

eg.例题

【web前端】CSS笔记小结 Emmet+复合选择器+元素显示模式+背景(Day 2)_第34张图片


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

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

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

你可能感兴趣的:(web,css,前端,css3)