尚硅谷前端 2023 · 教程站

主题

CSS 常用属性与CSS 选择器（Day6 1/4） ​

本页对应 Day06_CSS，共 6 段视频，约 1 小时 0 分。

学习目标 ​

  • 能复述并区分长度单位、颜色表示方式、CSS 基本选择器及权重、元素显示模式，并能用代码示例验证其效果。
  • 能使用类名选择器、字体大小和颜色属性完成 Google 字体样式案例，并解释行内元素换行被解析为空格、text-align 作用于容器内文本而非行内元素自身。
  • 能说明行高的定义，设置不同行高并观察首行、末行与元素顶部/底部距离为行高一半的现象。
  • 能利用“行高等于元素高度”实现单行文字垂直居中，并结合 text-align 实现水平垂直居中，验证无固定高度时元素会被行高撑开。
  • 能识别 line-height 是 font 复合属性的子属性，避免 font 简写覆盖行高，并能在 font 简写中用 /行高 正确书写。
  • 能设置背景颜色和背景图像，说明背景色默认 transparent、body 背景覆盖整页、背景绘制到边框下，并使用 repeat 相关值控制平铺，区分背景图与 img 标签。

知识点 ​

复习：单位、颜色、选择器与显示模式 ​

为什么需要：这些是后面写行高、背景和作业案例的基础，尤其是百分比、权重、行内元素不能设宽高，会直接影响调试判断。
怎么想：先按“单位—颜色—选择器—显示模式—字体/文本属性”的顺序回忆；遇到效果不对，先判断是选择器没选中、权重不够，还是元素显示模式限制。
怎么做：长度单位重点记像素、em、百分比；颜色可用颜色名、rgb、十六进制；选择器权重从高到低为行内样式、id、类名、标签名、通配符；行内元素不独占一行且不能直接设宽高，块级元素独占一行且可设宽高，行内块介于两者之间。
易错点：百分比宽高参照物不同，子元素百分比高度需要父元素有可参照高度；text-align:center是让元素内文本水平居中，不是让元素自己居中。

Google字体作业：类名、颜色与居中 ​

为什么需要：用彩色字母练习类名复用、颜色设置和“文本居中”的真实作用对象。
怎么想：两个G都是蓝色，就复用blue类；O、o、l等按颜色分别给red、yellow、green、grey。先给span统一字号，再按类名改颜色。
怎么做：

html
<div class="title-books">
  <span class="blue">G</span>
  <span class="red">o</span>
  <span class="yellow">o</span>
  <span class="blue">g</span>
  <span class="green">l</span>
  <span class="red">e</span>
</div>
css
.title-books span { font-size: 150px; }
.blue { color: blue; }
.red { color: red; }
.yellow { color: yellow; }
.green { color: green; }
.grey { color: grey; }
.title-books { text-align: center; }

易错点：给span设text-align:center无效，因为span是行内元素、没有可居中的宽度；应给外层块级div设置。给div设font-size:150px时，span之间的换行会被解析成空格，空格也属于div内容，会一起变大；给span设字号则不影响外面的空格。

行高：概念与调试推导 ​

为什么需要：行高控制多行文字的行间距离，也是实现单行文字垂直居中的常用手段。
怎么想：行高是上一行文字中线到下一行文字中线的距离；行距是上一行底线到下一行顶线的距离。调行高会影响行距，但行距没有单独属性。
怎么做：用line-height设置。案例中.book设宽400、高200、背景#ccc，再给.book01设line-height:20px观察；改成1em会挤，2em会拉开。调试第一行时按方向键改行高，可看到第一行文字中线到元素顶部约为行高一半；最后一行中线到元素底部也约为行高一半。
易错点：默认行高约为字号的1.2倍左右，不同浏览器略有差异；行高过小会“行挨行”，过大则间距夸张。若元素不设高度，行高会参与内容高度，把元素撑高，不要误以为文字会跑出去。

用行高实现单行文字垂直居中 ​

为什么需要：标题等只有一行文字时，常需要它在固定高度盒子中纵向居中。
怎么想：只有一行文字时，它既是第一行也是最后一行；顶部距离取行高一半，底部距离也取行高一半。若行高等于元素高度，上下各一半，文字就纵向居中。
怎么做：

