CSS 基础（三）

本页对应 CSS 基础，共 7 段视频，约 59 分钟。

学习目标

• 能按“倾斜、加粗、字号/行高、字体族”的顺序写出 font 复合属性，并说明字号和字体族为必写项、其余可省略。
• 能使用 text-indent: 2em 为段落设置首行缩进，并通过修改字号验证 em 随当前文字大小变化的效果。
• 能使用 text-align: center 实现盒子内文字水平居中，并能通过给图片父容器设置该属性实现图片水平居中。
• 能根据小米盒子案例完成盒子宽高、背景色、图片、标题和说明文字的 HTML/CSS 搭建，并使用浏览器调试工具核对尺寸、颜色和字体样式。
• 能使用 text-decoration 设置或去除下划线、删除线、上划线，并能完成链接去下划线、改颜色的样式调整。

知识点

字体大小 font-size

为什么需要：文字要有层级和可读性，标题、正文、说明文字通常字号不同。怎么想：先确定文字尺寸，PC端最常用 px。怎么做：给选择器写 font-size。易错点：谷歌浏览器默认字号是 16px，别把默认值误当成自己设置的值。

p {
  font-size: 30px;
}

字体样式 font-style

为什么需要：有些标签或字体默认会倾斜，需要清除倾斜；也需要主动设置斜体。怎么想：正常用 normal，倾斜用 italic。怎么做：给文字选择器设置 font-style。易错点：清除默认倾斜用 normal，不要写成“no”之类不存在的值。

行高 line-height

为什么需要：多行文本需要合适行间距，太挤难读，太散松散。怎么想：可以写“数字+px”，也可以只写数字，表示当前标签 font-size 的倍数。怎么做：按需设置像素值或倍数。易错点：数字倍数依赖当前字号；测量行高要从一行文字最顶端量到下一行文字最顶端。

line-height: 30px;

/* 当前标签字体大小为16px */
line-height: 2;

单行文字垂直居中

为什么需要：按钮、导航、单行标题常需要文字在盒子里垂直居中。怎么想：单行文字可用“行高等于盒子高度”的技巧。怎么做：让 line-height 与 height 相同。易错点：只适用于单行文字，多行文字不要硬套。

div {
  height: 100px;
  background-color: skyblue;

  /* 注意：只能是单行文字垂直居中 */
  line-height: 100px;
}

字体族 font-family

为什么需要：不同电脑字体不同，指定字体可控制显示效果。怎么想：写字体名；可写多个字体名，用逗号隔开，从左到右查找，找不到再用后面的，最后建议写无衬线字体族名。怎么做：先写具体字体，再写兜底字体。易错点：用户电脑没装该字体就不会显示；多个字体用逗号，不是空格。

font-family: 楷体;

font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;

font 复合属性

为什么需要：字号、行高、字体、倾斜、加粗分开写较啰嗦，公共文字样式可合并。怎么想：按固定顺序写：是否倾斜、是否加粗、字号/行高、字体，值之间用空格隔开。怎么做：例如 font: italic 700 30px/2 楷体;。易错点：顺序不能颠倒；字号和字体必须写，否则 font 不生效；复合属性用空格隔开。

div {
  font: italic 700 30px/2 楷体;
}

文本缩进 text-indent

为什么需要：中文段落常需要首行缩进两个字，不能用空格硬敲。怎么想：可用 px，也推荐 em，1em = 当前标签的字号大小。怎么做：首行缩进两个字写 2em。易错点：em 是相对当前字号变化的，不要误以为固定像素。

p {
  text-indent: 2em;
}

文本对齐 text-align

为什么需要：控制内容水平对齐，如左对齐、右对齐、居中。怎么想：它控制的是“内容”的对齐方式，属性要设置给内容的父级。怎么做：给盒子写 text-align: center;。易错点：图片不能直接写 text-align 居中，应给图片外套一个父级盒子，再给父级设置。

text-align: center;

<style>
  div {
    text-align: center;
  }
</style>

<div>
  <img src="./images/1.jpg" alt="">
</div>

文本修饰线 text-decoration

为什么需要：给文字加下划线、删除线等，或去掉链接默认下划线。怎么想：常用 none 去掉线，underline 加下划线；还有上划线、贯穿线等。怎么做：链接默认蓝色且带下划线，可用 text-decoration: none; 去掉。易错点：不要把 text-decoration 拼成“direction”；链接去下划线后仍是链接，颜色可用 color 另设。

