尚硅谷前端 2023 · 教程站

主题

CSS 长度单位和颜色设置与CSS 基本选择器（Day5 3/4） ​

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

学习目标 ​

  1. 能使用浏览器开发者工具查看元素默认 display 值，并按“是否独占一行、能否设置宽高”区分块级、行内、行内块元素，说明 br、表格相关标签等存在争议的归类。
  2. 能编写 CSS 分别设置 font-size、font-weight、font-style，并解释 font-weight 的 normal、lighter、bold 与 100–900 数值的对应关系。
  3. 能为元素设置 font-family 字体列表，按优先级回退，并对含空格的字体名使用引号包裹。
  4. 能使用 font 复合属性同时设置字体样式，指出最少必须包含 font-size 和 font-family，并按规则安排 font-style、font-weight 等值。
  5. 能分析 font 复合属性与子属性的覆盖关系：子属性写在复合属性前会失效，写在复合属性后只覆盖对应样式。
  6. 能根据给定需求选择使用子属性或 font 复合属性完成字体样式设置，并通过浏览器开发者工具验证最终计算样式。

知识点 ​

说明：本节转写稿实际围绕“元素默认显示模式”和“字体样式”展开，并未讲CSS基本选择器。以下严格按转写稿整理，不补写选择器内容；材料中没有配图，保留可还原的代码片段。

先看元素默认显示模式：为什么需要 ​

写页面时，很多“布局达不到预期”的原因，不是宽高写错，而是没弄清元素默认是块级、行内还是行内块。为什么需要：同样设置宽高，div 与 span 表现不同；input 能设宽高，普通行内元素却不行。怎么想：先用“是否独占一行”区分块级与非块级；不能独占一行的，再看“能否设置宽高”区分 inline 与 inline-block。怎么做：在浏览器开发者工具中选中元素，看计算样式里的 display。转写稿中的推导是：span 是标准行内；div、p 自带 display:block；input 自带 display:inline-block。易错点：不要把“浏览器调试工具显示”当成W3C最终标准；br、表格结构标签、option 等存在争议，不必死抠分类。

用调试工具看display：怎么想与怎么做 ​

为什么需要：默认样式是浏览器“与生俱来”的样式，不是我们写的。怎么想：先看元素有没有显式 display，再结合它是否独占一行判断。怎么做：打开开发者工具，选中元素查看样式面板。转写稿中看到：div、p 显示 display:block；input 显示 inline-block；表格相关标签更特殊，table、thead、tbody、tr、td 的 display 值各不相同。可还原的关键代码如下：

html
<div>块级元素</div>
<p>段落也是块级</p>
<span>行内元素</span>
<input type="text">
css
div { display: block; }
span { display: inline; }
input { display: inline-block; }

易错点：br 虽能换行，但转写稿更倾向于把它看作行内；表格结构标签能“独占一行”却不等于普通块级，thead、tbody、tfoot 设宽高往往无效，tr 的宽也要跟 table 保持一致。争议标签不必强行归类。

字体大小、粗细、斜体：为什么需要 ​

为什么需要：文字样式首先影响可读性和层级。怎么想：字体属性都带 font- 前缀，先掌握子属性，再学复合属性。怎么做：font-size 写长度；font-weight 用 normal、bold、lighter 或100—900；font-style 用 normal、italic。转写稿的调试过程是：给 span 设 font-weight:bold 变粗；设 lighter 视觉变细；动态改100—900，观察到100—300偏细、400—500正常、600以上加粗。strong 默认加粗、em 默认斜体，但都可用CSS改回 normal。示例：

css
.item01 { font-weight: bold; }
.item02 { font-weight: lighter; }
.item03 { font-weight: 800; }
.books01 { font-style: italic; }
strong { font-weight: normal; }
em { font-style: normal; }

易错点：bolder 对多数中文字体效果不明显；italic 使用字体设计好的斜体，oblique 是强制倾斜，实际更常用 italic；不要以为 strong、em 的粗斜体不能改。

字体族与字体列表：为什么需要 ​

