css|【前端】Emmet语法、CSS复合选择器、元素显示样式 html5|vscode|前端

信仰：一个人走得远了，就会忘记自己为了什么而出发，希望你可以不忘初心，不要随波逐流，一直走下去
欢迎关注点赞收藏留言
本文由程序喵正在路上原创，CSDN首发！
系列专栏：HTML5+CSS3+移动端前端
首发时间：2022年7月9日
? 如果觉得博主的文章还不错的话，希望小伙伴们三连支持一下哦

阅读指南

学习目标
Emmet 语法
- ? 快速生成 HTML 结构语法
- ? 快速生成 CSS 样式语法
- ? 快速格式化代码
CSS 的复合选择器
- ? 什么是复合选择器
- ? 后代选择器（重点）
- ? 子选择器（重点）
- ? 并集选择器（重点）
- ? 伪类选择器
- ? 链接伪类选择器
- ? :focus伪类选择器
- ? 复合选择器总结
CSS 的元素显示样式
- ? 什么是元素显示模式
- ? 块元素
- ? 行内元素
- ? 行内块元素
- ? 元素显示模式总结
- ? 元素显示模式的转换
- ? 案例：简洁版小米侧边栏
- - 目标
  - 核心思路
  - 让单行文字垂直居中
  - 源码和效果图

学习目标 ? 能够使用 emmet 语法
? 能够使用 CSS 复合选择器
? 能够写出伪类选择器的使用规范
? 能够说出元素有几种显示模式
? 能够写出元素显示模式的相互转换代码
? 能够写出背景图片的设置方式
? 能够计算 CSS 的权重
Emmet 语法 Emmet 语法的前身是 Zen coding，它使用缩写，来提高 html/css 的编写速度，Vscode 内部已经集成该语法
? 快速生成 HTML 结构语法

生成标签直接输入标签名按 enter 键或者 tab 键即可，比如 div 然后 tab 键，就可以生成
如果想要生成多个相同标签，加上 * 就可以了，比如 div*3 就可以快速生成 3 个 div
如果有父子级关系的标签，可以用 >，比如 ul>li 就可以了
如果有兄弟关系的标签，用 + 就可以了，比如 div+p
如果想要生成带有类名或者 id 名字的标签，直接写 .demo 或者 #two tab 键就可以了，默认是 div 标签；如果想生成自己想要的标签，可以写 p.demo、span#two 等等
如果想要生成的 div 类名是有顺序的，可以用自增符号 $ ，比如 div.demo$*3
如果想要在生成的标签内部写内容，可以用 {} 表示，比如 div{快速生成CSS样式语法} 然后按 enter 键或者 tab 键就可以快速生成；如果想要一次性生成多个，那可以按照 div{快速生成CSS样式语法}*3 这样的格式来写；如果想要生成自增的多个标签，可以按照 div{demo$}*3 这样的格式来写

文章图片

文章图片

? 快速生成 CSS 样式语法 CSS 基本采取简写形式即可

输入 w200 按 enter 键或者 tab 键就可以生成 width: 200px;
输入 lh26px 按 enter 键或者 tab 键就可以生成 line-height: 26px;
输入 tac 就可以生成 text-align: center;
输入 ti2em 就可以生成 text-indent: 2em;
输入 h200 就可以生成 height: 200px;
输入 tdn 就可以生成 text-decoration: none;

? 快速格式化代码在 IDEA 里面，我们可以通过按 Ctrl + Alt + L 快捷键来格式化我们的代码，让我们的代码看起来更美观；同样地，Vscode 也给我们提供了快速格式化代码的方式，你只需要右击选择 “格式化文档” 或者按下 Shift + Alt + L 快捷键就可以了

文章图片

也可以设置当我们保存页面的时候自动格式化代码，步骤如下

文件 ? 【首选项】? 【设置】
搜索 format
点击格式化一栏，然后把 Format On Save 和 Format On Type 勾选上就可以

具体步骤看下图

文章图片

只需要设置一次即可，以后都可以自动格式化代码
CSS 的复合选择器 ? 什么是复合选择器在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基础选择器进行组合形成的
● 复合选择器可以更准确、更高效地选择目标元素（标签）
● 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
● 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
? 后代选择器（重点）后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代
语法格式如下

元素1 元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有元素 2（后代元素）
例如：

