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

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

学习目标

• 能复述 HTML 表单标签、iframe、字符实体、全局属性及 CSS 三种引入方式的核心用途，并完成基础页面结构搭建。
• 能使用 px、em、% 为元素设置宽高和字体大小，并正确说明 em 相对于字体大小、百分比宽高相对于父元素的参照规则。
• 能分别使用颜色名、rgb()、十六进制（含三位简写）设置背景色和文字颜色，并判断十六进制颜色能否简写。
• 能使用标签名选择器为指定元素设置样式，并说明其选择同类标签及复用性不足的优缺点。
• 能按 CSS 语法结构编写内嵌式和外链式样式，区分选择器、声明块、属性与值，并解释层叠和注释的基本作用。

知识点

回顾：HTML 收尾与 CSS 引入

为什么需要：前面学的 label、fieldset、iframe、字符实体、全局属性、meta 等，是页面结构和后续 CSS 选择器的基础；不回顾，写案例时容易把 HTML 属性和 CSS 属性混在一起。
怎么想：iframe 能把浏览器支持的文件或另一个网页引入当前页；给 iframe 写 name，超链接的 target 或表单的 target 就能把目标打开到 iframe 里。字符实体用于表示 <、>、& 等特殊符号；全局属性 lang 主要影响浏览器翻译，实际一般只给 html 根元素设置。
怎么做：用 VS Code 输入 ! 生成基本结构，自带 meta 等保留即可。CSS 有三种引入：行内式、内嵌式、外链式；内嵌和外链语法一致，核心是“选择器 + 声明块”。

<div style="width:400px;height:300px;background:red">行内式</div>

<style>
  /* 内嵌式：选择器 { 属性: 值; } */
  .box { color: green; }
</style>

<link rel="stylesheet" href="style.css">

选择器 {
  属性: 值;
}

易错点：HTML 属性和 CSS 属性不是一回事；行内式可读性差且一次只能作用一个元素；内嵌式、外链式推荐放 head 中；CSS 注释是 /* */，不是 HTML 的 <!-- -->；层叠性表示多种途径都能作用，冲突时后面才讲权重。

CSS 长度单位：px、em、%

为什么需要：设置宽高、字体大小、内边距都要写长度；CSS 不能只写数字，必须带单位，否则浏览器不知道是像素、倍数还是百分比。
怎么想：px 是像素，最常用；em 是字体大小的倍数；% 要有参照。像素和屏幕分辨率直接相关，所以客户端开发最常用。
怎么做：

.box01 {
  width: 400px;
  height: 300px;
  background: red;
  font-size: 20px;
}
.box02 {
  width: 20em;
  height: 10em;
  background: green;
}
.box03 {
  width: 50%;
  height: 50%;
  background: blue;
}

调试时：box02 默认字体 16px，20em=320px、10em=160px；若先设 font-size:20px，则变为 400×200。若写两个 font-size，浏览器只执行最后一个，所以 1.5em 仍按默认 16px 算成 24px，宽高变为 480×240。百分比宽度参照父元素宽度；高度也参照父元素高度，但 body 未设高时由内容撑开，子元素再按它算高度就会“尬住”，给 body 设固定宽高后才正常。
易错点：400 不写 px 无效；em 参照字体大小，不是固定像素；百分比高度在父元素没有确定高度时容易失效；pt 多用于印刷，厘米毫米也不适合屏幕，了解即可。

颜色设置：颜色名、RGB、十六进制

为什么需要：页面要有背景色、文字色；颜色名简单但数量有限，实际设计稿颜色需要更精确的表示。
怎么想：颜色名适合简单案例；RGB 是计算机三原色红绿蓝，每个分量 0–255，组合约 1600 多万种；十六进制原理与 RGB 一样，只是用 16 进制数字表示，每两位表示一个原色。
怎么做：

.box01 {
  background: red;
  color: green;
}
.box02 {
  background: rgb(100, 200, 120);
  color: rgb(255, 0, 0);
}
.box03 {
  background: #4FA8BB;
}
.box04 {
  background: #A8C; /* 等同于 #AA88CC */
}

