前端阶梯——第九章、颜色、文本与背景

上一章我们解决了两个地基问题：样式的选择器怎么写 、两条规则打架谁说了算 。但还有一半没讲------选中了元素，到底能把它改成什么样？

这一章就来填这个坑。你打开任何一个网页，第一眼看到的东西，几乎都归两个属性管：

• 颜色------字是什么色、底是什么色；
• 文字------字号多大、行间距多高、对齐到哪边。

这两样东西看着简单，可**"能看懂颜色代码"和"能配出一套舒服的颜色"是两码事**。新手常见的问题是：颜色全凭感觉挑、字号随手写、行高从不设，做出来的页面"每个元素都对，合起来就是别扭"。

学完本章，你能：

• 看懂并写出五种颜色表示法（关键字 / HEX / RGB / RGBA / HSL），知道什么时候用哪种；
• 用字体与文本属性控制字号、字重、行高、间距、对齐------这是排版的四梁八柱；
• 玩转背景：背景色、背景图、重复方式、定位、尺寸，以及多个背景叠加。

一句话概括本章要做的事：让页面从"能看"变成"好看"，从"能读"变成"读得舒服"。

9.1 颜色怎么表示：五种写法

CSS 表示一个颜色，至少有五种方式。它们表达的是同一个东西，只是"说法"不同。

写法	例子	一句话说明
关键字	red	直接写颜色名，最偷懒
HEX（十六进制）	#e11d48	设计稿上最常见，# 开头的 6 位码
RGB / RGBA	rgb(225 29 72)	用红绿蓝三条通道描述
HSL / HSLA	hsl(349 78% 50%)	用色相、饱和度、明度描述，最好调
现代写法	oklch(0.6 0.2 20)	感知均匀的新标准，见 9.2 节

先看最熟的关键字 。CSS 内置了 140 多个颜色名：red、blue、gold、tomato、rebeccapurple......它们写起来最省事，但能选的范围极小，而且颜色名和实际色值你根本记不住。所以关键字只在做 demo、或表达"纯黑纯白"时用。

💡 提示：两个特殊的关键字，一定要认识。

• transparent：完全透明。它不是"白色"，而是"没有颜色"------常用来给按钮做"透明底 + 边框"的样式。
• currentColor ：一个"活的"颜色，等于当前元素的 color 值 。比如 border: 1px solid currentColor，边框颜色会自动跟着文字颜色走，改文字色边框就跟着变，不用改两遍。

再看设计稿上的常客------HEX（十六进制） 。它的格式是 #RRGGBB，每两位代表一条通道：

/* # e1 1d 48
     │  │  └── 蓝（BB）
     │  └───── 绿（GG）
     └──────── 红（RR）
   每一位是 0-9 和 a-f，范围 00 ~ ff（即十进制的 0 ~ 255） */
color: #e11d48;

三个简化规则必须知道：

• 能缩写就缩写 ：#ffffff 可写成 #fff，#aabbcc 可写成 #abc------前提是每两位相同；
• 8 位 HEX 带透明度 ：#e11d4880，最后两位是 alpha（00 全透明、ff 全不透明）；
• 不带 # 就是错的 ：e11d48 不是颜色，是无效值。

📌 记忆点：HEX 的每一位是 16 进制。 0 是 0，a 是 10，f 是 15。所以 ff = 15×16+15 = 255 ，这就是单通道的最大值。记住这个换算，#808080 是"一半灰"就不会觉得神秘了（80 = 128，正好是 255 的一半）。

接着是RGB 与 RGBA。它把颜色拆成红、绿、蓝三条通道，每条 0~255：

/* 现代写法：用空格分隔，透明度用 / 接在后面 */
color: rgb(225 29 72);
color: rgb(225 29 72 / 0.5);   /* 半透明 */

/* 旧写法：逗号分隔，透明度另起一个函数 rgba() */
color: rgba(225, 29, 72, 0.5);