为什么需要：网页最终在用户电脑上打开，CSS写的字体必须用户电脑已安装才生效。怎么想：不能保证用户有什么字体，就按顺序列一个“字体列表”，从左到右找第一个可用字体。怎么做：font-family 写字体名称；名称中有空格时建议加引号，如 "Microsoft YaHei"；最后可写 sans-serif 这类大类。转写稿中百度、网易新闻的样式就是字体列表写法。示例：

css
p {
  font-family: "Microsoft YaHei", 微软雅黑, 黑体, sans-serif;
}

易错点：字体名称写错、写了用户没装的特殊字体，都会回退；sans-serif 不是具体字体，而是非衬线大类；衬线字体笔画粗细不一致，如宋体，非衬线更方正，如微软雅黑、黑体。正式项目不要滥用特殊字体。

font复合属性与覆盖规则：为什么需要 ​

为什么需要：font 能一次设置多个字体样式，但规则最烦。怎么想：font 最少写“字体大小”和“字体族”两个值，否则无效。怎么做：转写稿中只写 font:20px 时，浏览器给属性值加删除线并警告无效；写成 font:20px 宋体 才生效。若要加粗或斜体，需把 bold、italic 写在大小和字体族前面：

css
.book {
  font: italic bold 20px "Microsoft YaHei", 微软雅黑;
}

易错点：复合属性写在子属性后面，会让前面的子属性全部失效；即使复合属性没写对应值，也会用默认值覆盖。子属性写在复合属性后面，则只覆盖对应项。例如先写 font-size:12px; font-weight:bold; font-style:italic;，再写 font:20px 微软雅黑;，前面的粗和斜会被默认值覆盖；反过来先写复合属性，再写 font-style:normal;，只会取消斜体，粗细仍保留。实际开发中，很多人宁愿分别写 font-size、font-weight、font-family，因为 font 规则太多、容易出错。

说明：本节原始笔记未提供图片，以下不插入图片，只保留转写稿中的代码与调试过程，并把同音字统一为正确术语。

一、先分清显示模式：看是否独占一行 ​

为什么需要：布局达不到预期，很多时候不是宽高写错，而是元素的默认显示模式没弄清。div、p 能独占一行，span、a 通常不能，input 又能设宽高但不独占一行，这些差异会直接影响排版。

怎么想：先按“是否独占一行”分块级与非块级；不能独占一行的，再按“能否设置宽高”分 inline 与 inline-block。转写稿里强调，最稳的推导方式是打开调试工具看元素的 display：div、p 显示 display: block；span 作为标准行内元素，调试工具里往往不额外显示 display；input 自带 display: inline-block。table 相关更特殊：table 是 table，thead 是 table-header-group，tr 是 table-row，td 是 table-cell，不能简单全归为 block。

怎么做：典型块级可记 div、p、h1~h6、pre、ul、ol、li、form 等；典型行内可记 span、a、em、strong、sub、sup、label 等；典型行内块可记 input、textarea、select、iframe 等。br、option、表格内部元素存在争议，转写稿的态度是：不必死抠，结合语义和实际效果理解即可。

易错点：不要把“能换行”直接等同于“块级”；br 有争议，option 也有争议，表格内部元素更特殊。调试工具只是浏览器按自身标准渲染的结果，最终解释权在 W3C，但日常开发以实际效果为准。

二、字体大小、粗细与斜体 ​

为什么需要：文字是页面主要内容，font-size、font-weight、font-style 是最常用的字体属性。它们都作用在元素上，影响元素里的文字。

怎么想：font-size 写长度，如像素、em、百分比；font-weight 管粗细，默认 normal，可写 bold、lighter 或 100~900；font-style 管斜体，默认 normal，常用 italic，oblique 是强制倾斜。转写稿通过调试工具动态改 font-weight：100~300 偏细，400~500 接近正常，600 以上为粗；但实际字体往往只提供正常、粗、细几种状态，数字是理想化预留。

怎么做：

css
.box {
  font-size: 20px;
  font-weight: bold;   /* 或 600/700/800 */
  font-style: italic;
}

strong 默认加粗、em 默认斜体，但都能用 CSS 改回 normal。

