黑马前端 2024 · 教程站

主题

CSS 基础（二） ​

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

学习目标 ​

  • 能根据页面结构选用标签选择器或类选择器，为不同盒子应用样式，并通过页面效果验证选择范围差异。
  • 能使用 width、height、background-color 绘制指定尺寸和颜色的盒子，并运用 W、H、BGC 快捷写法完成编码。
  • 能使用 font-size 设置文字字号并正确添加 px 单位，将指定标题和段落调整为要求字号。
  • 能使用 font-weight 以 400/700 或 normal/bold 控制文字粗细，并验证标题取消加粗效果。
  • 能使用 line-height 设置行高，区分带单位数值与无单位倍数值，并说明无单位值相对于当前元素 font-size 的倍数关系。
  • 能通过“行高等于盒子高度”实现单行文字垂直居中，并能判断行高小于或大于盒子高度时文字分别偏上或偏下。

知识点 ​

选择器的作用 ​

选择器的核心作用是：查找标签，设置样式。页面里标签很多，如果逐个写样式，既慢又容易乱；选择器就是先“找到谁”，再“改谁”。

为什么需要： CSS 要控制页面样式，必须先定位到目标标签。
怎么想： 先判断要选“某一类同名标签”，还是“某几个特定标签”，再选择合适的选择器。
怎么做： 本节先掌握四个基础选择器：标签、类、id、通配符。
易错点： 不要一上来就背语法，要先想“我要选中的范围有多大”，范围不同，选择器不同。

标签选择器 ​

标签选择器使用标签名作为选择器，会选中页面中所有同名标签，并给它们设置相同样式。例如 p、h1、div、a、img 等。

为什么需要： 当一类标签需要统一样式时，用标签选择器最直接。
怎么想： 如果我要让所有段落文字都变红，就找 p 标签。
怎么做：

html
<style>
  p {
    color: red;
  }
</style>

易错点： 标签选择器无法差异化同名标签的显示效果。课堂画盒子演示中，两个 div 需要不同大小、不同颜色，如果都用 div 选择器，样式会变成一样，所以这时不能只用标签选择器。

类选择器 ​

类选择器用于查找标签，并差异化设置标签的显示效果。它是本节重点。

为什么需要： 同名标签也要有不同样式。比如两个 div，一个叫 box1，一个叫 box2，就不能靠标签名区分。
怎么想： 先定义类选择器 .类名，再让标签通过 class="类名" 调用。课堂中就是先判断“标签选择器会让两个盒子一样”，于是改用类选择器分别控制。
怎么做：

html
<style>
  /* 定义类选择器 */
  .red {
    color: red;
  }
</style>

<!-- 使用类选择器 -->
<div class="red">这是 div 标签</div>
<div class="red size">div 标签</div>

易错点：

  • 类名自定义，不要用纯数字或中文，尽量用英文命名。
  • 一个类选择器可以供多个标签使用。
  • 一个标签可以使用多个类名，类名之间用空格隔开。
  • 定义了类选择器，标签必须写 class 调用；课堂中样式没生效时，先检查有没有调用类名，再检查类名、颜色单词等是否拼写正确，例如 blue 不要拼错，保存后再刷新查看。
  • 开发习惯：类名见名知意，多个单词可以用 - 连接，例如 news-hd。

id选择器 ​

id 选择器也用于查找标签、差异化设置样式，但它一般配合 JavaScript 使用，很少专门用来写 CSS 样式。

为什么需要： 页面中某些元素需要唯一标识，便于脚本精确查找。
怎么想： 看到 #id名，就想到“唯一”。
怎么做：

html
<style>
  /* 定义 id 选择器 */
  #red {
    color: red;
  }
</style>

<!-- 使用 id 选择器 -->
<div id="red">这是 div 标签</div>

易错点： 规则是同一个 id 选择器在一个页面只能使用一次。不要把它当成类选择器反复复用。

通配符选择器 ​

通配符选择器用 *，用于查找页面所有标签，设置相同样式。它不需要调用，浏览器会自动查找页面所有标签。

为什么需要： 有时要统一处理所有标签，例如清除标签默认的外边距、内边距。
怎么想： 只要写 *，就代表“页面所有标签”。
怎么做：

css
* {
  color: red;
}

经验：通配符选择器可以用于清除标签的默认样式，例如标签默认的外边距、内边距。