⚠️ 注意：rgba() 已经是"老语法"了，但它依然有效。 CSS 早期没有空格语法，只能用 rgba(r, g, b, a) 表达透明度。现在 rgb() 自己就能带 / alpha，rgba() 只是 rgb() 的别名 ，两者等价。新代码推荐统一写 rgb(225 29 72 / 0.5)，省得记两套。

最后是最好用的 HSL。它换个维度描述颜色：

通道	含义	范围
H（hue，色相）	色环上的角度，红 0°、绿 120°、蓝 240°	0 ~ 360
S（saturation，饱和度）	0% 是灰，100% 是纯色	0% ~ 100%
L（lightness，明度）	0% 是黑，50% 是正常，100% 是白	0% ~ 100%

color: hsl(349 78% 50%);
color: hsl(349 78% 50% / 0.5);   /* 带透明度 */

🔍 原理：为什么调色的时候 HSL 更好用？ 想给一个红色"调深一点"，用 HEX 你得重新取色；用 HSL，只要把 L 从 50% 改成 40%。想"变淡一点"，把 S 降下来。改一个数字，动一个维度 ------这就是 HSL 相对 RGB / HEX 的核心优势。 顺带一个福利：互补色就是把色相 ±180° 。hsl(349 ...) 的互补色是 hsl(169 ...)，配色时非常省事。
⚠️ 注意：HSL 的 α 写法在旧代码里可能是 hsla()。 和 rgb/rgba 一样，hsla() 是 hsl() 的别名，二者等价。推荐统一用 hsl(H S L / A)。

9.2 现代颜色：oklch 与 color-mix（截至 2026 年 10 月）

CSS 的颜色体系这几年还在进化，有两个新东西已经可以放心用，值得先混个脸熟。

color-mix()：直接在 CSS 里"调"两个颜色，不用再打开取色器：