易错点：font-weight: 900 不一定比 bold 更粗，受字体本身限制；lighter 的视觉效果有时像颜色变淡；斜体优先用 italic，oblique 是强制倾斜，效果未必好。

三、font-family 与字体列表 ​

为什么需要：网页最终在用户电脑上打开，CSS 里写的字体必须是用户电脑已安装的字体；否则浏览器会回退。转写稿提到，font-family 可写多个字体，形成“字体列表”，按顺序使用：第一个有就用，没有就看第二个，最后常写 sans-serif 或 serif 兜底。

怎么想：字体名称可用中文名或英文名；名称中带空格时建议加引号，如 "Microsoft YaHei"；不带空格可不加。字体列表用逗号分隔，空格不是分隔字体列表的。衬线字体笔画粗细不一致，如宋体、仿宋、楷体；非衬线字体笔画粗细较一致，如微软雅黑、黑体、sans-serif。

怎么做：

css
.box {
  font-family: "Microsoft YaHei", 微软雅黑, 黑体, sans-serif;
}

易错点：不要以为设计稿用了特殊字体，用户就一定看得到；用户没装字体会回退。字体列表不要随意混搭差异过大的字体，最好先列相似字体，最后用大类兜底。

四、font 复合属性与子属性覆盖规则 ​

为什么需要：font 可一次设置多个字体样式，但规则多，容易出错。转写稿明确说：font 最少要写两个值——font-size 和 font-family，只写 font: 20px; 不生效，调试工具会提示属性值无效。

怎么想：font-style、font-weight 可写在前面，字体大小和字体族必须写在后面。例如：

css
.box {
  font: italic bold 20px "Microsoft YaHei";
}

子属性与复合属性混用时，记住两条：子属性写在复合属性后面，只覆盖复合属性中对应的样式；复合属性写在子属性后面，前面的子属性会全部失效，即使复合属性没写对应值，也会用默认值覆盖。

怎么做：

css
.item {
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
}
.item {
  font: 20px "Microsoft YaHei";
}
/* 前面的 font-size/font-weight/font-style 会失效 */

反过来：

css
.item {
  font: italic bold 20px "Microsoft YaHei";
}
.item {
  font-style: normal;
}
/* 只取消斜体，粗体和大小保留 */

易错点：font 复合属性虽然能写，但规则繁琐，实际开发中多数人更愿意分别写 font-size、font-weight、font-style、font-family。不要随便把复合属性写在子属性后面，否则前面的子属性白写。

一、元素默认显示模式：先看 display，再谈分类 ​

为什么需要：布局达不到预期，常见原因就是没弄清元素默认是块级、行内还是行内块。怎么想：先判断是否独占一行；不能独占一行的，再看能否设置宽高，区分 inline 与 inline-block。怎么做：用开发者工具选中元素，看它自带的 display。div、p 通常是 block；span、a 默认不额外显示 display，可理解为行内；input 常显示 inline-block。表格要单独看：thead 是 table-header-group，tr 是 table-row，td/th 是 table-cell，并不是普通 block。易错点：br、option、表格结构标签存在争议，不必死记；工具显示只是浏览器呈现，最终解释权仍在标准。争议标签不影响使用就先放一边。

html
<div class="books">
  <span class="item01">文字</span>
  <p class="item">段落</p>
</div>
css
.books { width: 400px; }
.item01 { font-size: 20px; }

二、字体大小、粗细与斜体 ​

为什么需要：文字是页面信息的主体，字号、粗细、斜体直接影响层级和可读性。怎么想：font-size 控制大小；font-weight 控制粗细；font-style 控制斜体。怎么做：字号可写 px、em、百分比；粗细可写 normal、bold、lighter、100–900；斜体常用 italic，oblique 是强制倾斜。调试时可把 font-weight 从 100 改到 900，观察 100–300 偏细、400–500 接近正常、600 以上偏粗。strong 默认加粗、em 默认斜体，都可以用 CSS 改回 normal。易错点：字体本身未必提供 9 种粗细，数字是理想设计；italic 依赖字体设计，oblique 效果不一定好，实际更常用 italic。