RGB 中三值相同是灰色，数值越大越浅：rgb(255,255,255) 白，rgb(0,0,0) 黑。十六进制中 #0000FF 纯蓝，#131313 接近黑。计算器程序员模式可验证十进制 255 等于十六进制 FF。
易错点：RGB 每个数值范围是 0–255；百分比写法可表示的颜色数量更少，一般不如数值常用；HEX 简写必须“每两位相同”才能压成三位，如 #A8C，而 #AB2233 不能简写；六位全同也只能写成三位，如 #BBBBBB 简写为 #BBB，不是 #B。实际颜色可用吸色工具从设计稿获取，不必硬看颜色值。

基本选择器：标签名选择器

为什么需要：CSS 第一步是选中元素；标签名选择器最原始、最直接，适合给某一类标签统一设置样式。
怎么想：直接写标签名，后面跟大括号；它和类名选择器的区别是类名前有“.”，标签名前面什么都没有。
怎么做：

p {
  width: 600px;
  height: 250px;
  padding: 20px;
  background: #ccc;
}

易错点：标签名选择器会选中页面中所有同类标签；如果 p 和 div 需要相同样式，用标签名选择器就得重复写，不够方便，这正是后面类名选择器要解决的问题。

回顾的定位：把零散知识串成可复用规则

本节是前两天的回顾课，目标不是重新铺开讲，而是把 HTML 剩余标签、全局属性、meta 元信息，以及 CSS 的引入方式、语法结构、层叠性和注释串成一套可复习的规则。复习时不要只背名字，要按“为什么需要 → 怎么想 → 怎么做 → 易错点”过一遍，遇到模糊点再回到转写稿里的推导过程。

表单标签与 iframe

为什么需要：表单标签用于组织表单内容；iframe 用于在当前页面中嵌入其他内容。转写稿强调，iframe 能把浏览器支持的文件类型引入当前页面，实际更常见的是引入另一个网页。

怎么想：label 用来关联表单控件，fieldset 配合 legend 给一组表单内容加边框和标题，了解其样式即可，不必过度深究。iframe 要抓住“可被超链接或表单作为目标打开”这一点：给 iframe 写 name，超链接的 target 可写这个 name，表单的 target 也可写这个 name，这样目标文件就在 iframe 中打开。

怎么做：笔记中保留的要点是 label、fieldset legend、iframe。复习时把“标签名—作用—常用属性”对应起来；iframe 重点记 name 与 target 的配合。

易错点：不要把 iframe 当成只能嵌网页，转写稿明确说浏览器支持的文件类型都可尝试引入；target 要写 iframe 的 name，名字要对上；fieldset/legend 不是本节重点，知道结构和效果即可。

字符实体

为什么需要：有些符号直接写在内容里会被浏览器误认为标签或特殊语法，例如小于号、大于号；有些符号直接输入不方便。字符实体就是用来表示这些特殊符号的。

怎么想：转写稿中的推导是：标签本身就靠 <、> 书写，所以正文里直接写这些符号，浏览器可能按标签解释；这时必须用字符实体。笔记要求掌握 8 个： 、<、>、&、¥、©、×、÷。

怎么做：保留笔记中的实体写法：

  < > & ¥ © × ÷

分别对应空格、小于号、大于号、& 符号、人民币符号、版权符号、乘号、除号。转写稿说字符实体上百个，但本节只要求记住这 8 个。

易错点：实体末尾的分号不能丢；& 表示 & 本身；不要把实体当成普通文本随意省略分号。复习时先记“用途”，再记拼写。

全局属性与 meta 元信息

为什么需要：全局属性是所有标签都可用的属性，能统一控制标题提示、语言、标识、样式等；meta 元信息用于描述页面，如字符编码、关键字、描述等。

怎么想：转写稿中特别强调 lang：它主要影响浏览器自动翻译。结论是网页大部分内容是什么语言，就把 lang 设成对应语言；虽然它是全局属性，实际开发一般只给 html 根元素设置，因为根元素包裹的内容都会继承这一设置。title 提供提示信息，id、name、class、style 都是常见全局属性，其中 class 和 style 在 CSS 中会继续使用。