通配符选择器清除默认样式示意

易错点： 通配符影响范围最大，不要随便用它给所有标签设置具体颜色等样式；它更适合做全局初始化。它不需要在标签上写 class 或 id 来调用。

小结 ​

选择器就是“查找标签”的工具。标签选择器适合统一同名标签；类选择器适合差异化，并且可以多标签复用、一个标签写多个类名；id 选择器页面唯一，常配合 JavaScript；通配符选择器选所有标签，常用于清除默认样式。实际写页面时，先想清楚要选中的范围，再选选择器，能少走很多弯路。

先看本节目标：把“看不见的盒子”画出来 ​

盒子尺寸与背景色示意图

为什么需要先画盒子？页面里大多数标签本质上都是四方块，布局时如果看不到它占多大位置，就很难往里放文字、图片。转写稿里用盖房子类比：先把房间大小定出来，才知道家具怎么摆。
怎么想：拿过一个盒子，先不考虑内容，先确定三件事——宽度、高度、背景色。有了背景色，盒子才会“显形”。
怎么做：以 div 为例，默认看不到形状，设置宽高和背景色后才能看到范围。
易错点：不要把它理解成“没设置就没有尺寸”，而是默认状态下看不见；宽度单词是 width，不是同音误写的 with；高度是 height；像素单位要写 px。

用类选择器区分不同盒子 ​

为什么需要：页面里有两个盒子，大小、颜色不同，如果直接用标签选择器 div，所有 div 会变成一样，无法差异化。
怎么想：标签选择器适合统一设置，类选择器适合“我想选谁就选谁”。转写稿中两个盒子分别叫 box1、box2。
怎么做：

html
<div class="box1">DIV1</div>
<div class="box2">DIV2</div>
css
.box1 {
  width: 100px;
  height: 100px;
  background-color: pink;
}

.box2 {
  width: 200px;
  height: 200px;
  background-color: skyblue;
}

易错点：类选择器 CSS 里要写点 .box1，HTML 里要写 class="box1"；只写样式不调用类，页面不会生效。转写稿里 box2 一开始没效果，就是因为类名没有正确调用。

宽高背景色的写法与快捷方式 ​

为什么需要：背景色是“显形工具”，宽高是“占位工具”。先看到盒子范围，才能往里面装内容。
怎么想：先写宽高，再写背景色；开发中可用编辑器提示提高速度。
怎么做：完整写法是 width、height、background-color。转写稿演示了快捷输入：w100 回车生成宽度，h100 回车生成高度，bgc 回车生成背景色。
易错点：background-color 不要拼错；颜色 blue 被误写成 BRUE 时不会生效；100 后不要漏 px；改完要保存并刷新。

小练习：把内容约束到 800px 的盒子里 ​

为什么需要：转写稿中的“淄博烧烤”页面内容太宽，和浏览器一样宽，不好看。原版页面实际更窄，但素材图片按 800px 处理，所以练习中先定 800px。
怎么想：不要逐个改内容，而是加一个外层盒子，把所有内容包进去，再限制外层盒子宽度。
怎么做：把原内容剪切，不要删除；外层写：

html
<div class="box">
  <!-- 原来的内容剪切到这里 -->
</div>
css
.box {
  width: 800px;
}

易错点：只写 .box { width: 800px; } 但 HTML 没调用 class="box"，不会生效；宽度不要漏单位；内容要剪切进盒子，不是直接删掉。转写稿还说明，想让盒子居中涉及盒模型，后面再讲，这里先完成宽度约束。

调试过程：从“没效果”到定位问题 ​

转写稿里的调试很典型：先发现第二个盒子没效果，检查后确认是类选择器没有在 HTML 中调用；调用后仍没效果，又发现颜色单词 blue 拼成了 BRUE；保存后效果出现。
调试顺序可以记成：先看 HTML 有没有调用类名，再看 CSS 选择器有没有写点，再看属性名和值有没有拼错，最后确认是否保存、是否刷新。
易错点：不要一没效果就重写整段代码，先按“类名—选择器—属性—拼写—保存”逐项排查。

课件图示（PPTX） ​

day03 课件图

day03 课件图

代码示例 ​