css
.item01 {
  font-size: 20px;
  font-weight: 700;
  font-style: italic;
}

三、字体族与字体列表 ​

为什么需要：不同字体形态不同，但用户电脑不一定安装了你指定的字体。怎么想：font-family 写字体名称，也可以写“字体列表”，按顺序回退。怎么做：字体名可加引号；名称中带空格时建议加引号，如 "Microsoft YaHei"。列表用逗号分隔，最后可写 sans-serif 或 serif 作为大类兜底。易错点：网页字体必须用户电脑上有才能生效；设计师用了特殊字体，用户没有就会回退。字体列表应尽量放相似字体，别把微软雅黑和宋体硬凑在一起。

css
.item {
  font-family: "Microsoft YaHei", 微软雅黑, 黑体, sans-serif;
}

四、font 复合属性 ​

为什么需要：font 可一次设置多个字体样式。怎么想：它最少要写两个值：font-size 和 font-family。怎么做：font-style、font-weight 写在前，font-size 和 font-family 写在后，多个值用空格分隔；字体列表内部用逗号。易错点：只写一个字号不生效；字体名带空格不加引号会被空格拆开。很多开发者嫌规则烦，宁愿分别写子属性。

css
.item {
  font: italic 700 20px "Microsoft YaHei", sans-serif;
}

五、复合属性与子属性的覆盖规则 ​

为什么需要：font 与 font-size、font-weight、font-style、font-family 是复合与子属性关系，顺序会影响结果。怎么想：子属性写在复合属性后面，只覆盖对应项；复合属性写在子属性后面，会把未写的子属性也重置为默认值。怎么做：推荐先写 font，再用子属性做局部调整。易错点：先写 font-size:12px; font-weight:bold; font-style:italic;，再写 font:20px "Microsoft YaHei";，前面的粗细和斜体会被重置。这个规则不只适用于 font，后面 background 等复合属性也同理。

css
.item01 {
  font-size: 12px;
  font-weight: bold;
  font-style: italic;
  font: 20px "Microsoft YaHei", sans-serif;
  /* 前面的粗细、斜体会被 font 重置 */
}

课堂画面 ​

课堂画面 1

课堂画面 2

课堂画面 3

课堂画面 4

课堂画面 5

代码示例 ​

代码一：字体大小、粗细、斜体 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体大小、粗细、斜体</title>
<style>
  div { width: 400px; }

  /* font-weight：默认 normal，bold 加粗，lighter 变细，100~900 数字 */
  .item01 { font-weight: bold; }
  .item02 { font-weight: lighter; }
  .item03 { font-weight: 700; }

  /* font-style：normal 正常，italic 斜体 */
  .books01 { font-style: italic; }
  .books02 { font-style: oblique; }

  /* 元素自带的默认样式，同样可以用 CSS 覆盖掉 */
  em      { font-style: normal; }               /* em 默认斜体 → 正常 */
  strong  { font-weight: normal; }              /* strong 默认加粗 → 正常 */
  h2      { font-weight: normal; font-size: 16px; } /* h2 又粗又大 → 16px 正常 */
</style>
</head>
<body>
  <div>
    <span>我是参照文字</span>
    <span class="item01">加粗 bold</span>
    <span class="item02">变细 lighter</span>
    <span class="item03">数字 700</span>
  </div>

  <div>
    <span>我是参照文字</span>
    <span class="books01">italic 斜体</span>
    <span class="books02">oblique 强制倾斜</span>
  </div>

  <p><em>em 默认斜体，这里被改成正常</em></p>
  <p><strong>strong 默认加粗，这里被改成正常</strong></p>
  <h2>h2 默认又粗又大，这里改成 16px 正常粗细</h2>
</body>
</html>

关键行与易错点

  • font-weight 取值：normal（相当于 400/500）、bold、lighter、100~900 数字。100~300 是细体，400~500 正常，600 及以上是粗体，所以写 700、800 都是加粗。
  • bolder 看着比 bold 更粗，但实际受字体本身限制（微软雅黑只提供细/正常/粗三种状态），写了也没效果，不要用。
  • font-style 只需记住两个值：normal、italic；oblique 是“强制倾斜”，不管字体有没有设计斜体都硬歪，效果不一定好，实际开发用 italic。
  • strong、em、h2 的加粗、斜体、变大，都只是浏览器自带（默认）样式，不是不可改的，用 CSS 随时能覆盖。
  • font-size 的值是长度，可以写像素、em、百分比。