怎么做：笔记保留的全局属性是 title、lang、id、name、class、style；meta 元信息包括字符编码、关键字、描述等。转写稿建议：meta 不必逐个死记，整理到固定位置，需要时复制；VSCode 用 ! 可生成页面基本结构，自带的 meta 留着即可。

易错点：lang 不要到处给子元素重复设置，优先给 html；class 是类名，不是 CSS 属性；style 是行内样式属性，和 CSS 属性名不是一回事；meta 要放在合适位置，别随手乱塞。

CSS 在 HTML 中的三种使用方式

为什么需要：CSS 要作用到 HTML 上，必须先引入。不同引入方式适合不同场景：行内式直接但局限，内嵌式和外链式更常用。

怎么想：转写稿的推导是：行内式给单个元素写 style 属性，最直接，但可读性差，一次只能给一个元素设置；内嵌式写 style 标签，把 CSS 放在标签里；外链式把 CSS 写到独立 CSS 文件，再用 link 引入。内嵌式和外链式写的 CSS 内容其实一样，只是位置不同。

怎么做：行内式在元素上写 style；内嵌式用 style 标签，语法上可放任意位置，但推荐放 head 中；外链式用 link 引入外部 CSS，link 也推荐放 head 中，和 style 标签位置一致。

易错点：行内式不要把大量 CSS 堆在一行；内嵌式和外链式不要以为语法不同，它们只是承载位置不同；style 标签和 link 标签虽然语法上放别处也可能生效，但推荐 head，更符合规范。

CSS 语法结构、层叠性与注释

为什么需要：写 CSS 必须知道代码由哪些部分组成；同一元素可能被多种方式设置样式，所以要理解层叠性；注释用于标注代码，方便维护。

怎么想：转写稿把内嵌式和外链式的结构讲得很清楚：先写选择器，用来选出要设置样式的元素；后面是大括号，叫声明块；声明块里一条一条叫声明；声明由 CSS 属性和值组成，中间用冒号分隔。行内式格外特殊：不需要选择器，直接写声明。层叠性是同一元素通过行内式、内嵌式、外链式或不同选择器设置样式时，样式会层叠到一起；如果冲突，会涉及权重，后续讲选择器时再展开。

怎么做：记住结构：选择器 { CSS属性: 值; }；行内式只写 CSS属性: 值。注释用 /* */，和 HTML 注释不同。复习时把“HTML 属性”和“CSS 属性”分开看，它们写的位置和含义完全不同。

易错点：选择器不是行内式必需的；声明块里是声明，不是选择器；CSS 属性和 HTML 属性不要混为一谈；注释不要写成 HTML 注释；层叠冲突不要现在硬背权重，先理解“都会作用、冲突再谈权重”。

课堂画面

代码示例

示例一：CSS 长度单位（px / em / %）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 长度单位</title>
<style>
  /* 为了让百分比的高度有参照，给 body 显式设置宽高 */
  body {
    width: 2000px;
    height: 1000px;
    margin: 0;
  }

  /* 1. 像素 px */
  .box01 {
    width: 400px;
    height: 300px;
    font-size: 20px;      /* 浏览器默认字体 16px，这里改成 20px */
    background-color: red;
  }

  /* 2. em —— 字体大小的倍数（默认 16px） */
  .box02 {
    width: 20em;          /* 20 × 16 = 320px */
    height: 10em;         /* 10 × 16 = 160px */
    background-color: green;
  }

  /* 3. 百分比 —— 宽参照父元素宽，高参照父元素高 */
  .box03 {
    width: 50%;           /* 2000 × 50% = 1000px */
    height: 50%;          /* 1000 × 50% = 500px */
    background-color: blue;
  }
</style>
</head>
<body>
  <div class="box01">20个字20个字20个字20个字</div>
  <div class="box02">20个字20个字20个字20个字</div>
  <div class="box03">20个字20个字20个字20个字</div>
</body>
</html>

关键行与易错点