color 文字颜色

为什么需要：文字颜色用于区分层级、表达状态和品牌色。怎么想：只要属性值是颜色，都可使用笔记图中的颜色表示方式，例如文字颜色、背景色。怎么做：给文字选择器设置 color。易错点：颜色值不要靠背，实际开发常借助工具或设计稿复制；注意属性名是 color。

一、调试工具到底解决什么问题

为什么需要：页面写完后，经常出现“字没居中、颜色不对、盒子大小不对、字体没生效”等问题。只靠猜和反复改代码效率很低。调试工具的作用就是检查、调试代码，帮助程序员发现代码问题、解决问题。

怎么想：把调试工具当成“现场观察器”。先看页面结构，找到出问题的标签；再看它身上的样式、尺寸、颜色；最后回到编辑器改代码，再刷新验证。

怎么做：页面效果不对时，先打开调试工具，定位到目标元素，观察它的结构和样式，再对照自己的代码修改。课堂转写稿里做小米盒子时，并不是凭感觉写 234 和 300，而是右键检查选中盒子，在调试工具里读到宽 234、高 300，再回去写宽高；做标题时读到字号 14，做段落时读到颜色 B0B0B0，做价格时读到 FF6700。这就是“先读数据，再写代码”的调试过程。

易错点：不要把“查看网页源代码”当成调试工具；调试工具里临时改样式只是预览，刷新后会还原；不要只盯结果，要对照元素和样式找原因。

二、打开调试工具：右键检查与 F12

为什么需要：不打开调试工具，就无法检查元素、查看样式和定位问题。

怎么想：打开方式有两种：右键更精准，适合先选中目标标签；F12 更快，适合直接打开工具再找元素。

怎么做：在浏览器窗口内任意位置，或先选中标签，鼠标右键→检查；也可以直接按 F12。转写稿中多次出现“右击选择检查”“打开它”，就是实际中用右键检查来查看页面元素和样式的实际操作。

易错点：右键菜单要选“检查/检查元素”，不是“查看网页源代码”；部分笔记本的 F12 需要配合 Fn 使用；先选中标签再右键，通常更容易定位到目标元素。

三、使用调试工具：定位元素、读样式、量尺寸

为什么需要：写 CSS 时常要确认字体、字号、行高、颜色、盒子宽高。靠肉眼估容易错，调试工具能直接读出页面当前值。

怎么想：先定位元素，再读数据，最后改代码复验。转写稿里查看 body 的字体时，看到 font-family 后面是一串字体，执行时从左到右查找；查看盒子时读宽高；查看标题、段落、span 时读字号和颜色。这里要纠正转写稿里的同音字：font-family、font-size、font-weight、line-height、text-align、text-decoration，不是“房 family”“test align”“test direction”。

怎么做：打开调试工具后选中目标标签，查看其结构和样式；需要尺寸就选盒子读宽高；需要颜色、字号就读对应值；改完编辑器保存，再回浏览器刷新观察。

易错点：读到的尺寸、字号要带单位；颜色抄写别漏 #；字体列表通常用逗号分隔，复合属性用空格；调试工具里的临时修改不会自动写回源码；图片要水平居中时，转写稿强调是给图片的父盒子加 text-align: center，不是直接给图片加。

四、把调试流程固定下来

为什么需要：形成稳定流程，才能快速发现问题，而不是盲目改代码。

怎么想：复现问题→打开调试工具→定位元素→读结构和样式→回编辑器改→刷新验证。

怎么做：先右键检查或按 F12，选中出问题的元素，读出关键值，再回到代码中修改，最后刷新确认。转写稿中小米盒子的做法就是先画盒子、再装图片和文字，每一步都通过检查看效果，再决定下一步写什么。

易错点：不要背数值，数值应从调试工具中读；不要改完不刷新；不要把调试工具里的临时预览当成最终代码。

代码示例

