主题
CSS 进阶（二）
本页对应 CSS 进阶，共 8 段视频，约 1 小时 17 分。
学习目标
- 能按“通配符 < 标签 < 类/伪类 < ID < 行内 < !important”的顺序比较选择器优先级，并说明同类选择器相同权重时后写覆盖前写。
- 能计算复合选择器权重（如
.nav a、.box ul li a、a:hover），并解释“继承权重为0”导致父元素高权重样式无法覆盖子元素自身样式的现象。 - 能使用 Emmet 缩写生成 HTML 结构（类、ID、同级、父子、重复、文本）及常用 CSS 属性（宽高、背景色等）。
- 能使用
background-image、background-repeat、background-position为盒子设置背景图、控制平铺方式并定位到指定方位或坐标。 - 能实现全屏大背景图方案：不平铺、水平居中、垂直靠上或按指定像素下移，并验证核心区域始终显示在屏幕中央。
知识点
一、Emmet 是什么：把代码“缩写”出来
为什么需要：手写重复标签、类名和属性既慢又容易漏。Emmet 是代码的简写方式，输入缩写后 VS Code 会自动生成对应代码。
怎么想：把“标签名 + 类名/ID + 层级关系”映射成符号，让编辑器替我们展开。
怎么做：在 HTML/CSS 文件中输入缩写，按提示展开。例如 .box 可生成 div class="box"，#box 可生成带 id 的标签。
易错点：转写稿里的“amiit”应写作 Emmet；缩写要连续输入，别在中间乱加空格，否则会被当成后代关系。
二、HTML 标签简写：标签名、类名、ID
为什么需要：页面里大量 div、p、span，手写标签和类名很重复。
怎么想：标签名写在前面，. 后面跟类名，# 后面跟 ID。转写稿用 .box 推导：它本质是“div 与 box 类”的交集写法，所以能快速生成 div class="box"。
怎么做：
html
.box
#box
p#box
span.navspan.nav 中前面是标签，后面点后是类名，生成结果里 nav 应出现在 class 中。
易错点：. 是类，# 是 ID，别写反；span.nav 不是生成“span 里面再包 nav”，而是 span 带 nav 类名。
三、HTML 结构与内容：>、+、*、{}
为什么需要：真实页面有父子、同级、重复和文本内容，单靠标签名不够。
怎么想：> 表示父子级，+ 表示同级，* 表示重复个数，{} 表示标签内容。转写稿里 div>p 对应“父大于子”，类似子代选择器；div+p 是“div 和 p”同级。
怎么做：
html
div>p
div+p
div*3
div{内容}
ul>lidiv>p 生成 div 包 p；div+p 生成相邻同级；div*3 生成三个 div；div{内容} 把“内容”写进标签。
易错点：> 和 + 别混；转写稿里“子带”应纠正为“子代”；*3 是重复，不是乘进内容里。
四、CSS 属性简写：首字母与加号
为什么需要：CSS 属性长，反复手写 width、background-color 很慢。
怎么想：大多数简写取属性单词首字母或常见缩写；多个属性用 + 连接。转写稿明确说“宽度一个 w 就行”“w500”“背景颜色是 bgc”“多个属性用加号”。
怎么做：
css
w500
bgc
w500+bgc输入后看 VS Code 提示展开，再补具体值。
易错点：CSS 简写要以编辑器提示为准，别硬背所有缩写；+ 是并列多个属性，不要和 HTML 的同级 + 混淆。
五、调试与验证：看生成结果，别只看缩写
为什么需要：Emmet 展开很快，但展开错层级或类名位置，后面样式就会调不动。
怎么想：生成后立刻核对三件事：标签对不对、类名/ID 在不在正确位置、父子/同级关系对不对。转写稿复习时特别强调 A:hover 中间不要有空格，否则会被理解成后代关系；同理，Emmet 里的 .、#、>、+ 也不能随意插空格。
怎么做：先输入缩写看提示，展开后检查结构；若样式不生效，回到 HTML 看类名是否真的加到了目标标签上。
易错点：把“交集/类名”写成“后代”；把 A:hover 写成 A :hover；转写稿里“同配服”应纠正为“通配符”，但 Emmet 简写仍以实际提示为准。
背景图：装饰性图片
为什么需要：网页里有些图片只是装饰，比如盒子底纹、小图标、整屏背景。这类图更适合用背景图实现，而不是用 img 插入图片。转写稿里强调：img 像往瓶子里装图片，背景图是加在盒子底下的装饰。
怎么想：属性名是 background-image，简写 bgi；属性值必须写 url(图片地址)。
怎么做：
css
div {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}调试时先给盒子加宽高和背景色，再写 bgi，利用编辑器提示，避免漏掉 url()。背景图默认会平铺，所以小图会铺满整个盒子。
易错点：url() 不能丢；背景图是装饰，不占文档流；不要和 img 标签混用。
平铺方式
为什么需要：背景图默认重复平铺，但很多设计只想显示一张图，其余区域露出背景色。
怎么想：用 background-repeat（bgr）控制。常见值有 repeat、no-repeat，转写稿还演示了 repeat-x 横向平铺、repeat-y 纵向平铺。
怎么做：
css
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
}设置 no-repeat 后，图片只出现一块，盒子其余部分显示 background-color。
易错点：no-repeat 拼写要准确；不平铺后露出的颜色来自背景色，不是图片。
背景图位置
为什么需要：背景图默认在盒子左上角，但常需要居中、右下角或精确偏移。
怎么想：background-position（bgp），两个值：水平位置 垂直位置。关键字有 left/right/center/top/bottom；坐标中水平正数向右、负数向左，垂直正数向下、负数向上。注意网页坐标 Y 轴向下为正，和数学坐标方向不同。
怎么做：
css
div {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: center bottom;
background-position: 50px -100px;
background-position: 50px center;
}调试大背景图时，转写稿演示：官网大图先检查元素看到 background-image:url(...)，另存后给 body 设置；图片默认铺满，若不希望重复要 no-repeat；为保证核心区域可见，常写水平居中、垂直靠上，必要时用 42px 让出顶部盒子距离。
易错点：关键字写法可颠倒；只写一个关键字，另一个方向默认居中；只写一个数字表示水平方向，垂直默认居中；坐标写法有严格顺序，第一个是 X、第二个是 Y。
背景图缩放
为什么需要：图片原始尺寸和盒子尺寸不一定一致，需要按盒子缩放。
怎么想：background-size（bgz）。cover 等比例完全覆盖背景区，可能裁掉部分图片；contain 等比例完全装入背景区，可能留空白；也可写百分比或数字加单位。
怎么做：
css
div {
width: 500px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
}易错点：cover 可能看不见部分图片，contain 可能露背景色；图片比例与盒子比例相同时，两者效果相同。
背景图固定
为什么需要：页面内容滚动时，希望背景图不跟着滚，形成固定背景效果。
怎么想：background-attachment（bga），常用值 fixed。
怎么做：
css
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
}易错点：fixed 拼写别错；固定背景通常配合大容器或 body 使用。
背景复合属性
为什么需要：多个背景属性分开写重复，复合属性可一行完成。
怎么想：background（bg），值包括背景色、背景图、平铺方式、位置/缩放、固定，空格隔开，不区分顺序；位置和缩放之间用斜杠 /。
怎么做：
css
div {
width: 400px;
height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}易错点：位置/缩放之间的斜杠不能漏；虽然顺序不严格，但建议按“颜色 图片 平铺 位置/缩放 固定”书写，便于阅读和排查。
显示模式是什么
显示模式，就是标签（元素）的显示方式。它决定了元素在页面上是独占一行，还是能和其他元素并排；也决定了宽高属性是否生效。笔记中的总览图如下：
为什么需要：布局网页时，不同内容需要不同摆放方式。标题、段落、盒子通常要独占一行；链接、文字强调通常要并排显示；图片、按钮一类又希望并排且能设置宽高。
怎么想：先判断内容要“独占一行”还是“一行多个”，再判断“宽高是否要生效”，最后选合适标签或用 display 转换。
怎么做：根据块级、行内、行内块三类特点选择标签；不合适时用 display 转换。
易错点：不要只看标签名字，显示模式可以通过 CSS 改变；布局前先想清楚元素的排列需求。
转写稿中本节可直接对应的说明是：下午学习背景和显示模式，这两部分都挺重要；并提到“讲了显示模式，我们就可以真正去布局盒子了”。这说明显示模式是后续布局的基础。转写稿没有展开三种显示模式的逐条调试过程，因此下面依据笔记梳理，不额外编造。
块级元素
为什么需要：页面中的大结构、内容区块通常需要独占一行，方便从上到下排列。
怎么想：看到“独占一行、宽度默认占满父级、宽高生效”，就想到块级元素。常见如 div、p。
怎么做：直接使用块级标签，或给元素设置 display: block。笔记代码如下：
html
<!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. 独占一行 */
/* 2. 可以设置宽度和高度 */
/* 3. 宽度默认和父亲一样宽，如果么有父亲，则和浏览器一样宽 */
.box1,
.box2 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<p>abc</p>
<div class="box1">div1</div>
<div class="box2">
<p>123</p>
<p>123</p>
</div>
</body>
</html>易错点：块级元素默认宽度是父级的 100%，不是内容宽度；设置宽高会生效；块级元素不能控制里面块级元素的左中右对齐，笔记经验中特别提醒了这一点。
行内元素
为什么需要：文字、链接等内容常常需要一行显示多个，不能每个都独占一行。
怎么想：看到“一行多个、宽高设置不生效、宽高由内容撑开”，就想到行内元素。
怎么做：使用行内标签，或设置 display: inline。
易错点：给行内元素直接写 width、height 通常不生效；它的尺寸由内容决定。实际开发中常把链接等行内元素转换为块级或行内块，方便控制尺寸和布局。
行内块元素
为什么需要：既想一行显示多个，又想设置宽高，例如图片、按钮、部分卡片。
怎么想：同时满足“并排”和“宽高生效”，就选行内块。
怎么做：使用行内块标签，或设置 display: inline-block。
易错点：行内块既能设宽高，也能由内容撑开；不要和行内元素混淆，行内元素设宽高不生效。
转换显示模式
为什么需要：HTML 标签的默认显示模式不一定符合布局需求，需要用 CSS 转换。
怎么想：要独占一行就转 block；要一行多个且宽高生效就转 inline-block；要一行多个且宽高不生效就转 inline。
怎么做：使用 display 属性。笔记经验：重点记住把行内元素如链接转换为块级或行内块；display: block 尽量写到样式第一行；块级元素可以控制里面的行内元素或行内块元素左中右对齐；块级元素不能控制里面的块级元素对齐。
易错点：转换后要重新检查宽高、排列和对齐效果；不要只改标签，不改对应 CSS。
课件图示
代码示例
示例一：背景属性综合演示（背景图 / 平铺 / 位置 / 缩放 / 固定 / 复合属性）
html
<!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. 背景图：默认有平铺（复制）效果 */
.box1 {
width: 400px;
height: 400px;
background-image: url(./images/1.png);
}
/* 2. 平铺方式 + 位置 + 缩放 */
.box2 {
width: 400px;
height: 400px;
background-color: pink;
background-image: url(./images/1.png);
background-repeat: no-repeat;
background-position: center bottom;
/* background-position: 50px -100px; */
/* background-position: 50px center; */
background-size: contain;
/* background-size: cover; */
}
/* 3. 复合属性：背景色 背景图 平铺方式 位置/缩放（不区分顺序） */
.box3 {
width: 500px;
height: 400px;
background: pink url(./images/1.png) no-repeat right center/cover;
}
/* 4. 背景图固定：背景不随内容滚动 */
body {
background-image: url(./images/bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>要点解释与易错点：
background-image的值必须写url(路径)，url不能漏；它和<img>的插入图片是两回事——背景图是在盒子底部做装饰，插入图是往盒子里装内容。background-repeat不写时默认 repeat（平铺），所以.box1会铺满整个 400×400 的盒子；不想平铺要显式写no-repeat。background-position两个值：水平 垂直。关键字取值可颠倒顺序（right center与center right等价）；只写一个关键字时另一个方向默认居中；但写数字+单位时顺序严格，第一个一定是 X（水平），第二个一定是 Y（垂直），且水平正数向右、负数向左，垂直正数向下、负数向上。background-size：cover是等比例放大到完全覆盖背景区（可能图片部分看不见），contain是等比例缩到完全装入（可能背景区部分空白）；图片比例与盒子比例相同时两者效果一样。- 复合属性
background各值用空格隔开、不区分顺序，但“位置/缩放”之间必须用斜杠/连接，写成right center/cover。 - 全屏大图常用套路：
no-repeat+background-position: center top（水平居中、垂直靠上），保证最核心区域始终在屏幕中间。
示例二：块级元素显示模式
html
<!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. 独占一行 */
/* 2. 可以设置宽度和高度 */
/* 3. 宽度默认和父亲一样宽，如果没有父亲，则和浏览器一样宽 */
.box1,
.box2 {
width: 100px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<p>abc</p>
<div class="box1">div1</div>
<div class="box2">
<p>123</p>
<p>123</p>
</div>
</body>
</html>要点解释与易错点：
- 块级元素三大特点：独占一行、宽度默认是父级的 100%（没有父级则和浏览器一样宽）、添加宽高属性生效。
- 行内元素（如
a、span）：一行可以显示多个，但设置宽高不生效，宽高由内容撑开；行内块元素（如input、img）则既一行多个、又能设置宽高。 - 转换显示模式用
display（block/inline/inline-block），重点记住把链接这类行内元素转换为块级或行内块；display: block尽量写在样式第一行。 - 易错点：块级元素可以控制里面的行内元素/行内块元素左中右对齐（
text-align），但不能控制里面的块级元素对齐。
示例三：CSS 优先级与权重叠加
html
<!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>
/* 权重：通配符 < 标签 < 类 < ID < 行内 < !important */
* {
color: green;
}
div {
color: red;
}
.blue {
color: blue;
}
#pink {
color: pink;
}
/* 加了 !important，别人都不生效 */
/* div {
color: green !important;
} */
/* ---- 权重叠加（每一级之间不进位） ---- */
li {
color: red; /* 0,0,0,1 */
}
ul li {
color: green; /* 0,0,0,2 —— 比上面高，生效 */
}
.blue {
color: blue; /* 0,0,1,0 —— 类永远大于标签 */
}
li.blue {
color: pink; /* 0,0,1,1 —— 交集，比单独 .blue 更高 */
}
</style>
</head>
<body>
<div>文字</div>
<div class="blue">文字</div>
<div id="pink">文字</div>
<div style="color: skyblue;">文字</div>
<ul>
<li>文字</li>
<li class="blue">文字</li>
</ul>
</body>
</html>要点解释与易错点：
- 基础权重口诀：通配符 < 标签 < 类 < ID < 行内，所有人都不如
!important；选择器选中的范围越大，优先级越低。 - 选择器不同时比权重，跟代码书写顺序无关（把
.blue提到最上面依然是蓝色）；只有选择器相同时才看顺序——后者覆盖前者（层叠性）。 - 权重叠加按“个数”比较：
ul li是 0,0,0,2 >li的 0,0,0,1；.blue是 0,0,1,0 永远大于任何标签累加；li.blue是 0,0,1,1，比单独的.blue高，所以粉色生效。每级之间不存在进位，10 个标签也换不来 1 个类。 - 伪类和类权重相同，都是 10（如
a:hover是 0,0,1,1），a:hover中间不能有空格，有空格就变成后代选择器了。 - 继承的权重为 0：给父级
.box写color: green改不动子级li自己的红色，因为继承过来权重是 0，而li是 1；想改谁的样式就选中谁，不要指望通过父级去改。 !important写在分号前面（color: green !important;），写完后面就再也没法覆盖它了，逼不得已才用。- 调试口诀：上看层叠（被谁划掉），下看继承（样式从哪继承来）。
常见错误
1. 背景图不显示，控制台 404 现象：写了 background-image，盒子只有背景色。 原因：路径写错（少 ./、目录名拼错）或漏写 url()。 修法：用 bgi 触发 VS Code 提示，让它自动补全 url()；路径按 HTML 文件所在位置写相对路径 url(./images/1.png)；F12 → Network 看红色请求定位错误文件名。
2. 只想放一张图，结果铺满整个盒子 现象：小图标被重复成一片。 原因：背景图默认 repeat，不是"放一张就停"。 修法：background-repeat: no-repeat;（bgr + 提示）。同理只想横向重复用 repeat-x，纵向 repeat-y。
3. background-position 的两个值理解反了 现象：想放右下角，写了 bottom right 生效；但改成 50px 100px 后位置完全不对。 原因：关键字可颠倒，但数值有严格顺序——第一个恒为水平 X，第二个恒为垂直 Y；且网页 Y 轴向下为正。 修法：数值统一按"水平 垂直"写；向上/向左用负值；只写一个数值时另一个方向默认居中。
4. 用 cover 想完整显示整张图，结果被裁掉 现象：背景图两边或上下被切。 原因：cover 优先"铺满盒子"，比例不同必然裁切；contain 才优先"完整显示"，但会留白。 修法：按需求二选一；若图片与盒子比例一致，两者效果相同，此时随便用。
5. 复合属性 background 一写，前面的设置全没了 现象：单独写的 background-position 失效。 原因：background 是复合属性，会把未写出的子属性重置为默认值，并且它写在后面就覆盖前面。 修法：复合属性写在最上面，零散属性写在它之后；或把位置和大小写成 position/size 形式一起塞进去：background: pink url(./images/1.png) no-repeat right center/cover;
6. 给 span、a 设宽高没反应 现象：宽高属性写了，元素大小仍由文字撑开。 原因：行内元素不接受宽高。 修法：display: inline-block;（可设宽高且同行显示）或 display: block;（独占一行）；display: block 习惯写在样式第一行。
7. 明明加了类名改颜色，颜色却没变 现象：F12 里样式被划掉，没有 ! 感叹号。 原因：权重不够。前面的 .nav ul li a 权重 13，后面新写的 .phone 只有 10。 修法：提高选择器权重而不是无脑上 !important，例如写成 .nav ul li a.phone（权重 21），或复用已生效选择器并加类名。不要用 !important 收尾，会导致后面再也改不动。
8. 给父级加颜色，想改子元素却没成功 现象：父级用了高权重的类选择器，子元素颜色纹丝不动。 原因：继承的权重是 0，子元素自身有声明就优先执行自己。 修法：谁要改就选中谁，把样式直接写在目标元素上，不要指望父级"传下去"。
9. Emmet 里把"类名"当成"嵌套" 现象：想写 span 里套一个 .nav，输入 span.nav 得到的是 <span class="nav"></span>。 原因：. 表示 class，> 才表示父子，空格表示后代。 修法：父子用 div>p，同级用 div+p，重复用 div*3，带内容用 div{文字}。
10. 伪类中间多敲了空格 现象：a :hover 整段样式不生效。 原因：加了空格就从伪类变成"a 的后代"，语义完全变了。 修法：a:hover 必须连着写，不留空格。
练习
1. Emmet 手写（不给提示，写完对照生成结果） 用一行缩写生成：一个 div，类名 nav，里面有 3 个 a，每个 a 的类名都是 item，内容依次为"首页""产品""关于"。
参考：
div.nav>a.item*3{首页}回车后手动改文字；或分三次a.item{首页}。
2. 背景四件套 做一个 500×400 的盒子，背景色 #eee，背景图 ./images/logo.png，要求：不重复、水平垂直居中、图片完整装入盒子且不留白。
参考：
background: #eee url(./images/logo.png) no-repeat center center/cover;（若原图比例与 500:400 不同，cover必裁切，改用contain则留白——先判断需求再选。）
3. 权重排错
css
.nav ul li a { color: red; } /* A */
a { color: green; } /* B */
.phone { color: blue; } /* C */<a class="phone">手机</a> 在 .nav > ul > li 内部，最终显示什么颜色？如果要把"手机"改成蓝色，最少改动怎么写？
参考：显示红色（A 权重 13 > C 的 10）。改成
.nav ul li a.phone { color: blue; }，权重 21。
4. 显示模式转换 三个 a 链接，要求排成一行、每个宽 120px 高 40px、文字水平垂直居中。
提示：
display: inline-block+width/height+text-align: center+line-height: 40px；并注意a:hover不要带空格。
5. 全屏大背景 给 body 加一张 1920×1100 的图，要求不重复、核心区域始终在屏幕正中、顶部空出 42px 给导航条。
参考：
background: url(./images/bg.jpg) no-repeat center 42px;或拆开写background-position: center 42px;（注意 Y 轴向下为正）。
原视频对照
| # | 视频 | 时长 |
|---|---|---|
| 1 | 优先级 | 08:24 |
| 2 | 优先级叠加 | 17:56 |
| 3 | 继承的权重为0 | 06:44 |
| 4 | emmet语法 | 02:48 |
| 5 | 上午复习 | 12:17 |
| 6 | 背景图片 | 08:16 |
| 7 | 背景位置 | 13:03 |
| 8 | 背景图片设置 | 07:55 |
小结
- 背景图三件事记牢：不重复要显式写，位置按"水平 垂直"，缩放看需求选 cover 还是 contain。
- 复合属性
background会重置所有子属性，它要么写最前，要么把全部值一次写全；位置和大小之间是斜杠/。 - 全屏大图的标准配方：
no-repeat+center水平居中 + 垂直靠上（或指定 px），核心区域永远居中，两侧被裁属于正常。 - 显示模式决定"能不能设宽高"和"占不占一行"：块级独占一行可设宽高，行内不可设宽高，行内块两者兼得；
display是三者互转的开关。 - 权重顺序：继承/通配符 0 < 标签 1 < 类、伪类 10 < ID 100 < 行内 1000 <
!important；级间不进位，复合选择器按个数累加。 - 样式被划掉先看两处：是不是权重不够（看上层层叠）、是不是继承来的（往下找继承源，继承权重恒为 0）。
- 覆盖样式的正解是提高选择器权重或直接选中目标元素，
!important是最后手段，用一次就等于给这条样式上了锁。 - Emmet 只是提速工具，
. = class、# = id、> = 父子、+ = 同级、* = 重复、{} = 内容，别把类名写成嵌套。