• width: 400px; 中的 px 绝对不能省：在 HTML 属性里写 width="400" 可以省单位，但 CSS 里只写 400 是无效的，因为长度单位不止像素一种，浏览器不知道你指的是什么。
• em 是“字体大小的倍数”，不是固定长度：20em 在默认 16px 下是 320px；如果给该元素写上 font-size: 20px;，20em 就变成 400px。
• em 的计算顺序：浏览器会先算好 font-size，再用它去算所有以 em 为单位的宽、高，所以 font-size 写在声明块前面还是后面不影响结果。
• 同一个属性写了两次，浏览器只认最后一条，前面那条等于没写（DevTools 里会显示删除线）。所以写 font-size: 20px; 又写 font-size: 1.5em;，1.5em 参照的是默认的 16px，结果仍是 24px，不是 20 × 1.5。
• 百分比高度最容易踩坑：元素不设高度时默认由内容撑开，body 也不例外；如果 body 没有固定高度，子元素再写 height: 50% 就无法计算，高度会失效。所以演示时要先给 body 设置宽高。
• 百分比设置 font-size 时参照的是父元素（或默认）字体大小，规则与 em 类似。
• 另有 pt（磅）等印刷业单位，在 CSS 里能生效但前端页面基本不用，了解即可。

---

示例二：CSS 颜色的三种设置方式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS 颜色设置方式</title>
<style>
  div {
    width: 400px;
    height: 250px;
    padding: 20px;        /* 内边距，长度单位同样是 px */
  }

  /* 1. 颜色名 */
  .box01 {
    background-color: red;
    color: green;
  }

  /* 2. rgb(红, 绿, 蓝)，每个值 0 ~ 255 */
  .box02 {
    background-color: rgb(100, 200, 120);
    color: rgb(0, 0, 255);      /* 纯蓝 */
  }

  /* 3. 十六进制 #RRGGBB，每两位表示一个原色 */
  .box03 {
    background-color: #4FA8BB;
    color: #FFFFFF;             /* FF 就相当于 255，纯白文字 */
  }

  /* 3 位简写：#A8C 等价于 #AA88CC */
  .box04 {
    background-color: #A8C;
    color: #000;
  }
</style>
</head>
<body>
  <div class="box01">颜色名：red 背景 + green 文字</div>
  <div class="box02">rgb(100, 200, 120) 背景</div>
  <div class="box03">#4FA8BB 背景</div>
  <div class="box04">#A8C 简写 = #AA88CC</div>
</body>
</html>

关键行与易错点

• 颜色名只能记住常用的十几个（red、orange、yellow、green、blue、purple、pink 等），英文单词无法覆盖所有颜色，实际开发中颜色多是设计师调好的，必须用 rgb 或十六进制。
• rgb() 三个值范围都是 0 ~ 255：数值越大该原色占比越多，rgb(255, 0, 0) 是纯红，rgb(0, 0, 0) 是黑，rgb(255, 255, 255) 是白。
• 三个值取相同数值就是灰色，且数值越大颜色越浅（rgb(100,100,100) 比 rgb(0,0,0) 浅）。
• 十六进制写法必须带 #，共 6 位，每两位表示一个原色（#4FA8BB = 红 4F、绿 A8、蓝 BB），FF 相当于十进制的 255，00 相当于 0。
• 三位简写的条件：每一组原色的两位数字都各自相同才可简写，#AABBCC → #ABC、#BBBBBB → #BBB（不能只写一个 B）；而 #AB2233 这种不符合条件，写成 #AB23 浏览器无法判断如何补位，所以无效。
• 十六进制与 rgb 原理完全一样，都是“三原色配比”，不用试图通过色值脑补颜色，实际开发用吸色工具从设计稿取色即可。

---

示例三：标签名选择器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>标签名选择器</title>
<style>
  /* 标签名选择器：直接写标签名，前面什么都不加 */
  p {
    width: 600px;
    height: 250px;
    padding: 20px;
    background-color: #ccc;   /* #CCCCCC 的简写 */
  }

  /* 想让 div 有同样的样式，只能把声明块再写一遍 */
  div {
    width: 600px;
    height: 250px;
    padding: 20px;
    background-color: #ccc;
  }
</style>
</head>
<body>
  <p>我是 P 段落，被 p 选择器选中</p>
  <div>我是 DIV 盒子，被 div 选择器选中</div>