1. 选择器 + 画盒子 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>选择器与画盒子</title>
  <style>
    /* 通配符选择器：选中页面所有标签，用于清除默认样式 */
    * {
      margin: 0;
      padding: 0;
    }

    /* 标签选择器：所有 p 标签都是红色 */
    p {
      color: red;
    }

    /* 类选择器：.类名 定义，class="类名" 调用 */
    .box1 {
      width: 100px;
      height: 100px;
      background-color: pink;
    }

    .box2 {
      width: 200px;
      height: 200px;
      background-color: skyblue;
    }

    /* 定义类选择器 */
    .red {
      color: red;
    }

    /* 定义 id 选择器 */
    #red {
      color: red;
    }
  </style>
</head>
<body>
  <p>标签选择器：页面里所有 p 都会变红</p>

  <div class="box1">box1</div>
  <div class="box2">box2</div>

  <!-- 使用类选择器，一个标签可以用多个类名，空格隔开 -->
  <div class="red">这是 div 标签</div>
  <div class="red size">div 标签</div>

  <!-- 使用 id 选择器，同一个 id 一个页面只能用一次 -->
  <div id="red">这是 div 标签</div>
</body>
</html>

关键行与易错点

  • * { margin: 0; padding: 0; }：通配符选择器不需要调用，浏览器自动查找页面所有标签，常用于清除标签默认的外边距、内边距。
  • 标签选择器选中同名标签，无法差异化，所以两个盒子大小、颜色不同时必须用类选择器。
  • 类名自定义，不要用纯数字或中文，尽量用英文；多个单词用 - 连接（如 news-hd）。
  • 一个类选择器可以供多个标签使用；一个标签可以使用多个类名，类名之间用空格隔开（class="red size"）。
  • 类选择器必须调用才生效，只写 .box2 { ... } 而标签没写 class="box2" 是没有任何效果的。
  • id 选择器用 #id名 定义、id="id名" 调用，规则是同一个 id 在一个页面只能使用一次，一般配合 JavaScript 使用。
  • 画盒子口诀：拿过一个盒子先考虑宽度、高度、背景色，有了背景色才能看到盒子占了多大位置。