示例 1：font 复合属性 + 字体族 + 单行文字垂直居中

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>font 复合属性</title>
  <style>
    /* 顺序：是否倾斜 是否加粗 字号/行高 字体，空格隔开 */
    .box1 {
      font: normal 700 18px/30px 楷体;
    }

    /* 复合属性可以只写必须的两项：字号 + 字体族 */
    .box2 {
      font: 20px "Microsoft YaHei";
    }

    /* 网页公共字体设置：多个字体名用逗号隔开，从左到右依次查找 */
    .box3 {
      font-family: Microsoft YaHei, Heiti SC, tahoma, arial,
                   Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    }

    /* 单行文字垂直居中：行高 = 盒子高度 */
    .box4 {
      height: 100px;
      background-color: skyblue;
      line-height: 100px;   /* 只能是单行文字垂直居中 */
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box1">font: normal 700 18px/30px 楷体</div>
  <div class="box2">只写字号和字体族也能生效</div>
  <div class="box3">font-family 多字体依次查找</div>
  <div class="box4">单行文字垂直居中</div>
</body>
</html>

关键行与易错点

• font: normal 700 18px/30px 楷体; 是复合（简写）写法，顺序必须是“是否倾斜 → 是否加粗 → 字号/行高 → 字体”，颠倒顺序整条样式失效。
• 复合属性里字号和字体族是必须写的，只写其中之一（比如 font: 18px;）整条 font 都不生效；其余值可以省略。
• 行高跟在字号后面，用 / 连接：18px/30px；行高也可以写倍数，如 line-height: 2，表示当前 font-size 的 2 倍。
• line-height: 100px 等于 height: 100px 才能让单行文字垂直居中，多行文字不适用。
• font-family 多个字体名用逗号隔开（复合属性里用空格隔开，两者不要混）；"\5B8B\4F53" 是宋体的 unicode 写法，实际开发直接复制即可，不用背。

---

示例 2：文本缩进 + 水平居中（文字 / 图片）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>缩进与对齐</title>
  <style>
    /* 首行缩进两个字：1em = 当前标签的字号大小 */
    p {
      font-size: 16px;
      text-indent: 2em;
    }

    /* 文字水平 + 垂直居中 */
    .box {
      width: 100%;
      height: 40px;
      background-color: #333;
      color: #fff;
      line-height: 40px;    /* 垂直居中：行高 = 高 */
      text-align: center;   /* 水平居中：写给内容的父级 */
    }

    /* 图片居中：不能直接给 img 写 text-align，要给它的父级写 */
    .cat {
      text-align: center;
    }

    /* 这里用色块代替图片；实际开发中换成 <img src="...">，img 本身是行内元素 */
    .pic {
      display: inline-block;
      width: 120px;
      height: 120px;
      background-color: skyblue;
    }
  </style>
</head>
<body>
  <p>首行缩进两个字：用 text-indent: 2em，不要用空格。字号改了，缩进宽度也会跟着变，因为 em 是相对单位。</p>

  <div class="box">文字水平居中 + 垂直居中</div>

  <div class="cat">
    <div class="pic"></div>
  </div>
</body>
</html>

关键行与易错点

• text-indent: 2em 中 1em = 当前标签的字号大小，所以字号变成 12px 时 2em 就是 24px，缩进始终是“两个字”的宽度，比写死 32px 更通用。
• text-align 控制的是盒子内容的水平对齐方式，属性要写在内容的父级上；直接写 p { text-align: center; } 只能让 p 里的文字居中，不能让 p 这个盒子本身居中。
• 图片想水平居中，不能给 img 加 text-align: center（不管用），要给它套一层父级 div，给父级写 text-align: center。
• 写样式的顺序建议：先写宽、高、背景色把盒子画出来，再根据看到的效果补文字颜色、对齐等属性，不要一上来背一堆属性。

---

示例 3：文本修饰线 + 文字颜色（链接去下划线）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文本修饰线</title>
  <style>
    /* 无修饰线：最常用 */
    .none {
      text-decoration: none;
    }

    /* 下划线：最常用 */
    .underline {
      text-decoration: underline;
    }

    /* 上划线 */
    .overline {
      text-decoration: overline;
    }

    /* 删除线（等价于 del / s 标签的效果） */
    .through {
      text-decoration: line-through;
    }

    /* 链接默认是蓝色 + 下划线，取消下划线并改颜色 */
    a {
      text-decoration: none;
      color: #FF6700;
    }
  </style>
</head>
<body>
  <div class="none">我是没有装饰线</div>
  <div class="underline">我是下划线</div>
  <div class="overline">我是上划线</div>
  <div class="through">我是删除线</div>

  <a href="#">百度一下，你就知道</a>
</body>
</html>

关键行与易错点

• 属性名是 text-decoration（单词较长，编辑器里输入 td 就能联想出来），取值重点记两个：none（无）和 underline（下划线）；overline 上划线、line-through 删除线了解即可。
• a 链接默认带蓝色和下划线，去掉下划线就写 text-decoration: none;，改颜色写 color: #FF6700;（小米主色）。
• 去掉下划线后链接依然可以点击，text-decoration 只影响“线”，不影响链接行为。
• 颜色值（如 #FF6700、#B0B0B0、#F5F5F5）实际开发都是工具里取色后复制过来的，不需要背。

常见错误

• font 复合属性写了但完全不生效 → 原因：顺序错、缺字号或缺字体、值之间没用空格 → 修法：按“是否倾斜 是否加粗 字号/行高 字体”检查，至少保留“字号 + 字体”，如 font: 18px/30px "Microsoft YaHei", sans-serif;
• 单行文字没有垂直居中，甚至多行文字挤在一起 → 原因：把 line-height = height 当成通用居中技巧，或高度与行高不相等 → 修法：仅对单行文字使用，确认 height 与 line-height 数值一致；多行文本改用正常行高
• 给 img 或文字本身写 text-align: center 不生效/效果不对 → 原因：text-align 控制的是容器内容的水平对齐，要设给父级 → 修法：给图片外包一层 div，对父容器设置 text-align: center
• 首行缩进不是两个字，换个字号就错位 → 原因：用固定 px 写缩进，或误以为 text-indent 控制所有行 → 修法：优先写 text-indent: 2em;，并明确它只影响首行
• font-family 写了多个字体但不生效 → 原因：本机没有该字体、多个字体没用逗号分隔、最后没写通用字体族 → 修法：按候选顺序用逗号分隔，末尾补 sans-serif，实际开发直接复制字体栈
• 链接下划线去不掉，或给父级加装饰线无效 → 原因：text-decoration 要作用在文字元素本身，a 默认有下划线 → 修法：对 a 写 text-decoration: none;，颜色用 color 单独设置
• 颜色/字号在调试工具里改了，但刷新后丢失 → 原因：调试面板修改的是临时预览，没有写回源码 → 修法：在 DevTools 中定位问题后，回到 CSS 文件落盘保存，再刷新验证

练习

1. 公共文字样式：给 body 设置字号 14px、行高 1.5、字体栈 "Microsoft YaHei", sans-serif、颜色 #333；再给所有 p 设置 text-indent: 2em;，检查不同字号下是否仍缩进两个字。
2. 单行垂直居中：做一个 height: 40px;、背景 #333、文字白色的盒子，让单行文字水平、垂直都居中；再故意把文字改成两行，观察并说明为什么该技巧不再适用。
3. 小米卡片局部：body 背景 #f5f5f5，卡片宽 234px、高 300px、白底；卡片内放图片、h3、p、span，图片水平居中，h3 去加粗并改字号，p/span 改字号和颜色。
4. 找错并修正：给出含以下问题的代码——font: 700 italic 18px 楷体;、给 img 直接写 text-align:center、a 未去下划线、text-indent:20px 代替两字缩进；逐条说明现象、原因并修正。
5. 调试工具验证：用 DevTools 检查第 3 题卡片，读出图片父容器、h3、p 的实际 font-size、line-height、color，至少修正一处与目标效果不一致的样式并保存回源码。

原视频对照

#	视频	时长
1	字体复合写法	20:09
2	首行缩进	06:08
3	文字水平对齐	04:48
4	图片水平居中	05:31
5	小米盒子上	04:47
6	小米盒子下	09:37
7	文本装饰	08:01

小结

• font 复合属性是高频易错点：顺序固定，字号和字体必写，其余可省。
• 单行垂直居中只认“行高等于盒子高度”，多行文本不要硬套。
• text-align 写给容器，文字和图片都作为容器内容被居中。
• 首行缩进优先用 2em，它随当前字号变化；text-indent 只影响首行。
• font-family 是候选字体列表，从左到右匹配，末尾放通用字体族。
• 文本装饰重点掌握 none 与 underline，链接去下划线用 text-decoration: none;。
• 调试工具用于定位和验证，最终修改必须回到源码保存。
• 页面公共文字样式通常统一放在 body，便于全局字号、行高、字体和颜色初始化。