ul li { 样式声明 }/* 选择 ul 里面所有的 li 标签元素 */

● 元素 1 和元素 2 中间用空格隔开
● 元素 1 是父级，元素 2 是子级，最终选择的是元素 2
● 元素 2 可以是儿子，也可以是孙子等，只要是元素 1 的后代即可
● 元素 1 和元素 2 可以是任意基础选择器

复合选择器之后代选择器 - 锐客网 > /* 怎么把ol里面的小li选出来改变颜色呢 */ ol li { color: red; }ol li a { color: gold; }.nav li a { color: pink; } 我是ol的孩子我是ol的孩子我是ol的孩子我是孙子我是ul的孩子我是ul的孩子我是ul的孩子不会变化的我是ul的孩子我是ul的孩子我是ul的孩子不会变化的

文章图片

? 子选择器（重点）子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素
语法格式如下

元素1>元素2 { 样式声明 }

上述语法表示选择元素 1 里面的所有直接后代（子元素）元素 2
例如：

div>p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */

● 元素 1 和元素 2 中间用大于号隔开
● 元素 1 是父级，元素 2 是子级，最终选择的是元素 2
● 元素 2 必须是亲儿子，其孙子、重孙之类都不归它管，你也可以叫他亲儿子选择器

子选择器 - 锐客网 > .nav>a { color: red; } 我是儿子我是孙子

文章图片

? 并集选择器（重点）并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法格式如下

元素1,元素2 { 样式声明 }

上述语法表示选择元素 1 和元素 2
例如：

ul,div { 样式声明 } /* 选择 ul 和 div 标签元素 */

● 元素 1 和元素 2 中间用逗号隔开
● 逗号可以理解为和的意思
● 并集选择器通常用于集体声明

并集选择器 - 锐客网 > /* 1. 将熊大、熊二改为红色 */ /* div, p { color: red; } *//* 2. 将熊大、熊二改为红色，吉吉国王、毛毛改为红色 */ div, p, .monkey li { color: red; } 熊大熊二 >光头强吉吉国王毛毛

文章图片

? 伪类选择器伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第 1 个，第 n 个元素
伪类选择器书写最大的特点是用冒号表示，比如 :hover、:first-child
伪类选择器有很多，比如有链接伪类、结构伪类等
? 链接伪类选择器语法格式如下

a:link/* 选择所有未被访问的链接 */ a:visited/* 选择所有已被访问的链接 */ a:hover/* 选择鼠标指针位于其上的链接 */ a:active/* 选择活动链接（鼠标按下未弹起的链接） */

链接伪类选择器 - 锐客网 > /* 未访问过的链接 */ a:link { color: #333; text-decoration: none; }/* 访问过的链接 */ a:visited { color: red; }/* 选择鼠标经过的那个链接 */ a:hover { color: skyblue; }/* 选择鼠标按下但还没有弹起的链接 */ a:active { color: pink; } 夏目友人帐度娘

文章图片

链接伪类选择器注意事项

为了确保生效，请按照 LVHA 的顺序声明 :link、:visited、:hover、:active
记忆法：love hate 或者 lv 包包 hao
因为 a 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式

链接伪类选择器实际工作开发中的写法

/* a 是标签选择器，所有的链接*/ a { color: gray; } /* :hover 是链接伪类选择器，鼠标经过 */ a:hover { color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */ }

? :focus伪类选择器 :focus 伪类选择器用于选取获得焦点的表单元素
焦点就是光标，一般情况类表单元素才能获取，因为这个选择器也主要针对于表单元素来说
语法格式如下

input:focus { background-color: yellow; }

focus伪类选择器 - 锐客网 > input:focus { background-color: skyblue; }

文章图片

? 复合选择器总结

选择器	作用	特征	使用情况	隔开符号及其用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 `.nav a`
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于号 `.nav>p`
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 `.nav, .header`
链接伪类选择器	选择不同状态的链接	跟链接有关	较多	重点记住 `a {}` 和 `a:hover {}` 实际开发的写法
:focus 选择器	选择获得光标的表单	跟表单有关	较少	input:focus 记住这个用法

CSS 的元素显示样式了解元素的显示模式可以更好地让我们布局页面
? 什么是元素显示模式作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好地布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如让自己占一行，比如一行可以放多个
HTML 元素一般分为块元素和行内元素两种类型
? 块元素常见的块元素有 ~、、、