:root { --brand: #2563eb; }

.button        { background: var(--brand); }
.button:hover  { background: color-mix(in oklch, var(--brand) 80%, white); }
.button:disabled { background: color-mix(in oklch, var(--brand) 30%, #999); }

oklch() ：一种"感知均匀"的颜色空间。简单说，它让"数值上的等距离"约等于"人眼看到的等距离"，所以用它生成的一整套色阶，明暗过渡更均匀、不会发灰 。color-mix() 的默认插值空间也推荐用 oklch。

color: oklch(0.62 0.22 264);        /* L 亮度 0~1，C 彩度，H 色相角 */
color: oklch(0.62 0.22 264 / 0.5);  /* 透明度同样用 / */

特性	Chrome / Edge	Firefox	Safari	结论
oklch()	111+	113+	15.4+	已全平台覆盖
color-mix()	111+	113+	16.2+	已全平台覆盖

📖 补充：口径与兜底。 截至 2026 年 10 月 ，上面两项在主流浏览器的当前版本里都已稳定可用。但它们毕竟比 HEX 新，如果项目要照顾很老的浏览器，先写一行 HEX 兜底、再写现代写法即可------浏览器不认识哪一行就自动跳过：

.button { background: #5a3899; background: color-mix(in oklch, red, blue); }

新手阶段，你只要"认得"这两行就够了；日常写样式继续用 HEX 和 HSL 完全没问题。

9.3 字体属性：font-family / size / weight / style

文字长什么样，先由"用什么字体、多大、多粗、正还是斜"这四个属性决定。

font-family（字体族） ：指定文字用哪些字体，是一个"从左到右挨个尝试"的清单，叫字体栈。

body {
  font-family: system-ui, -apple-system, "Segoe UI",
               "Microsoft YaHei", "PingFang SC", sans-serif;
}

通用字体族	作用	典型场景
serif	衬线体（有"小脚"）	大段正文、书刊感
sans-serif	无衬线体	绝大多数网页界面
monospace	等宽体	代码、数字对齐
system-ui	系统默认界面字体	现代首选，免下载、加载快

✅ 正确做法：字体栈最后一定要放一个通用族收尾。 浏览器会从左往右找 ，第一个装了的就用。如果前面写的字体用户一个都没装，最后那个 sans-serif 就是保底------没有它，浏览器会乱用一个默认字体，排版可能直接崩 。 另一个细节：字体名里有空格，必须加引号 （"Microsoft YaHei"），没空格才可省略（sans-serif）。

font-size（字号）：单位有好几种，初学阶段抓住两个就够。

单位	含义	特点
px	像素，绝对尺寸	直观，但不随用户设置缩放
rem	相对根元素 （<html>）字号	1rem 默认 = 16px，可随用户习惯缩放
em	相对父元素字号	会层层累乘，容易算错
%	相对父元素百分比	和 em 类似

html { font-size: 16px; }   /* 基准 */
body { font-size: 1rem; }   /* 16px */
h1   { font-size: 2rem; }   /* 32px */
.small { font-size: 0.875rem; }  /* 14px */

💡 提示：为什么要用 rem 而不是 px？ rem 的"根"是 <html> 的字号。用户在浏览器里把默认字号调大（视力不好的人常这么做）时，用 rem 的页面会整体等比放大，用 px 的不会 。这不是"炫技"，是可访问性 。新手可以先用 px 上手，但要有意识地往 rem 迁移。

font-weight（字重） ：字有多粗，用 100~900 的数字，normal = 400，bold = 700。

p     { font-weight: 400; }   /* 常规 */
strong { font-weight: 700; }  /* 加粗 */
.light { font-weight: 300; }  /* 细体（前提：字体本身有这套字重） */

⚠️ 注意：写了 300 不一定真的变细。 字重能不能生效，取决于所用字体 是否提供该字重。系统默认的中文字体常常只有"常规 + 加粗"两档，你写 300 或 500，浏览器可能直接忽略、仍按 400 渲染。所以用细体前，要么引入带多字重的 Web 字体，要么别依赖它。

font-style（字形） ：normal（正常）/ italic（斜体）/ oblique（倾斜）。中文里斜体是用算法"强行斜过去"的，观感一般，正文少用。

还有一条简写属性 font ，能一行写完全部，但顺序有讲究，且必须写 font-size 和 font-family：

/* font: style weight size/line-height family */
.title { font: italic 700 24px/1.5 "Microsoft YaHei", sans-serif; }

📌 记忆点：简写省事，但初学阶段建议先分开写。 font 简写看着爽，可它会把没写到的子属性重置为默认值，一不小心就把字号、行高冲掉了。调试期一行一行地写，出问题好定位。

9.4 文本属性：对齐、装饰、缩进、行高、字距

字体管"长什么样"，文本属性管"怎么排"。这五个是日常使用率最高的。

属性	作用	常用值
text-align	水平对齐	left / center / right / justify
text-decoration	文本装饰线	none / underline / line-through
text-indent	首行缩进	长度值，如 2em
line-height	行高	无单位数字（推荐）/ 长度 / 百分比
letter-spacing	字间距	长度值，如 0.05em

p {
  text-align: left;
  line-height: 1.75;      /* 关键：让正文不拥挤 */
  text-indent: 2em;       /* 中文段落首行缩进两个字的宽度 */
}
a { text-decoration: none; }        /* 去掉链接默认下划线 */
a:hover { text-decoration: underline; }
.del { text-decoration: line-through; }  /* 删除线 */
.title { letter-spacing: 0.05em; }       /* 大标题拉开一点字距更透气 */

先说 text-align ：它管的是块级盒子里文字的横向对齐 ，注意------它不负责"让块级元素本身居中" （那是下一章盒模型和 margin: auto 的事）。justify 是"两端对齐"，英文排版常用，中文长段落慎用（容易拉出难看的字缝）。

line-height 是本章最值钱的一个属性。 它决定每行文字占多高，直接决定"这段文字读起来累不累"。

写法	例子	特点
无单位数字（推荐）	line-height: 1.6	会随字号自动缩放，子元素继承后各按各的字号算
长度	line-height: 28px	固定值，字号变它不变，容易错位
百分比	line-height: 160%	会在父元素处"算死"，子元素继承的是算完的值
关键字	line-height: normal	约 1.2，偏挤，通常要覆盖

/* 父子字号不同时，对比一下 */
.parent { font-size: 20px; line-height: 1.5; }  /* 子元素继承的是"1.5"这个倍数 */
.parent2 { font-size: 20px; line-height: 150%; } /* 子元素继承的是"30px"这个死值 */

.child { font-size: 12px; }
/* 前者：12×1.5 = 18px，跟着子字号走（对） */
/* 后者：仍是 30px，行高比字号还大（错，行距忽大忽小） */

📌 记忆点：行高用无单位数字。 一句话记住：line-height: 1.5 是"倍数"，line-height: 150% 是"死值"。 正文常用 1.5 ~ 1.8，中文取偏大值（1.75 左右）更舒服。

text-indent ：首行缩进，用相对单位 最好------中文"缩进两个字"，就写 2em（因为 em 相对字号，字号变它也跟着变）。

letter-spacing ：字间距，字号越大越需要拉开一点（0.05em 左右），小字正文别乱加。

再顺手记三个"和文字有关"的小属性，用到时不至于现查：

• text-transform ：改变英文 的大小写。uppercase（全大写）/ lowercase / capitalize（首字母大写）。
• white-space ：控制空白和换行 怎么处理。nowrap（不换行）/ pre（保留空格和换行）/ pre-wrap（保留空格但可换行）。
• text-shadow ：文字阴影 。2px 2px 4px rgb(0 0 0 / 0.3)（水平 垂直 模糊 颜色）。

.label  { text-transform: uppercase; letter-spacing: 0.1em; }  /* 标签全大写 */
.code   { white-space: pre; font-family: monospace; }          /* 保留缩进和换行 */
.title  { text-shadow: 0 2px 4px rgb(0 0 0 / 0.25); }         /* 轻微投影，增加层次 */

💡 提示：text-transform 只影响"显示"，不改内容。 它把文字"画"成大写，但DOM 里的文本仍然是小写 。所以别用它来处理"需要真实大写"的数据（比如身份证号），那应该在后端或 JS 里改。它的正确用途是纯视觉 的大小写统一，例如把按钮文字统一显示为大写。 另外 white-space: nowrap 是做单行省略号的必备前戏 ------不先禁止换行，text-overflow: ellipsis 不会起作用。
📖 补充：几个"小体量、大提升"的现代文本属性（截至 2026 年 10 月均可放心用）。

• text-wrap: balance ：让标题的多行长度自动均衡 ，避免"最后一行孤零零剩两个字"。它只对短文本（约 6 行内） 生效，用在标题上正合适。

  h1, h2 { text-wrap: balance; max-width: 20ch; }

• 单行省略号 ：white-space: nowrap; overflow: hidden; text-overflow: ellipsis;------超出宽度自动变 ...。

• 多行省略号（line-clamp） ：标准属性 line-clamp 截至目前仍是"有限支持" ，跨浏览器要用带前缀的组合写法，别只写一行：

  .clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;   /* 最多显示 3 行 */
    overflow: hidden;
  }

9.5 背景 background：颜色 / 图片 / 重复 / 定位 / 尺寸

背景是页面的"底妆"。它由一组 background-* 属性控制，逐条看清楚。

属性	作用	常见值
background-color	背景色	任意颜色值
background-image	背景图	url("banner.jpg") / 渐变
background-repeat	是否平铺	repeat（默认）/ no-repeat / repeat-x / repeat-y
background-position	图片位置	center / 50% 50% / left top
background-size	图片尺寸	cover / contain / 100% auto
background-attachment	是否随滚动	scroll（默认）/ fixed

.hero {
  height: 420px;
  background-color: #0f172a;              /* 图没加载出来时的兜底色（好习惯） */
  background-image: url("images/banner.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

background-size 是新手最容易困惑的一个 ，重点区分 cover 和 contain：

值	效果	会不会留白	会不会裁切
cover	铺满整个容器，保持比例	不会	会（超出部分裁掉）
contain	完整显示整张图，保持比例	会（有留白）	不会
100% 100%	强行拉满	不会	会拉伸变形

📌 记忆点：cover 是"铺满"，contain 是"装下"。 做 Banner、卡片封面用 cover （宁裁不空）；做图标、"必须看全整张图"的场景用 contain （宁空不裁）。永远别用 100% 100% 去拉一张有内容的图------它会把照片压扁。

background-position 定位：两个值分别是"水平 垂直"。

background-position: center;        /* 水平垂直都居中 */
background-position: left top;      /* 左上角 */
background-position: 50% 20%;       /* 水平居中，垂直靠上一点（做 Banner 常用） */

简写属性 background 可以把上面一堆合成一行。小技巧：size 必须写在 position 之后，并且用 / 隔开：

/* 注意 position / size 这一对 */
.hero { background: #0f172a url("banner.jpg") center / cover no-repeat; }

⚠️ 注意：简写会把没写的子属性重置成默认值。 比如你只有 background: red;，它其实等价于 background-color: red; background-image: none; background-repeat: repeat; ...------之前设置过的背景图会被这一行清掉 。所以：要么整体用简写一把梭，要么全部用单独属性，别一半一半混着来。

两个常被忽略的属性：

• background-attachment ：背景是否随页面滚动 。scroll（默认，跟着滚）/ fixed（钉住不动，做视差）。
• background-clip ：背景画到哪一层为止 。border-box（默认）/ padding-box / content-box / text。

.parallax {
  background: url("mountain.jpg") center / cover fixed;  /* 滚动时背景不动，产生纵深感 */
}
.btn {
  background: #2563eb;
  background-clip: padding-box;   /* 背景不画到圆角边框外面，圆角更干净 */
}

📌 记忆点：background-clip 的默认值是 border-box。 也就是说，背景默认会一直铺到边框的最外沿 （只是被边框盖住看不见）。把它改成 padding-box，背景就"缩"到内边距区域------做带透明边框的圆角按钮时，这一条能避免边框外侧"漏色" 。而 background-clip: text 就是 9.6 节的渐变文字要用到的招式。

9.6 多重背景与渐变

多重背景 ：一个元素可以叠好几层背景，用逗号分隔 ，写在最前面的在最上层。

.card {
  background:
    url("images/pattern.svg") no-repeat top right / 80px,
    linear-gradient(135deg, #2563eb, #7c3aed);
}

⚠️ 注意：多重背景的顺序和"图层"一样，是先写的盖后写的。 上面这段里，pattern.svg 在上层 ，渐变在下层。想反了，图案就会被盖住看不见。

渐变 本质上是一种"程序生成的图"，所以它写在 background-image（或简写里的图片位置）。

类型	写法	效果
线性渐变	linear-gradient(135deg, #a, #b)	沿一条方向从 A 过渡到 B
径向渐变	radial-gradient(circle, #a, #b)	从中心向外扩散

.hot  { background: linear-gradient(to right, #f43f5e, #f97316); }
.glow { background: radial-gradient(circle at center, #60a5fa, transparent 70%); }

一个经典效果：渐变文字。 把渐变"裁"到文字上，需要三件套：

.gradient-text {
  background: linear-gradient(90deg, #38bdf8, #a855f7, #f472b6);
  background-clip: text;            /* 标准写法 */
  -webkit-background-clip: text;    /* Safari 等仍需带前缀 */
  color: transparent;               /* 关键：让文字本身透明，渐变才透出来 */
}

✅ 正确做法：渐变文字必须让文字变透明。 background-clip: text 只是让背景"只画在文字形状里"，如果文字本身还是黑色实心，你看到的仍是黑字。color: transparent 才是让渐变显形的关键一步 ，新手最常漏掉它。 另外记得同时写 -webkit-background-clip------Safari 及部分环境只认带前缀的版本。

顺带一个好用的新属性：accent-color 。它能一行代码 给原生的复选框、单选按钮、进度条换主色（Chrome 93+ / Firefox 92+ / Safari 15.4+ 起支持，截至 2026 年 10 月可放心用）：

input[type="checkbox"],
input[type="radio"] { accent-color: #2563eb; }

💡 提示：这比"用 CSS 重画一个复选框"划算太多。 过去想换复选框颜色，得用伪元素把人家的默认控件整个盖掉再重画，还得自己处理键盘焦点和无障碍。accent-color 只改颜色、保留原生控件的全部交互和可访问性，一行搞定。做表单时优先用它。

9.7 动手：给新闻页做一套排版

把本章的东西全用上，给第 8 章那个新闻页配一套"读得舒服"的排版。

:root {
  --brand: #2563eb;
  --text: #1f2937;
  --muted: #6b7280;
  --bg: #f7f8fa;
}

body {
  font-family: system-ui, "Microsoft YaHei", "PingFang SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;      /* 中文正文的舒适行高 */
  color: var(--text);
  background-color: var(--bg);
}

.post-title {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-wrap: balance;     /* 标题多行自动均衡 */
  margin-bottom: 0.5em;
}

.post-meta { color: var(--muted); font-size: 0.875rem; }

.post p { text-indent: 2em; }        /* 中文段落首行缩进 */
.post a { color: var(--brand); text-decoration: none; }
.post a:hover { text-decoration: underline; }

.hero {
  height: 320px;
  background: var(--brand) url("images/banner.jpg") center / cover no-repeat;
  border-radius: 8px;
}

.tag {
  display: inline-block;
  padding: 2px 10px;
  font-size: 0.75rem;
  color: var(--brand);
  background: color-mix(in oklch, var(--brand) 12%, white);  /* 主色调淡做底色 */
  border-radius: 999px;
}

对照自查：这张样式表里每一行都是本章讲过的属性。

用到的	来自
font-family / font-size / font-weight	9.3 字体属性
line-height（无单位）/ letter-spacing	9.4 文本属性
text-indent / text-decoration / text-wrap	9.4 文本属性
background 简写 / size / position	9.5 背景
color-mix()	9.2 现代颜色
--变量 + var()	颜色集中管理（进阶习惯，先认识）

✅ 正确做法：颜色用变量集中管。 :root { --brand: #2563eb; } 定义一次，全站 var(--brand) 引用。改品牌色只要改一行，比满文件搜十六进制码高效得多。这属于"从能写到写得好"的一个分水岭。

9.8 本章小结

• 五种颜色写法 ：关键字 / HEX（#rrggbb，可缩写成 #rgb）/ rgb() / hsl() / 现代 oklch()。HEX 是设计稿通用语，HSL 最好调色。
• 两条特殊颜色值 ：transparent（完全透明）、currentColor（跟随 color）。
• HEX 每一位是 16 进制 ，ff = 255；#e11d4880 的最后两位是透明度。
• oklch() 与 color-mix() 截至 2026 年 10 月已全平台覆盖，可放心用，必要时用 HEX 写在前面兜底。
• 字体四件套 ：font-family（字体栈，末尾必放通用族）/ font-size（推荐 rem）/ font-weight（100~900，能否生效看字体）/ font-style。
• 文本五件套 ：text-align（对齐）/ text-decoration（装饰线）/ text-indent（首行缩进）/ line-height（行高，用无单位数字 ）/ letter-spacing（字距）。
• line-height 是排版舒适度的关键 ，中文正文常取 1.5 ~ 1.8。
• 背景 ：颜色 / 图片 / 重复 / 定位 / 尺寸。cover 铺满、contain 装下 ，别用 100% 100% 拉伸。
• 多重背景 逗号分隔，先写的在上层；渐变也是"背景图"。
• 渐变文字三件套 ：background-clip: text + -webkit- 前缀 + color: transparent。
• accent-color 一行给表单控件换主色；text-wrap: balance 让标题更匀称；line-clamp 仍要写 webkit 前缀组合。

9.9 练习题

第 1 题（概念辨析）　下面四个说法，判断对错并说明理由。

① #fff 和 #ffffff 是同一个颜色。
② rgba(255, 0, 0, 0.5) 和 rgb(255 0 0 / 0.5) 是两个不同的颜色。
③ transparent 就是"白色透明"，等价于 rgba(255, 255, 255, 0)。
④ HSL 里把明度 L 从 50% 改成 40%，颜色会变暗。

参考答案

#	判断	理由
①	✅ 对	#fff 是 #ffffff 的缩写形式，二者完全等价。缩写的条件是"每两位相同" ：#aabbcc 可缩成 #abc
②	⛔ 错	rgba() 只是 rgb() 的别名，rgb(255 0 0 / 0.5) 就是带 alpha 的写法，两者是同一个颜色 。新代码推荐空格 + / 的写法
③	⚠️ 表述不准	transparent 表示"完全透明"，但它并不等于一个白色的透明色 。在颜色计算里，transparent 实际是透明的黑色（各通道 0）。实践中"透不透明"才是重点，"透出的是黑还是白"在纯透明时看不出来------但当它参与渐变插值时，用 transparent 可能让过渡"发灰"，这时应显式写 rgba(255,255,255,0) 之类
④	✅ 对	L（明度）100% 是白、0% 是黑。从 50% 降到 40%，就是往黑的方向走，颜色变暗

要记住的一句话 ：rgb/rgba、hsl/hsla 都是"别名关系"，不是两套颜色。 别被函数名骗了。

第 2 题（计算 / 换算）　完成下面三个换算。

① 十六进制 #ff8800 里，三个通道分别是多少十进制？
② 想表达"完全透明的红色"，用 8 位 HEX 怎么写？
③ hsl(210 100% 50%) 的互补色，色相应该改成多少？

参考答案

① #ff8800 → RGB

通道	HEX	十进制计算	结果
红	ff	15×16 + 15	255
绿	88	8×16 + 8	136
蓝	00	0	0

所以 #ff8800 = rgb(255 136 0)，是一个橙色。

② 完全透明的红色

• 红色 = #ff0000，然后在后面补两位 alpha；
• 完全透明 = alpha 为 00。

答案是 #ff0000 00 ，即 #ff000000。

（对比：#ff0000ff 是完全不透明的红。）

③ 互补色

互补色 = 色相 ±180°。

210 + 180 = 390，超过 360 要减回去：390 - 360 = 30。

所以互补色是 hsl(30 100% 50%) ------一个橙色。（也可以用 210 - 180 = 30，结果一样。）

要点 ：#RRGGBBAA 是 8 位 HEX，RRGGBB 是颜色、AA 是透明度；色相角是环形的，超过 360° 就绕回去。

第 3 题（纠错）　小美想让文章标题居中、正文段落有舒适行高，但效果全乱。请找出至少 4 处问题并改正。

.title {
  font-family: Arial, sans-serif
  font-size: 24 px;
  text-align: center
}

.content {
  line-height: 150%;
  font-size: 18px;
}

.content p {
  font-size: 14px;
  line-height: 150%;
}

参考答案

#	错误	正确写法	说明
①	font-family: Arial, sans-serif 漏分号	行尾加 ;	漏分号会让下一条声明被吞掉 ，font-size 直接失效
②	24 px 数值与单位间有空格	24px	数值和单位必须紧挨着
③	text-align: center 后漏分号	加 ;	同上，虽在块末尾也建议补上
④	line-height: 150% 用百分比	改成无单位 1.5	见下方说明

第 ④ 处是重点。 父元素 .content 的 font-size 是 18px、line-height: 150%，会被算成 27px 这个死值 ；子元素 .content p 字号是 14px，却继承了 27px 的行高------14px 的字配 27px 的行距，行距被撑得过大，这就是"全乱"的根源之一。

改成无单位数字后：

• .content：18 × 1.5 = 27px（对）；
• .content p：14 × 1.5 = 21px（跟着自己的字号走，对）。

修复后：

.title {
  font-family: Arial, sans-serif;
  font-size: 24px;
  text-align: center;
}

.content {
  line-height: 1.5;
  font-size: 18px;
}

.content p {
  font-size: 14px;
  line-height: 1.5;
}

第 4 题（实战）　按要求写出 CSS（只需写出对应属性）。

① 一个卡片，用 135° 的线性渐变从 #2563eb 过渡到 #7c3aed 作背景
② 给这个卡片叠一张右上角的图标 images/icon.svg，不重复、宽 60px（叠在渐变之上）
③ 给一个 <h1> 做渐变文字（蓝→紫）
④ 把页面里的复选框主色改成 #f43f5e

参考答案

/* ① 渐变背景 */
.card {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
}

/* ② 在渐变的"上面"再叠一张图标 */
.card {
  background:
    url("images/icon.svg") no-repeat top right / 60px,
    linear-gradient(135deg, #2563eb, #7c3aed);
}

/* ③ 渐变文字 */
h1 {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ④ 表单控件主题色 */
input[type="checkbox"] { accent-color: #f43f5e; }

三个关键点：

• ② 的顺序不能反 。多重背景里写在最前面的在最上层 。图标必须写在渐变之前 ，否则会被渐变盖住看不见。position / size 这一对用 top right / 60px 表达（斜杠前是位置、斜杠后是尺寸）。
• ③ 渐变文字三件套缺一不可 ：background-clip: text（把背景裁进文字）+ -webkit-background-clip: text （Safari 兼容）+ color: transparent（让文字透明，渐变才透出来）。漏掉最后一条，你看到的还是黑字。
• ④ accent-color 是继承的，也可以写在父容器上一次性管住一批控件。

第 5 题（场景判断）　下面四个场景，分别怎么设置 background-size 或其他属性最合适？说明理由。

① 顶部全屏 Banner，一张横幅照片要铺满，不介意左右被裁掉
② 商品卡片里的产品图，必须让人看全整张图，可以接受上下留白
③ 一张装饰性小图标，希望它按原尺寸显示在卡片左上角，不平铺
④ 一篇文章的正文段落，希望读起来不拥挤、每段首行缩进两个字

参考答案

#	场景	推荐写法	理由
①	全屏 Banner	background-size: cover	铺满容器、保持比例，宁裁不空，超出的部分裁掉
②	产品图要看全	background-size: contain	完整显示整张图、保持比例，宁空不裁
③	装饰小图标	background-repeat: no-repeat + background-position: left top + 具体尺寸（或用 <img>）	图标不该平铺，且要按需定尺寸
④	正文可读性	line-height: 1.75（无单位）+ text-indent: 2em	行高拉开不拥挤；2em 随字号缩放，正好"缩进两个字"

逐条讲清：

• ① 和 ② 是 cover 与 contain 的经典取舍 。记住口诀：cover 铺满（宁裁不空），contain 装下（宁空不裁）。选错就会出现"Banner 边上有白条"或"产品图被裁掉一半"。
• ③ ：图标这类"有明确边界、不能变形"的元素，其实更推荐直接用 <img> 标签 而不是背景图。背景图适合"装饰性、可被裁切"的图；有语义、需要 alt 的图用 <img>。
• ④ ：line-height 用无单位数字 （1.75），父元素改字号时它会自动跟着缩放；text-indent: 2em 里的 em 相对字号，所以无论字号多大，都正好缩进"两个字"。

---

下一章预告：解开"元素到底占多大地方"这个世纪难题。 这一章我们让页面变好看了，但你可能已经被一个现象反复折磨：明明给盒子设了 width: 300px，加个 padding 后它怎么就变宽了？两个上下相邻的元素，它们的 margin 怎么"粘"在一起只算一次？------这些全是盒模型 在作怪。第 10 章「盒模型与显示模式」会把元素的"占地面积"拆成四层讲透，再讲清 display 的几种模式，以及隐藏元素到底有几种方法、该用哪一种。

说一声「继续」，我们就往下走。