</body>
</html>

关键行与易错点

• 标签名选择器（也叫元素选择器、元素名选择器）就是直接写标签名 + 大括号，前面什么都不加；类名选择器前面才加 .，这是最容易混的地方。
• 它会一次性选中页面上所有该标签，无法只挑其中某一个。
• 缺点很明确：p 和 div 需要相同样式时，必须把整个声明块复制一遍，代码冗余；页面上元素一多就更难维护——这正是后面要学类名选择器、ID 选择器的原因。
• 同一个元素可以被多个选择器同时选中（如标签名 + 类名），样式会层叠到一起共同生效；若有冲突则涉及权重问题。
• 声明块里每一条 属性: 值; 是“声明”，别把 CSS 属性（width、background-color）和 HTML 属性（width="400"、class）搞混，两者完全不是一回事。

常见错误

• 现象：写了 width: 400;，页面完全没效果。
  原因：CSS 长度值漏写单位，浏览器无法判断长度含义。
  修法：补上单位，如 width: 400px;；只有 0 可省略单位。

• 现象：用 em 设置宽高后，尺寸和预期不一致。
  原因：em 参照当前元素的字体大小；若同一元素重复写 font-size，浏览器只采用最后一条，前面的设置不参与计算。
  修法：先确认最终生效的 font-size，再计算 em；避免重复声明同一属性。

• 现象：子元素 height: 50%; 没有按预期高度显示。
  原因：百分比高度参照父元素高度，而父元素未设置固定高度，高度由内容撑开。
  修法：给父元素设置明确高度，或改用其他布局方式；不要盲目用百分比设高度。

• 现象：把 #AB2233 简写成 #AB23，颜色失效或不符合预期。
  原因：六位十六进制简写为三位的前提是每两位相同，如 #AABBCC → #ABC。
  修法：逐组检查；#AB2233 这类不能简写，必须写完整六位。

• 现象：多个元素需要相同样式时，用标签名选择器逐条复制，代码冗长且难维护。
  原因：标签名选择器只能按标签类型选中，不同标签无法一次复用同一套样式。
  修法：给元素加统一类名，用类名选择器复用；同类元素再考虑分组选择器。

• 现象：行内式写成 style=".box { color: red; }" 不生效。
  原因：行内式 style 中直接写声明，不需要选择器和大括号。
  修法：改为 style="color: red;"，只写 CSS 属性和值。

练习

1. 写一个 div，宽 400px、高 250px、背景色为纯红，分别用颜色名、rgb()、十六进制三种方式实现。
2. 一个父元素设置 font-size: 20px;，子元素设置 width: 10em; height: 5em;，请计算并验证子元素宽高。
3. 判断下列十六进制颜色能否简写，并说明原因：#FF0000、#AABBCC、#AB2233、#131313。
4. 页面中有 p、div、span 三个元素需要完全相同的文字颜色和背景色，请用类名选择器完成，并说明为什么不逐个用标签名选择器复制。
5. 找出并改正下面代码中的错误：
   style=".box { width: 300; height: 50%; background: #AB23; }"

原视频对照

#	视频	时长
1	回顾	09:32
2	CSS长度单位	25:04
3	颜色设置方式-颜色名	04:22
4	颜色设置方式-rgb方式	09:22
5	颜色设置方式-hex方式	24:03
6	标签名选择器	03:57

小结

1. CSS 长度值必须带单位，px 是日常开发首选，em 和百分比作为补充。
2. em 与字体大小强相关，使用前必须确认当前元素最终生效的字体大小。
3. 百分比宽高分别参照父元素宽高，父元素没有明确高度时，百分比高度容易失效。
4. 颜色名适合简单示例；实际开发更常用 rgb() 和十六进制，并配合吸色工具取色。
5. 十六进制颜色本质与 RGB 等价，简写必须满足“每两位相同”的条件。
6. 标签名选择器简单但复用性弱，需要批量复用样式时应优先考虑类名。
7. 行内式只写声明，不写选择器和大括号；重复声明同一属性时，浏览器只认最后一条。