1.2 颜色表示与长度单位

颜色表示与长度单位

本节摘要：颜色和单位是 CSS 声明中的"值"的两大家族。本节动手过一遍六种颜色写法（从关键词到 hsla），再厘清 px、em、rem、% 等长度单位的适用边界——单位选错，是日后布局失控的常见伏笔。

学习目标

完成本节后，你将能够：用至少四种方式表示同一种颜色并按场景选用；解释十六进制颜色的结构；区分 em 与 rem 的参照物差异；说出百分比分别相对什么计算；建立一个可复用的颜色变量习惯。

颜色的六种写法

打开编辑器，先做一个小实验：下面六条规则最终显示的是同一种红色，逐条取消注释刷新页面，确认它们的等效性。

.red-1 { color: red; }                /* 关键词 */
.red-2 { color: #FF0000; }            /* 十六进制 */
.red-3 { color: #F00; }               /* 十六进制缩写 */
.red-4 { color: rgb(255, 0, 0); }     /* RGB 函数 */
.red-5 { color: rgba(255, 0, 0, 1); } /* RGB + 透明度 */
.red-6 { color: hsl(0, 100%, 50%); }  /* 色相 饱和度 亮度 */
​

关键词（red、blue、transparent）最直观，但只有一百多个命名颜色，做不了精细设计，实际项目里几乎只用于快速原型。

十六进制（#FF0000）是工程中最主流的写法。结构是两两一组的三组数字，分别表示红、绿、蓝通道，每组取值 00 到 FF（十进制 0 到 255）。#FF0000 意思是红通道拉满、绿蓝归零。三组数字两两相同时可以缩写成三位，比如 #AABBCC 缩成 #ABC。设计师给你的设计稿上标注的颜色通常就是这种格式。

rgb() 与 rgba() 把十六进制换成了十进制，可读性更好，且 rgba 的第四个参数是透明度（0 全透明，1 不透明），做半透明遮罩、阴影时必不可少：

.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色遮罩 */
}
.shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
​

hsl() 用色相（0–360 的色环角度）、饱和度、亮度三个维度描述颜色，最符合人眼的直觉：想要"同一个蓝，稍微暗一点"，只需要把亮度从 50% 降到 40%，其他不动。做一组同色系的配色时，hsl 是最快的方式——下面这段代码生成一个从浅到深的蓝色系列：

.theme-light { background: hsl(210, 60%, 95%); }
.theme-mid   { background: hsl(210, 60%, 75%); }
.theme-main  { background: hsl(210, 60%, 50%); }
.theme-dark  { background: hsl(210, 60%, 30%); }
​

现代浏览器还支持八位十六进制（#00000080，末两位是透明度）和空格语法（rgb(0 0 0 / 50%)），见到时要认识，但不必强求使用。

动手做：一套配色方案

光认得写法还不够，来动手配一套真实可用的页面配色。目标是一个"主色 + 强调色 + 三档灰阶"的最小配色系统：

:root {
  --color-primary: #1565C0;   /* 主色：标题、链接、主按钮 */
  --color-accent: #FFB300;    /* 强调色：高亮、角标 */
  --color-ink: #212121;       /* 深灰：正文 */
  --color-muted: #757575;     /* 中灰：辅助说明 */
  --color-line: #E0E0E0;      /* 浅灰：分隔线、边框 */
  --color-bg: #FAFAFA;        /* 背景 */
}

body {
  color: var(--color-ink);
  background-color: var(--color-bg);
}
h1, h2 { color: var(--color-primary); }
.meta  { color: var(--color-muted); }
hr     { border: 1px solid var(--color-line); }
​

这里顺手用了 CSS 变量（自定义属性）：--color-xxx 定义、var() 引用。好处是改主题色时只动一处。这套"主色 + 灰阶"的结构能覆盖绝大多数页面的颜色需求，比东一个红西一个绿随手取色可控得多。

选主色时有个实用技巧：用 hsl 检查你的选择。设计稿上看起来舒服的蓝色往往是"饱和度不超过 80%、亮度在 40%–60%"的区间；全饱和（100%）的颜色大面积使用会非常刺眼，只适合小面积的强调。

绝对单位与相对单位

长度单位是 CSS 里比颜色更容易踩坑的领域，因为多数单位的"参照物"不一样。先看全家福：

px 是日常主力。它不真的是屏幕上的物理像素，而是逻辑像素，但在写边框、圆角、固定间距时最直观可控。

em 的参照物是当前字号，这带来一个经典陷阱：

.parent { font-size: 16px; }
.parent .child { font-size: 1.2em; }   /* 16 × 1.2 = 19.2px */
.parent .child .grandson { font-size: 1.2em; } /* 19.2 × 1.2 = 23px，越滚越大 */
​

嵌套使用时 em 会复利放大，这通常不是你想要的效果。

rem 把参照物固定为根元素字号，无论嵌套多深，1.5rem 永远等于根字号的 1.5 倍。它解决了 em 的复利问题，是做"与全局字号联动的间距和排版"的首选：

html { font-size: 16px; }
h1 { font-size: 2rem; }        /* 32px */
p  { font-size: 1rem;  }       /* 16px */
.card { padding: 1.5rem; }     /* 24px */
​

更妙的是用户如果在浏览器设置里调大了默认字号，rem 体系会整体跟着缩放——这是可访问性的免费午餐，而全用 px 的页面会无视用户的偏好。

% 的参照物取决于属性，这是最需要小心的：width: 50% 相对父元素宽度；padding 和 margin 的百分比相对父元素的宽度（连垂直方向也是！）；line-height: 150% 相对该元素自身的字号。同一个百分号在不同属性里参照物不同，见到时要心里有数。

vw/vh 相对视口，做全屏首屏区块很方便：height: 100vh 一行就得到满屏高度。注意移动端浏览器地址栏会让 100vh 偏大，现代方案是用 100dvh。

动手做：单位对比实验

空讲规则记不牢，做个对照实验。下面四个盒子放在同一个容器里，宽度分别用四种单位声明：

.box-px  { width: 300px;  background: #E3F2FD; }
.box-pct { width: 50%;    background: #E8F5E9; }
.box-rem { width: 20rem;  background: #FFF9C4; }
.box-vw  { width: 30vw;   background: #FCE4EC; }
​

把它们放进页面后做两个动作：第一，拖动浏览器窗口改变宽度——px 和 rem 的盒子纹丝不动，% 和 vw 的盒子跟着伸缩；第二，在浏览器设置里把默认字号从 16 调到 20——只有 rem 的盒子从 320px 变成 400px。亲眼看到参照物的差异，比背表格深刻十倍。

再补一个行高的最佳实践。行高既可以用无单位数字也可以带单位：

.good { line-height: 1.6; }   /* 推荐：各元素按自身字号计算 */
.bad  { line-height: 1.6em; } /* 陷阱：继承的是计算后的固定值 */
​

无单位的 1.6 会被子元素继承"系数"而非"结果"，每个元素按自己的字号重算，长文排版一律用它。

单位选择的实战决策

把上面的知识压成几条决策规则，日常开发直接套用：

• 边框、阴影偏移、1px 分隔线这类"装饰性细节"：用 px；
• 排版字号、与阅读节奏相关的内外边距：用 rem；
• 组件内部需要随组件自身字号缩放的间距：用 em；
• 流式布局中占父元素的比例：用 %；
• 全屏区块、视口相关的效果：用 vw/vh（或移动端的 dvh）；
• 需要按字符宽度对齐的输入框：用 ch。

一个常见的组合模式是"移动优先的双值写法"：padding: 1rem clamp(1rem, 5vw, 3rem)，中间值 clamp(最小, 首选, 最大) 让左右内边距随视口宽度在 1rem 到 3rem 之间平滑变化——这就是后面响应式布局一节的预告，先混个眼熟。

💡 动手建议：把你上一节写的第一个页面的所有间距改成 rem、颜色改成 CSS 变量，然后在浏览器里按住 Ctrl 加减号缩放页面、再到设置里调整默认字号，观察哪一种变化更符合阅读直觉。这个体验会让你从此坚定地站在 rem 一边。

⚠️ 两个高频坑：一是 em 嵌套复利——列表套列表时字号越来越大，八成是它；二是 padding 的百分比参照的是父元素宽度而非高度，想用 padding-top: 50% 做正方形时它是可行的（正因为参照宽度），但想用它控制"高度为父元素高度的一半"就行不通。

颜色的可用性底线

配色除了好看，还有一条不能踩的底线：对比度。文字颜色与背景色的对比不足，弱视用户、阳光下看手机的普通用户都会遭殃。业界通行的是无障碍标准里的对比度分级：正文要求不低于四点五比一，大号标题不低于三比一。浅灰字配白底是最常见的反面教材——#BBBBBB 配白色只有约一点六比一，屏幕上一片雾蒙蒙。

动手感受一下对比度的差距，把同一段文字换成三档颜色：

.contrast-ok   { color: #212121; }  /* 深灰：对比度约 15.9，非常清晰 */
.contrast-mid  { color: #757575; }  /* 中灰：约 4.6，勉强达标，适合辅助文字 */
.contrast-bad  { color: #BDBDBD; }  /* 浅灰：约 1.8，正文不可接受 */
​

一个实用的分工策略：正文用最深的一档，辅助说明可以用中灰，浅灰只留给禁用态和装饰性元素。另外，不要只用颜色传递信息——表单错误提示如果只把边框变红，色弱用户就漏掉了信息；加一个图标或一句文字，信息就有了双保险。这既是无障碍规范的要求，也是纯粹的界面设计常识。

暗色主题的变量方案

有了 CSS 变量，暗色主题的成本低到值得一试。思路是把整套配色定义成变量，再在特定的根类下重新赋值：

:root {
  --bg: #FFFFFF;
  --ink: #212121;
  --surface: #F5F5F5;
}
:root.dark {
  --bg: #121212;
  --ink: #E0E0E0;
  --surface: #1E1E1E;
}

body { background: var(--bg); color: var(--ink); }
.card { background: var(--surface); }
​

给页面的根元素切换 dark 类，全站配色瞬间翻转，组件代码一行不改——这就是"样式与数值分离"的红利。暗色主题有个反直觉的细节：纯黑背景配纯白文字对比过强，读久了刺眼；成熟的暗色方案用的是深灰底配浅灰字，正如上面的取值。改类的逻辑需要一点脚本，现阶段可以先用开发者工具手动给 html 元素加类来体验效果。

常见疑问解答

问：设计稿上的颜色是十六进制，我想调透明度怎么办？ 两条路：改成 rgba 写法（把十六进制换算成十进制），或直接用八位十六进制，在原值后面补两位透明度，八零 约等于半透明。前者直观，后者不用换算，团队里统一一种即可。

问：字号到底用 px 还是 rem？ 简短回答：排版用 rem，装饰用 px。展开一点：rem 跟随用户在浏览器设置的默认字号，尊重用户的阅读偏好，是可访问性的免费加分；边框、阴影偏移这类视觉细节不参与阅读缩放，用 px 更稳定。把 html 的字号当作设计基准，全站用 rem 表达层级，是最常见的工程约定。

问：em 和 rem 什么时候必须分清？ 组件化场景。一个按钮内部的图标间距希望随按钮字号缩放，用 em——它参照按钮当前字号；页面级标题的正文字号希望全局统一，用 rem——它不受任何祖先影响。记住"em 看眼前，rem 看根上"，就不会张冠李戴。

单位联动的排版节奏

单位选对之后，还能再进一步：用统一的"间距基数"给整站建立节奏感。做法是定一个基数（比如 8px 的思想，用 rem 表达就是 0.5rem），所有间距只用基数的整数倍——卡片的内边距一点五 rem、区块间距二 rem、标题下间距一 rem。视觉上的一致性来自这种"看不见的网格"，读者未必说得出原因，但能感到页面"整齐"。变量配合基数就形成了一套微型设计规范：

:root {
  --space-1: 0.5rem;   /* 8px：紧凑间距 */
  --space-2: 1rem;     /* 16px：常用间距 */
  --space-3: 1.5rem;   /* 24px：区块内边距 */
  --space-4: 2rem;     /* 32px：区块之间 */
}
.card { padding: var(--space-3); margin-bottom: var(--space-4); }
​

这套做法的好处在于"改一处、动全身"：设计评审说整体太挤，你只需要把基数从 8px 调到 9px，全站间距按比例松一档，而不必挨个改数值。字号也可以纳入同一体系（标题用基数的倍数），主题切换、密度切换都变成改几个变量的事。设计系统的起点，不过是几行变量加一条倍数纪律。

本节要点回顾

• 颜色六式：关键词、十六进制（含缩写）、rgb、rgba、hsl（及其透明度版本），日常主力是十六进制，调同色系用 hsl，做遮罩用 rgba。
• CSS 变量：--名字 定义、var() 引用，配色集中管理的基础。
• 单位看参照物：px 固定、em 看当前字号（嵌套会复利）、rem 看根字号、% 看父元素（padding 也看宽度）、vw/vh 看视口。
• 决策规则：装饰用 px、排版用 rem、比例用 %、全屏用视口单位。
• 行高用无单位数字：line-height: 1.6，避免带单位继承的陷阱。

下一章我们回到规则的开头——选择器。怎么从成百上千个元素里精确捞出你想修饰的那一个，是 CSS 真正的功力所在。