?? 信仰： ?? 欢迎关注点赞收藏留言 ?? 本文由 程序喵在路上 原创，CSDN首发！ ?? 系列专栏：HTML5 CSS3 移动端前端 ?? 2022年7月9日 ? 如果你得博主的文章还不错，希望朋友们三连支持。
阅读指南
- ??学习目标
- ??Emmet 语法
-
- ? 快速生成 HTML 结构语法
- ? 快速生成 CSS 样式语法
- ? 快速格式化代码
- ??CSS 复合选择器
-
- ? 复合选择器是什么？
- ? 后代选择器(重点)
- ? 子选择器（ 重点）
- ? 并集选择器(重点)
- ? 伪类选择器
- ? 链接伪类选择器
- ? :focus伪类选择器
- ? 总结复合选择器
- ??CSS 元素显示样式
-
- ? 什么是元素显示模式
- ? 块元素
- ? 行内元素
- ? 行内块元素
- ? 总结元素显示模式
- ? 转换元素显示模式
- ? 案例:简单版小米侧栏
-
- 目标
- 核心思路
- 让单行文字垂直居中
- 源代码和效果图
??学习目标
? 能够使用 语法 ? 能够使用 复合选择器 ? 伪类选择器的使用规范可以写出来 ? 有几种显示模式可以说出元素 ? 能够写出元素显示模式的相互转换代码 ? 背景图片的设置可以写出来 ? 能够计算 的权重
??Emmet 语法
语法的前身是 ，它使用缩写来改进 编写速度， 语法已经在内部集成
? 快速生成 HTML 结构语法
- 直接输入标签 enter 键或者 tab 比如 然后 tab 可以生成键
- 如果想要生成多个相同标签，加上 * 例如
div*3它可以快速生成 个 - 如果有父子关系的标签，可以使用 ，比如
ul>li就可以了 - 如果有兄弟关系的标签，用 例如
div p - 如果你想生成一个带有类名称或 直接写名字的标签 或者 tab 键就够了，默认是 标签；如果你想生成你想要的标签，你可以写
p.demo、span#two等等 - 若要生成 类名有序，可以使用自增符号
$，比如div.demo$*3 - 如果你想在生成的标签中写内容，你可以使用它 表示，比如
div{快速生成CSS样式语法}然后按 enter 键或者 tab 按钮可以快速生成；如果你想一次生成多个，可以遵循div{快速生成CSS样式语法}*3写这样的格式；如果要生成多个自增标签，可以按照div{demo$}*3写这样的格式
? 快速生成 CSS 样式语法
基本采用简写形式
- 输入
w200按 键或者 可以生成键width: 200px; - 输入
lh26px按 键或者 可以生成键line-height: 26px; - 输入
tac就可以生成text-align: center; - 输入
ti2em就可以生成text-indent: 2em; - 输入
h200就可以生成height: 200px; - 输入
tdn就可以生成text-decoration: none;
? 快速格式化代码
在 在里面，我们可以按 Ctrl Alt L 快捷键格式化我们的代码，让我们的代码看起来更漂亮；同样， 它还为我们提供了一种快速格式化代码的方您只需右击即可选择 “” 或者按下 Shift Alt L 快捷键就够了
当我们保存页面时，也可以设置自动格式化代码，步骤如下
- 文件 ? 【首选】 【设置】
- 搜索
- 点击格式化列，然后将其放置 和 可以勾选
具体步骤见下图
只需设置一次即可，以自动格式化代码
??CSS 复合选择器
? 复合选择器是什么？
在 在中间，选择器可以根据选择器的类型分为基本选择器和复合选择器。复合选择器是基于基本选择器组合的
● 目标元素(标签)可以更准确、更高效地选择复合选择器 ● 复合选择器由两个或多个基本选择器以不同的方式组合而成 ● 常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪选择器等
? 后代选择器(重点)
后代选择器也被称为包含选择器，可以选择父元素中的子元素。它的写作方法是在前面写一个外部标签，在后面写一个内部标签，中间用空间分隔。当标签嵌套时，内部标签被称为外部标签的后代
语法格式如下
元素1 元素2 {
样式声明 } 上述语法表示元素的选择 里面的所有元素 （后代元素）
例如：
ul li {
样式声明 } /* 选择 ul 里面所有的 li 标签元素 */
● 元素 和 元素 中间用 ● 元素 是父级，元素 是子级，最终选择的是元素 ● 元素 可以是儿子，也可以是孙子等，只要是元素 的后代即可 ● 元素 和元素 可以是任意基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合选择器之后代选择器</title>
<style> /* 怎么把ol里面的小li选出来改变颜色呢 */ ol li {
color: red; } ol li a {
color: gold; } .nav li a {
color: pink; } </style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li><a href="#">我是孙子</a></li>
</ol>
<!-- 下面是两个一样的ul -->
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="#">不会变化的</a></li>
</ul>
<!-- 类名区分 -->
<ul class="nav">
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li><a href="#">不会变化的</a></li>
</ul>
</body>
</html>
➥ 子选择器（ 重点）
子元素选择器（子选择器）只能选择作为某元素的最近一级子元素，简单理解就是选亲儿子元素
语法格式如下
元素1>元素2 {
样式声明 }
上述语法表示选择元素 里面的所有直接后代（子元素）元素
例如：
div>p { 样式声明 } /* 选择 div 里面所有最近一级 p 标签元素 */
● 元素 和元素 中间用大于号隔开 ● 元素 是父级，元素 是子级，最终选择的是元素 ● 元素 必须是亲儿子，其孙子、重孙之类都不归它管，你也可以叫他亲儿子选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>子选择器</title>
<style> .nav>a {
color: red; } </style>
</head>
<body>
<div class="nav">
<a href="#">我是儿子</a>
<p>
<a href="#">我是孙子</a>
</p>
</div>
</body>
</html>
➥ 并集选择器（重点）
并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明
并集选择器是各选择器通过英文逗号连接而成，任何形式的选择器都可以作为并集选择器的一部分
语法格式如下
元素1,元素2 {
样式声明 }
上述语法表示选择元素 和元素
例如：
ul,div {
样式声明 } /* 选择 ul 和 div 标签元素 */
● 元素 和元素 中间用逗号隔开 ● 逗号可以理解为和的意思 ● 并集选择器通常用于集体声明
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>并集选择器</title>
<style> /* 1. 将熊大、熊二改为红色 */ /* div, p { color: red; } */ /* 2. 将熊大、熊二改为红色，吉吉国王、毛毛改为红色 */ div, p, .monkey li {
color: red; } </style>
</head>
<body>
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="monkey">
<li>吉吉国王</li>
<li>毛毛</li>
</ul>
</body>
</html>
➥ 伪类选择器
伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第 个，第 个元素
伪类选择器书写最大的特点是用冒号表示，比如 :hover、:first-child
伪类选择器有很多，比如有链接伪类、结构伪类等
➥ 链接伪类选择器
语法格式如下
a:link /* 选择所有未被访问的链接 */
a:visited /* 选择所有已被访问的链接 */
a:hover /* 选择鼠标指针位于其上的链接 */
a:active /* 选择活动链接（鼠标按下未弹起的链接） */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>链接伪类选择器</title>
<style> /* 未访问过的链接 */ a:link {
color: #333; text-decoration: none; } /* 访问过的链接 */ a:visited {
color: red; } /* 选择鼠标经过的那个链接 */ a:hover {
color: skyblue; } /* 选择鼠标按下但还没有弹起的链接 */ a:active {
color: pink; } </style>
</head>
<body>
<a href="#">夏目友人帐</a><br>
<a href="http://www.baidu.com" target="_blank">度娘</a>
</body>
</html>
链接伪类选择器注意事项
- 为了确保生效，请按照 的顺序声明
:link、:visited、:hover、:active - 记忆法： 或者
- 因为 链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式
链接伪类选择器实际工作开发中的写法
/* a 是标签选择器，所有的链接 */
a {
color: gray;
}
/* :hover 是链接伪类选择器，鼠标经过 */
a:hover {
color: red; /* 鼠标经过的时候，由原来的灰色变成了红色 */
}
➥ :focus伪类选择器
:focus 伪类选择器用于选取获得焦点的
焦点就是光标，一般情况 <input> 类表单元素才能获取，因为这个选择器也主要针对于表单元素来说
语法格式如下
input:focus {
background-color: yellow;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>focus伪类选择器</title>
<style> input:focus {
background-color: skyblue; } </style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
</html>
➥ 复合选择器总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及其用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择后代元素 | 可以是子孙后代 | 较多 | 符号是 .nav a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是 .nav>p |
| 并集选择器 | 选择某些相同样式的元素 | 可以用于集体声明 | 较多 | 符号是 .nav, .header |
| 链接伪类选择器 | 选择不同状态的链接 | 跟链接有关 | 较多 | 重点记住 a {} 和 a:hover {} 实际开发的写法 |
| 选择器 | 选择获得光标的表单 | 跟表单有关 | 较少 | input:focus 记住这个用法 |
🔯CSS 的元素显示样式
了解元素的显示模式可以更好地让我们布局页面
➥ 什么是元素显示模式
作用：网页的标签非常多，在不同的地方会用到不同类型的标签，了解它们的特点可以更好地布局我们的网页
元素显示模式就是元素（标签）以什么方式进行显示，比如 <div> 让自己占一行，比如一行可以放多个 <span>
元素一般分为块元素和行内元素两种类型
➥ 块元素
常见的块元素有 <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等，其中 <div> 标签是最典型的块元素
块元素的特点
- 自己独占一行
- 高度、宽度、外边距以及内边距都可以控制
- 宽度默认是容器（父级宽度）的
- 是一个容器及盒子，里面可以放行内元素或者块元素
注意 ● 文字类的元素内不能使用块级元素 ● 比如说 <p> 标签主要用于存放文字，因此 <p> 里面不能放块级元素，特别是不能放 <div> ● 同理，<h1> ~ <h6> 等都是文字类块级标签，里面也不能放其他块级元素
➥ 行内元素
常见的行内元素有 <a>、<label>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span> 等，其中 <span> 标签是最典型的行内元素，有的地方也将行内元素称为内联元素
行内元素的特点
- 相邻行内元素在一行上，一行可以显示多个
- 高、宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注意 ● 链接里面不能再放链接 ● 特殊情况链接 <a> 里面可以放块级元素，但是给 <a> 转换一下块级模式最安全
➥ 行内块元素
在行内元素中有几个特殊的标签 —— <img />、<input />、<td>，它们同时具有块元素和行内元素的特点，有些资料称它们为行内块元素
行内块元素的特点
- 和相邻行内元素（行内块）在一行上，但是它们之间会有空白缝隙，一行可以显示多个（行内元素特点）
- 默认宽度就是它本身内容的宽度（行内元素特点）
- 高度、行高、外边距以及内边距都可以控制（块级元素特点）
➥ 元素显示模式总结
| 元素模式 | 元素排列 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置宽和高度 | 容器的 | 容器级可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置宽和高度 | 它本身内容的宽度 | 容纳文本或者其他行内元素 |
| 行内块元素 | 一行放多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
➥ 元素显示模式的转换
特殊情况下，我们需要元素模式的转换，简单理解：一个模式的元素需要另外一种模式的特性
比如想要增加链接 <a> 的触发范围
● 转换为块元素：display:block; ● 转换为行内元素：display:inline; ● 转换为行内块元素：display:inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>元素显示模式转换</title>
<style> a {
width: 150px; height: 50px; background-color: skyblue; /* 把行内元素a转换为块级元素 */ display: block; } div {
width: 300px; height: 100px; background-color: aqua; /* 把块元素div转换为行内元素 */ display: inline; } span {
width: 300px; height: 30px; background-color: chartreuse; display: inline-block; } </style>
</head>
<body>
<a href="#">我是行内元素</a>
<a href="#">我是行内元素</a>
<div>我是块级元素</div>
<div>我是块级元素</div>
<span>行内元素转换为行内块元素</span>
<span>行内元素转换为行内块元素</span>
</body>
</html>
➥ 案例：简洁版小米侧边栏
目标
实现 小米购物商城 的导航侧边栏