代码二：字体族科 font-family 与字体列表 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>字体族科 font-family</title>
<style>
  p { font-size: 24px; }

  .books01 { font-family: "微软雅黑"; }
  .books02 { font-family: "宋体"; }
  .books03 { font-family: "楷体"; }

  /* 字体列表：按顺序找，用户电脑上有哪个就用哪个，都没有就用最后的通用字体族 */
  .books04 {
    font-family: "Microsoft YaHei", "微软雅黑", "黑体", sans-serif;
  }

  /* 错误示例：Microsoft YaHei 中间有空格，不加引号会被当成两个字体名 */
  /* .books05 { font-family: Microsoft YaHei; } */
</style>
</head>
<body>
  <p class="books01">微软雅黑 ABCDEF 123</p>
  <p class="books02">宋体 ABCDEF 123</p>
  <p class="books03">楷体 ABCDEF 123</p>
  <p class="books04">字体列表：中文 English 123</p>
</body>
</html>

关键行与易错点

  • 字体用的是用户电脑上安装的字体，不是开发者电脑上的；用户没装就直接不生效（可在 C:\Windows\Fonts 查看本机字体）。
  • 字体名称中文名、英文名都能识别，加不加引号都行；但名称中带空格的必须加引号，如 "Microsoft YaHei"，否则空格会被当成分隔符。讲师的习惯是：带空格的加引号，不带的直接写。
  • 字体列表用逗号分隔，从第一个开始找，第一个有就用、后面的不再看；都没有就落到最后的通用字体族。
  • 最后的 sans-serif（非衬线）和 serif（衬线）不是具体字体，是字体大类，电脑一定自带，用来兜底。
  • 衬线字体笔画粗细不一（宋体、楷体、仿宋），非衬线字体笔画粗细一致（微软雅黑、黑体），网页里非衬线用得更多，写字体列表时尽量放风格相近的字体。

代码三：font 复合属性与“子属性 / 复合属性”覆盖规则 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>font 复合属性与覆盖规则</title>
<style>
  /* 情况一：子属性写在前，复合属性写在后 → 前面的子属性全部失效 */
  .books {
    width: 400px;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    font: 20px "微软雅黑";  /* 即使没写粗细/斜体，也会用默认值 normal 把它们覆盖掉 */
  }

  /* 情况二：复合属性写在前，子属性写在后 → 只覆盖对应的那一项，这是合理写法 */
  .item {
    width: 400px;
    font: italic bold 20px "微软雅黑";
    font-style: normal;     /* 只把斜体改回正常，加粗和大字号保留 */
  }
</style>
</head>
<body>
  <div class="books">子属性在前：12px 加粗斜体 → 变成 20px 正常</div>
  <p class="item">复合属性在前：20px 加粗斜体 → 斜体被去掉，仍是 20px 加粗</p>
</body>
</html>

关键行与易错点

  • font 复合属性最少要写两个值：字体大小 + 字体族。只写 font: 20px; 不生效，浏览器调试工具会提示“属性值无效”。
  • 值的顺序：font-style font-weight font-size/line-height font-family。前两个（斜体、粗细）可以互换、可以省略；但字体大小和字体族必须写在最后，且必须都写。想用默认字号，也得把 16px 写出来。
  • 复合属性里字体列表用逗号分隔、各样式之间用空格分隔，所以带空格的字体名（"Microsoft YaHei"）在这里必须加引号，否则会被拆成两个值。
  • 覆盖规则一：复合属性写在子属性后面，前面的子属性全废，哪怕复合属性里没写对应的值，也会用默认值（normal）覆盖。
  • 覆盖规则二：子属性写在复合属性后面，只覆盖与它对应的那一项，其他样式保留。
  • 正因为规则繁琐，实际开发大多数人更愿意一个个写 font-size、font-weight、font-family 子属性，而不是用 font 复合属性。这条规则对后面要学的 background 等复合属性同样适用。