2. 淄博烧烤文字排版（字号 / 粗细 / 倾斜 / 行高） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文字控制</title>
  <style>
    /* 用一个盒子约束所有内容 */
    .box {
      width: 800px;
      background-color: pink;
    }

    /* 标题 38 像素，并且不加粗 */
    .title {
      font-size: 38px;
      font-weight: 400;
    }

    /* 段落 18 像素，行高 34 像素 */
    p {
      font-size: 18px;
      line-height: 34px;
    }

    /* em 默认倾斜，改为不倾斜 */
    em {
      font-style: normal;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1 class="title">淄博烧烤</h1>
    <p>淄博烧烤是淄博饮食文化的重要组成部分，最近火爆出圈。</p>
    <p><em>小饼、烤炉加蘸料</em>，是淄博烧烤的灵魂三件套。</p>
  </div>
</body>
</html>

关键行与易错点

  • width: 800px;：所有内容剪切进一个 class="box" 的 div 里，盒子定 800 像素宽，里面的内容就被约束在 800 像素内。
  • font-size: 38px;：字号必须带单位 px，不能漏。谷歌默认文字大小是 16 像素。
  • font-weight: 400;：不加粗。400 等价于 normal，700 等价于 bold，开发中提倡用数字，而且数字后面不加单位。标题默认加粗，想让标题不加粗就写 400。
  • line-height: 34px;：带单位表示固定行高 34 像素，是从上一行文字的上沿量到下一行文字的上沿。
  • line-height: 2.2;：不带单位是当前元素字号大小的倍数，18 × 2.2 ≈ 40 像素。最容易出错的是想写 34px 却写成 line-height: 34;，那就变成 34 倍，行距会大到离谱。
  • font-style: normal;：清除文字默认的倾斜效果，em 默认就是倾斜的，常用它把 em 正过来；倾斜只能取 normal / italic，无法用数字衡量。
  • 段落有很多个，用标签选择器 p 统一改；标题页面只有一个，可以直接写 h1，也可以写类名。

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

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>行高垂直居中</title>
  <style>
    .box {
      /* 拿过盒子先宽高背景色；宽度不写，就和浏览器一样宽 */
      height: 40px;
      background-color: #333;
      color: #fff;
      /* 行高 = 盒子高度，单行文字垂直居中 */
      line-height: 40px;
    }
  </style>
</head>
<body>
  <div class="box">行高等于盒子高度，文字垂直居中</div>
</body>
</html>

关键行与易错点

  • height: 40px; 与 line-height: 40px; 相等，文字才在盒子中垂直居中，这是固定写法（行高等于盒子的高度）。
  • 行高由「文字高度 + 上间距 + 下间距」组成，行高加大后上下间距把文字挤到中间，所以能实现垂直居中。
  • 三条结论要记住：行高 等于 盒子高度则垂直居中；行高 小于 盒子高度则文字偏上；行高 大于 盒子高度则文字偏下。
  • 这个技巧只适合单行文字，文字一多换行就不居中，多行文字要靠后面的方法解决。
  • 文字默认贴在盒子左上角，垂直居中不能靠某个单独的属性，只能借助行高。
  • background-color: #333;、color: #fff; 是深底白字，方便观察居中效果；垂直居中做了，水平居中这里还没讲。

常见错误 ​

  1. 多个同名标签只想改一个，却用了标签选择器
    现象：所有 p / div 一起变样式。
    原因：标签选择器会选中页面中全部同名标签。
    修法：给需要差异化的标签加 class，改用 .类名。

  2. 类选择器写了样式但不生效
    现象：CSS 里写了 .box，页面没变化。
    原因：标签没写 class="box"、类名拼写不一致，或多个类名之间没用空格。
    修法：核对“定义的点类名”和“标签 class 值”完全一致；多类名写成 class="box red"。

  3. id 在页面中重复使用
    现象：样式或后续 JS 获取元素异常、行为不稳定。
    原因：id 规则上是页面唯一标识。
    修法：样式优先用 class；id 只留给需要唯一标识的场景。

  4. 宽高、行高忘写单位
    现象：width:100 不生效；line-height:34 行距异常巨大。
    原因：宽高通常要单位；行高无单位表示“字体大小倍数”。
    修法：宽高写 100px；行高按需求写 34px 或明确倍数 2.2。

  5. font-weight 写法不规范
    现象：标题去粗失败或加粗无效。
    原因：取值、拼写或单位写错。
    修法：用 400 / 700，或 normal / bold；不要给字重加 px。

  6. 用“行高=盒子高”处理多行文字垂直居中
    现象：文字仍偏上/偏下，看起来没居中。
    原因：该技巧只适合单行文字。
    修法：单行可继续用；多行改用其他布局方式或内边距等手段处理。

练习 ​

  1. 画两个盒子
    用类选择器完成：box1 宽高 100px、粉色；box2 宽高 200px、天蓝色。
    验收：两个盒子大小、颜色不同，且都使用 class 调用。

  2. 约束淄博烧烤内容宽度
    将页面内容整体包进一个 .box 容器，设置宽度 800px。
    验收：内容被限制在 800px 宽区域内，页面不再横向铺满。

  3. 文字层级调整
    将标题设为 38px，段落设为 18px；再把标题字重改为 400 观察去粗效果，另设一个标题为 700 做对比。
    验收：字号、粗细变化正确，字重无单位。

  4. 行高与单行垂直居中
    给段落设置 line-height: 34px 或 2.2 对比效果；另做一个高 40px 的单行盒子，用行高实现垂直居中。
    验收：能说明有单位行高和无单位行高的区别；单行居中生效。

  5. 找错并修正
    给出含以下问题的代码：类名未调用、宽高忘 px、line-height:34 无单位、id 重复。
    验收：逐条指出问题并改为可正常显示。

原视频对照 ​

#视频时长
1画盒子07:30
2小练习05:03
3字号font-size02:38
4字体粗细07:24
5行高14:06
6行高垂直居中14:44
7上午小结04:34

小结 ​

  1. 选选择器前先判断：是“批量统一”还是“局部差异化”，再决定用标签、类还是 id。
  2. 盒子布局先看宽、高、背景色，再考虑往里面放内容。
  3. 正文字号与行高是高频项，字重更多用于标题去粗/加粗纠偏。
  4. line-height 有单位是长度，无单位是当前字体大小的倍数，语义不能混。
  5. “行高=盒子高”只解决单行垂直居中，多行不要硬套。
  6. 样式不生效时优先查：选择器是否匹配、类名是否调用、拼写、单位。
  7. 开发中优先用语义化 class 命名，少用 id 写样式，慎用通配符做全局设置。
  8. 调试时看浏览器计算值，比反复猜 CSS 更快。