css
.book02 {
  height: 250px;
  line-height: 250px;
  text-align: center;
}

易错点：前提是“只有一行文字”；多行文字仍用等于高度的行高会挤在一起。若不给元素设高度，行高会撑开元素，不能机械套“行高=高度”。

行高与font复合属性的大坑 ​

为什么需要：实际开发中font复合属性可能把前面的line-height覆盖掉，导致“行高莫名其妙失效”。
怎么想：line-height是font的子属性。按复合属性规则，font写在后面会用默认值覆盖前面的子属性，即使没显式写行高。
怎么做：可把行高写进font中，格式为字号/行高，如：

css
.books {
  font: 10px/30px "Microsoft YaHei";
}

也可单独写line-height:3;，此时3表示字号3倍；其他长度位置仍要写单位。
易错点：不要在line-height后面随手写font，否则前面的行高可能白设；这是转写稿中反复强调的“史诗巨坑”。

背景颜色与背景图像 ​

为什么需要：背景用于给元素或整页铺色、铺图，是布局和视觉基础。
怎么想：背景色用background-color；背景图用background-image:url(地址)；重复方式用background-repeat。元素默认背景色是透明transparent。给body设背景色可覆盖整个页面，这是实际开发常用做法。
怎么做：

css
body { background-color: #999; }
.book { background-color: #900; }
.book01 {
  background-image: url(美图.jpg);
  background-repeat: no-repeat;
}

背景图默认repeat，小图会横向纵向重复；repeat-x只横向，repeat-y只纵向，no-repeat不重复。大图只显示元素范围内的一角。背景色可透在背景图未覆盖区域。
易错点：背景图不是img标签：任何元素都能设背景图，背景图在文字下面、可重复，img是单标签、不能在里面写字。背景图也会显示到边框下方，虚线边框时能看到；不要把它和内容图片混为一谈。

本节回顾：长度单位、颜色、选择器、显示模式与属性 ​

本节先把前面学过的基础重新串起来。原笔记提纲如下，代码保留：

css
1. 长度单位和颜色设置方式
   长度单位： px、em、%
   颜色设置方式：颜色名、rgb()、HEX

2. CSS基本选择器
   ID选择器
   类名选择器
   标签名选择器
   全局选择器

3. 显示模式
   inline、block、inline-block
   display

4. 属性总结
   4.1 字体样式
       font-size、font-weight、font-style、font-family、font
   4.2 文字颜色
       color
   4.3 文本样式
       letter-spacing、word-spacing、text-indent、text-decoration、text-align
       vertical-align

长度单位与颜色设置 ​

为什么需要：写 CSS 时，宽高、字号、间距都离不开长度单位；文字、背景、边框也离不开颜色表示。单位选错、颜色写法不规范，后面的布局和调试就会反复出问题。

怎么想：先分清“绝对长度”和“相对长度”。px 是最常用的像素单位；em 是相对于当前字体大小的倍数；% 要看具体属性，参照物不同，结果就不同。颜色先记三种：颜色名、rgb()、HEX。rgb() 每个通道写 0–255 的数字，也可以写百分比，但日常更常见的是数字写法。HEX 本质与 RGB 一样，只是用十六进制表示。

怎么做：例如宽度常用 px，字号倍数可用 em，宽高可用百分比。百分比宽高要注意参照物：宽度通常参照父元素宽度；高度通常参照父元素高度。但父元素如果没有固定高度，子元素用百分比设高度就没有可靠参照，容易“不好使”。HEX 在满足“每组两位相同”时可以简写，如 #aabbcc 可写成 #abc。

易错点：不要把 em 当成固定像素；不要以为所有百分比都参照同一个东西；父元素高度没定，子元素百分比高度可能失效；HEX 简写不是随便删字符，必须满足每组两位相同的条件。

CSS 基本选择器与权重 ​

为什么需要：页面元素很多，必须精准选中目标元素，否则样式会乱套。选择器还关系到“谁覆盖谁”。

怎么想：四种基本选择器是 ID 选择器、类名选择器、标签名选择器、全局（通配符）选择器。权重顺序可记为：ID 最高，类名次之，标签名再次，全局最低；行内样式不写选择器，但权重比它们高。

怎么做：类名可复用，适合多个元素共用样式；ID 一般更强调唯一性；标签名选择器影响一类标签；全局选择器影响范围最大，要谨慎。实际写页面时，类名常多个单词用短横线连接，如 title-books，可读性更好。

易错点：不要只看“写得靠后”就判断覆盖关系，要先看权重；类名只是名字，不会自动带颜色或样式；行内样式权重高，调试时若发现外部样式不生效，要检查元素上是否写了行内样式。

显示模式与 display ​

为什么需要：元素默认怎样占位、能否设置宽高，直接决定布局。不理解显示模式，就会出现“宽高设了没用”“元素为什么独占一行”等问题。

怎么想：常见三种显示模式：inline 行内、block 块级、inline-block 行内块。块级独占一行，且可以设置宽高；行内不独占一行，通常不能设置宽高；行内块介于两者之间，不独占一行，但可以设置宽高。display 可以修改元素的显示模式。

怎么做：需要独占一行、能设宽高，用块级；需要跟文字排在一行，用行内；既要同行又要宽高，用行内块。遇到表格相关标签等“不典型”情况，不要硬套三种模式，因为 display 的取值远不止这三个。

易错点：给行内元素直接设宽高可能无效；display 改的是显示模式，不是元素语义；不要把“看起来像行内块”的表格标签简单归为行内块。

字体、文字颜色与文本样式 ​

为什么需要：文字是页面主要内容，字体、颜色、间距、对齐决定可读性。

怎么想：字体样式包括 font-size、font-weight、font-style、font-family 和复合属性 font。文字颜色单独用 color。文本样式是一组杂项：letter-spacing 字间距、word-spacing 词间距、text-indent 首行缩进、text-decoration 修饰线、text-align 文本在元素内水平对齐、vertical-align 设置行内或行内块与同行其他文本的对齐。

怎么做：font-family 可写单个字体，也可写字体列表。font 复合属性最少要写字体大小和字体家族，顺序不能乱；粗体、斜体可写在字体大小前面，二者顺序无所谓。复合属性与子属性混用时，若复合属性写在子属性后面，可能用默认值覆盖前面的子属性；反过来，子属性写在复合属性后面，会覆盖复合属性中对应部分。

易错点：text-align 不是让元素自身居中，而是让元素里的文本内容在元素内居中；给行内元素设 text-align: center 不会让这个行内元素自己跑到父元素中间。vertical-align 也不是“内容纵向居中”的万能属性，它主要作用于行内或行内块，并且要直接设在行内/行内块本身；只有 td、th 等单元格场景才有特殊的纵向对齐表现，其他元素不要想当然。

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

课堂画面 6

代码示例 ​

示例一：Google 字体颜色案例（类名选择器 + text-align） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Google 字体</title>
    <style>
        /* 统一给 span 设置字号 */
        span {
            font-size: 150px;
        }

        /* 横向居中：给父元素 div 设置，而不是给 span */
        .title-books {
            text-align: center;
        }

        /* 类名只是标记，叫 blue 不代表一定是蓝色，必须靠 color 赋色 */
        .blue   { color: blue; }
        .red    { color: red; }
        .yellow { color: yellow; }
        .green  { color: green; }
    </style>
</head>
<body>
    <div class="title-books">
        <span class="blue">G</span>
        <span class="blue">o</span>
        <span class="red">o</span>
        <span class="yellow">g</span>
        <span class="blue">l</span>
        <span class="green">e</span>
    </div>
</body>
</html>

关键行与易错点

  • span { font-size: 150px; }：把字号写在标签选择器上，六个字母统一放大，比给每个类名重复写更省事。
  • 类名 blue / red / yellow / green 只是“名字”，转写稿强调“这只是个类名而已，并不是说设置了就是蓝了”，真正生效靠 color。
  • text-align: center 写在 .title-books（块级 div）上才有效；给 span 设置 text-align 没有效果，因为 text-align 控制的是“元素内部文本的水平对齐”，而 span 是行内元素、没有宽度可言。
  • div 不设宽度时默认与父元素（body/html）同宽，所以给 div 居中即可让整行字母在页面中居中。
  • 易错点：若把 font-size: 150px 写在 div 上，字母之间的空格（换行被解析成的空格）也会被放大，间距变大；写在 span 上则空格保持默认大小。这是因为“只有行内元素之间的换行才会被解析成空格”。

示例二：行高 line-height（单行文字垂直居中 + font 覆盖坑） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>行高</title>
    <style>
        /* 演示：行高影响行间距，第一行和最后一行各占行高的一半 */
        .book01 {
            width: 400px;
            height: 200px;
            background-color: #ccc;
            line-height: 20px;
        }

        /* 单行文字垂直居中：行高 = 高度 */
        .book02 {
            width: 400px;
            height: 250px;
            line-height: 250px;   /* 与 height 一致 */
            text-align: center;   /* 横向居中 */
            background-color: #ccc;
        }

        /* 不设高度：元素被内容（行高）撑开 */
        .book03 {
            width: 400px;
            line-height: 200px;
            background-color: #ccc;
        }

        /* 易错点演示：font 复合属性写在 line-height 后面会覆盖行高 */
        .book04 {
            width: 600px;
            background-color: #ccc;
            line-height: 40px;
            font: 10px "Microsoft YaHei";  /* 行高被重置为默认值 */
        }

        /* 正确写法：行高写进 font 复合属性中，用斜杠分隔 */
        .book05 {
            width: 600px;
            background-color: #ccc;
            font: 10px/30px "Microsoft YaHei";
        }
    </style>
</head>
<body>
    <div class="book01">这是一段比较长的文字，用来观察行高对行间距的影响，第一行与元素顶部的距离是行高的一半，最后一行同理。</div>
    <div class="book02">一行文字</div>
    <div class="book03">不设高度时，元素高度会被行高撑开</div>
    <div class="book04">font 写在 line-height 后面，行高失效</div>
    <div class="book05">行高写进 font 复合属性，生效</div>
</body>
</html>

关键行与易错点

  • 行高定义：上一行文字中线到下一行文字中线的距离。第一行没有上一行，它与元素顶部的距离取行高的一半；最后一行与元素底部的距离同样取行高的一半。
  • .book02 实现单行文字垂直居中的条件是：只有一行文字 + line-height 与 height 相等（250/250），上下各 125px，正好居中。多行文字就失效，行与行之间会被撑成 250px。
  • .book03 不设 height 时，元素高度由内容撑开，行高也属于内容的一部分，元素会被撑到 200px 左右，文字不会“跑出去”。
  • 大坑：line-height 是 font 复合属性的子属性。复合属性写在子属性后面，会用默认值覆盖前面的子属性——即使 font 里没写行高，行高也会被重置。转写稿称其为“史诗巨坑”。
  • 正确写法是 font: 10px/30px "Microsoft YaHei";，行高用斜杠写在字号后面；顺序不能改，粗体/斜体必须写在字号前面。
  • 补充：line-height 直接写数字（如 line-height: 3）等价于 3em，即字号的 3 倍；写成百分比则与 em 效果相同，参照的是字体大小。

示例三：背景颜色与背景图像 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>背景颜色与背景图像</title>
    <style>
        /* 给 body 设背景色 = 给整个页面设背景色 */
        body {
            background-color: #999;
        }

        .box {
            width: 600px;
            height: 300px;
            padding: 20px;
            margin: 20px;
            border: 10px dashed red;   /* 虚线便于观察背景是否延伸到边框下 */
            background-color: #900;    /* 背景色会铺满边框、内边距、内容区 */
        }

        /* 小图：默认 repeat，横向纵向都平铺 */
        .books01 {
            background-image: url(meinv.jpg);
            background-repeat: repeat-x;  /* 只横向重复 */
        }

        /* 大图：超出元素的部分不显示 */
        .books02 {
            background-image: url(BG4.jpg);
            background-repeat: no-repeat; /* 最常用：不重复 */
        }

        /* 背景图不重复时，露出的区域能看到背景色 */
        .books03 {
            background-image: url(meinv.jpg);
            background-repeat: no-repeat;
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="box books01">背景图横向重复</div>
    <div class="box books02">大背景图只显示一部分</div>
    <div class="box books03">不重复 + 背景色</div>
</body>
</html>

关键行与易错点

  • background-color 的属性值就是三种颜色设置方式（颜色名、rgb()、HEX），它只影响背景，不影响文字颜色。
  • 元素默认背景色是 transparent（透明），页面上看到的“白色”其实是 html/body 的底色透出来的。
  • 给 body 设背景色就相当于给整个页面设背景色，因为没有任何选择器能直接选中“整个页面”，这是实际开发中的常用做法。
  • 背景色会铺满边框区域、内边距区域和内容区域；把边框改成虚线就能看到边框下面也是背景色。
  • background-image: url(路径) 中写相对路径，地址可加引号也可不加；背景图小于元素时默认 repeat 双向平铺，repeat-x 横向、repeat-y 纵向、no-repeat 不重复（最常用）。
  • 背景图大于元素时只显示一部分，超出部分被裁掉。
  • 背景图与 <img> 标签本质不同：任何元素都能加背景图，背景图可以平铺、位于文字下层；img 是单标签、里面不能写字。当图片需要作为“衬底”且上面还有文字时，用背景图。
  • 易错点：图片路径写错时不报错，只是不显示；若背景图重复铺满，背景色就被完全遮住看不见了。

常见错误 ​

1. 行高写了却不生效

  • 现象：明明写了 line-height: 40px，页面上的行距还是默认值，怎么刷新都没变化。
  • 原因：line-height 是 font 的子属性，代码里 line-height 写在了 font 前面，后面的 font 复合属性用默认值把它整体覆盖掉了。
  • 修法：把 font 提到 line-height 之前；或者干脆合并写进复合属性：font: 16px/40px "Microsoft YaHei";（行高紧跟在字号后面，用斜杠分隔）。

2. 给行内元素设 text-align: center 想让自己居中

  • 现象：给 span、a 设 text-align: center，元素纹丝不动，位置没有任何变化。
  • 原因：text-align 控制的是"元素内部文本在元素里如何水平排列"，而行内元素没有宽度，内部只有一个字，谈不上居中；它从来不是"元素自身居中"。
  • 修法：把 text-align: center 设在行内元素的块级父元素上（如外层 div），由父元素统一排列其内部的行内内容。

3. 子元素用百分比设高度没反应

  • 现象：height: 50% 写上去，子元素高度毫无变化，或者塌成 0。
  • 原因：百分比高度参照父元素高度，而父元素默认没有固定高度、是被内容撑开的，参照物不存在。
  • 修法：先给父元素一个确定高度，或改用 px / em 等绝对参照的单位；宽度百分比不受此限（参照父元素宽度）。

4. 用行高给多行文字做垂直居中

  • 现象：给一个装了好几行字的容器设 line-height 等于容器高度，文字整体偏下甚至溢出容器。
  • 原因：行高居中的原理是"第一行中线距顶部取行高一半、最后一行中线距底部取行高一半"，只有当元素内只有一行文字时，它才既是第一行又是最后一行，上下各一半刚好抵消；多行时每一行都撑满行高，必然溢出。
  • 修法：单行标题类文本才用这招；多行文本改用 padding 或后续的布局方案。

5. vertical-align 设了没用

  • 现象：想让某个行内块和旁边的文字对齐，把 vertical-align 加在了它的父元素上，完全无效。
  • 原因：该属性只对行内 / 行内块元素自身生效，且必须直接写在目标元素上；除 td / th 外，它不具备"让内容纵向对齐"的能力。
  • 修法：把 vertical-align 直接写到那个行内或行内块元素本身；要纵向排列内容请用行高或其他方案。

6. 背景图设置 no-repeat 后边框上的图案消失了

  • 现象：背景图默认 repeat 时，边框区域也能看到图案；一改成 no-repeat，左边框那块突然空了。
  • 原因：背景是从边框区域开始铺的（背景绘制范围包含边框），重复时图案溢到边框上，不重复时该区域就没内容了。
  • 修法：这是正常表现，实际布局中边框多为实线所以看不出来；确需控制绘制范围时，用背景裁剪相关属性（盒子模型讲完后处理）。

7. 把内容图片做成背景图

  • 现象：用 background-image 放商品图 / 头像，结果图片无法右键保存、不能被选中、上面还得另叠文字，越写越别扭。
  • 原因：背景图属于 CSS 装饰层，img 属于 HTML 内容层，二者本质不同：背景可给任意元素加、可重复、可垫在文字下面，但没有 alt、不可交互。
  • 修法：承载信息、需要被检索或交互的图用 img；纯装饰、需要垫在内容下面的图才用 background-image。

8. 以为元素默认背景是白色

  • 现象：把一个 div 放到灰色背景的父元素里，不设背景色，它显示为灰色，与"默认白色"的预期不符。
  • 原因：元素默认背景色是 transparent（透明），之前看到的白是因为底下就是白色页面。
  • 修法：需要白色就显式写 background-color: #fff；想利用父级颜色透出就保持 transparent。

练习 ​

1. 行高覆盖排查 给出下面代码，页面行距始终是默认值。请指出问题所在，并写出两种修复写法（一种调顺序、一种用复合属性）。

css
.box {
  line-height: 40px;
  font: 16px "Microsoft YaHei";
  width: 600px;
}

2. 单行垂直 + 水平居中 写一个高 60px、宽 300px、背景 #eee 的 div，里面只有一行文字，要求文字在容器内上下左右都居中。请说明为什么这两个属性分别起作用的原理不同（一个作用于行盒、一个作用于内容）。

3. 颜色简写判断 下列十六进制值哪些可以简写成三位？写出简写结果；不能简写的说明原因。 #aabbcc、#ff0000、#123456、#00ff88、#336699

4. 背景图组合 给 .banner（600×300，红色实线边框）设置 bg.jpg 作为背景，要求：图片不重复、铺在文字下方、未覆盖区域显示浅灰底色。请写出完整的 background-* 声明，并说明如果把 no-repeat 改成 repeat-x 会看到什么差异。

5. 行高 vs 高度 有一个 div 没有设置 height，只写了 line-height: 200px，里面一行文字。请预测渲染结果（元素高度是多少、文字位置在哪），并解释"为什么文字没有跑到元素外面去"。再回答：如果里面写两行文字，结果会怎样变化？

原视频对照 ​

#视频时长
1回顾08:10
2google字体设置08:14
3行高16:23
4行高和font07:04
5背景颜色08:00
6背景图像12:21

小结 ​

  1. 复合属性与子属性的书写顺序是硬规则：子属性在前会被后面的复合属性整体覆盖（包括未显式赋值的部分），所以 line-height 不能写在 font 后面，这是最容易被"看起来无关"的属性坑到的地方。
  2. 行高是"线对线"的距离，不是行距：行距是上一行底线到下一行顶线，行高是中线到中线；页面里只能调行高，行距会随之被动变化，两者不要混为一谈。
  3. 行高影响首尾两行：第一行中线距元素顶部、最后一行中线距元素底部，都取行高的一半；这正是"单行文字 + 行高=高度"能实现垂直居中的全部原理，也决定了它只适用于单行场景。
  4. 行高不设高度也能撑开元素：行高属于内容的一部分，会参与把元素撑高；想要居中时设 line-height 与 height 相等即可，忘了写 height 时元素会跟着行高走，同样居中。
  5. text-align 管内部横向，vertical-align 管行内元素自身对齐：前者写在容器上，后者必须写在目标行内/行内块本身，且除单元格外的元素不具备"内容纵向居中"能力——这两个属性的定位一旦记反，会反复踩坑。
  6. 背景色默认透明、可铺满整个绘制区域：元素背景从边框区域就开始绘制，body 的背景会传播到整个画布，所以"给整页设背景"的正确做法就是设 body。
  7. 背景图与 img 分工明确：背景图是装饰层，可给任意元素添加、可重复、可垫在文字下；img 是内容层，可交互、有语义。选错载体，后面越写越别扭。
  8. 百分比、em、无单位数值的参照物各不相同：百分比高度依赖父元素固定高度，em 依赖字号，line-height 的无单位数值等价于字号倍数——遇到"没生效"，先问一句"参照物存在吗"。