常见错误 ​

  1. 现象：在调试工具里没看到 display，就断言某元素一定是行内；看到表格元素 display 不是 block，又不知道该怎么归类。
    原因：调试工具展示的是浏览器自带/渲染样式，表格元素本身有特殊 display 值，争议标签不能只靠一个面板下结论。
    修法：判断布局行为看是否独占一行、能否设置宽高；争议标签不强行归类，表格系列单独看，最终以实际布局效果为准。

  2. 现象：font-family 写了 Microsoft YaHei 却不生效，或字体列表写了多个字体但浏览器没有按预期回退。
    原因：字体名中的空格被当作分隔符，字体列表之间应使用逗号而不是空格。
    修法：含空格的字体名用引号包起来；字体列表用逗号分隔，并准备常见字体和通用字体族兜底。

  3. 现象：写了 font: 20px; 没有任何效果，调试工具还提示属性值无效。
    原因：font 复合属性最少要写字体大小和字体族两个值。
    修法：补上字体族，例如 font: 20px "Microsoft YaHei";；不想记规则就直接用 font-size 等子属性。

  4. 现象：先写 font-size、font-weight、font-style，后面再写 font 复合属性，结果前面的设置全失效，没写的部分也回到默认值。
    原因：复合属性写在子属性后面时，会用自身值或默认值覆盖前面的子属性。
    修法：子属性写到复合属性后面；或者干脆统一用子属性，避免复合属性覆盖。

  5. 现象：本机设置的特殊字体效果很好，发布后用户看到的却是另一种字体。
    原因：font-family 使用的是用户电脑上已安装的字体，用户没有该字体时只能回退。
    修法：正式页面优先使用常见字体并写字体列表；特殊字体需评估兼容性，必要时改用 Web 字体方案。

  6. 现象：给 strong、em、h1 等元素设置 font-weight: normal、font-style: normal 后，以为默认加粗/斜体无法覆盖。
    原因：这些只是浏览器默认样式，CSS 可以覆盖。
    修法：明确用对应字体子属性覆盖；排查时先看计算样式和层叠来源。

  7. 现象：span 设置宽高无效，div 想和其他内容排在一行却总换行。
    原因：元素默认显示模式不同，影响了宽高和排版行为。
    修法：先确认默认显示模式，再选择合适元素或调整 display；不要拿争议标签做布局。

练习 ​

  1. 用调试工具分别查看 div、p、span、input、table、tr、td、li、option 的 display，记录结果，并标出你认为有争议的标签。
  2. 写一段中英文混排文本，设置字体列表：包含一个带空格的英文字体名、一个中文字体名，最后用通用字体族兜底；验证回退效果。
  3. 用 font 复合属性写“20px、微软雅黑、粗体、斜体”，再在后面写 font-style: normal，观察哪些样式保留、哪些被覆盖。
  4. 写一个页面：先设置 font-size、font-weight、font-style，再写 font 复合属性，记录失效项；然后把顺序调换，再对比结果。
  5. 找一个“字体在本机好看、发布后变样”或“宽高设置无效”的小案例，写出排查步骤和修复方案。

原视频对照 ​

#视频时长
1元素默认显示模式总结21:34
2字体样式-字体大小、粗细、斜体字13:47
3字体样式-字体族科18:14
4字体样式-font复合属性06:10
5复合属性的设置规则06:33

小结 ​

  1. 显示模式先看布局行为，不要只盯调试工具里的一个 display 值。
  2. 表格系列和争议标签不要死磕分类，单独处理更稳。
  3. 字体属性优先用子属性，font 复合属性规则多，实际开发中少用更省心。
  4. 复合属性与子属性的覆盖顺序要养成习惯，这套规则后续还会反复遇到。
  5. 字体族必须以用户环境为准，字体列表和兜底字体是基本操作。
  6. 调试工具、搜索答案、AI 回答都只能作参考，最终以标准、计算样式和实际效果为准。
  7. 每写一个标签先想它的默认显示模式，布局排查会快很多。