A22. 颜色 CSS调试

2.1. 🌟 颜色属性值有多种表示方法

除了元素的位置和大小，在彩色屏幕的时代，最重要的便是显示的种种颜色了。幸运的是，CSS 提供了多种多样的颜色表示方式。

2.1.1. ⭐ 标准颜色

红色 red，橙色 orange，这些我们耳熟能详的英语单词，实际上都是 CSS 中 <color> 属性值的有效属性。这些颜色为众人所熟知，故称标准颜色（standard color）。

INFO

早期编程体系由美国主导，基本所有单词都采用美式英语。所以需要注意，颜色是 color 而非 colour，灰色是 gray 而非 grey。

例如：

<span style="color: tomato;">这是番茄色文字</span>
<span style="color: red;">这是红色文字</span>
<span style="color: khaki;">这是卡其色文字</span>

这样的颜色表示虽然直观，但范围较为有限。

读者可以尝试一下，把tomato换成自己熟悉的单词，看看浏览器认不认识它呢？

2.1.2. ⭐ RGB色彩空间

只要你使用过和色彩搭一点边的软件，对RGB表示肯定不陌生。每个颜色可以表示为红（R）、绿（G）、蓝（B）三个颜色上分量的合成，每个分量值为0~255，以恰好被 8bit 表示。

那么，在CSS中如何书写呢？我们本质上需要输入3个数字，再输出1个计算机能够理解的颜色，并且颜色和数字间是一一对应的。

答案是——函数。

rgb()就像数学中的函数一般，只需要先后填入R、G、B三个值，就可以产生CSS的合法颜色。

例如：

<p style="color: rgb(255, 0, 0);">这是红色文字</p>

读者也可以尝试修改三个数字的值，但注意不要超过 [0,255] 的整数范围，查看效果。

INFO

事实上，省略 , 也是合法的。如：

<p style="color: rgb(255 128 0);">这是橙色文字</p>

2.1.3. HSL色彩空间

手机调节屏幕色温时，是不是用色相环滑动选择？HSL用更符合人类直觉的方式描述颜色——色相(H)、饱和度(S)、明度(L)。

<div style="background-color: hsl(0, 100%, 50%);">纯红色背景</div>
<p style="color: hsl(240, 50%, 70%);">浅蓝色文字</p>

参数解析：

• 色相 H (Hue)：0~360 度色环（0 红/120 绿/240 蓝）
• 饱和度 S (Saturation)：0%（灰）→ 100%（鲜艳）
• 明度 L (Lightness)：0%（黑）→ 100%（白）

INFO

亮度/明度 L 为 50%，饱和度 S 为 100% 时，得到的便是纯色。

2.1.4. ⭐ 含有透明度的颜色

加过半透明效果吗？网页元素也能实现！就像在水彩颜料里加水，CSS中用rgba()的第四个参数控制透明度。

<div style="background-color: rgba(255, 0, 0, 0.5);">半透明红色背景</div>
<p style="color: hsla(120, 100%, 50%, 0.3);">淡绿色半透明文字</p>

WARNING

与通常认知相反，alpha 通道实际上指的是不透明度，0 完全透明，1 不透明。

核心要点：

• rgba() 在rgb基础上增加alpha通道。
• hsla() 同理，第四个参数控制透明度。

WARNING

透明度的范围是 0~1，而非 0~255！

2.1.5. 🌟 颜色的十六进制表示

RGB 总是要写三个数字，还要加上 rgb()和逗号，是否感觉有点繁琐？

由于每个颜色分量 8bit 恰好对应两位十六进制数，我们可以用十六进制进行简化。

十六进制表示法：R、G、B分量各用两位16进制表示（不够则补0），然后拼接，前面加上#。

<button style="background-color: #ffd030;">#ffd030 = rgb(255, 208, 48)</button>
<span style="color: #0f0;">#0f0 = #00ff00 = rgb(0, 255, 0) = green</span>

缩写规则：

• 当每两位相同时可简写为三位（如#ff00cc→#f0c）
• 不区分大小写（#FF0与#ff0等效）

例 1：将 rgb(128, 15, 255) 转换为十六进制表示法

解：十六进制转换 128=80，15=0f（补 0），255=ff，所以最终为#80c0ff。

例 2：将 #e70 还原为 rgb() 表示法

解：先展开缩写为 #ee7700，十六进制转十进制 ee=238, 77=119, 00=0，所以最终为 rgb(238, 119, 0)。

WARNING

忘记写#号（如直接写ff0000）会导致样式失效！

这里提供一个调色盘：https://www.sojson.com/web/panel.html，读者可以在此看见各种表示方法。

2.2. 🌟 设置字体和背景色

我们在刚才其实已经用过了这两个属性：color 和 background-color。

<p style="color: #333; background-color: skyblue;">
  深灰色文字+天蓝背景
</p>
<div style="color: hsl(30,100%,50%); background-color: rgba(0,255,255,0.3);">
  橙色文字+浅青色背景
</div>

• color设置前景色（通常是文字颜色）。
• background-color设置背景色。

2.3. ⭐ 使用开发者工具对属性的增删改查

此前，我们一直在重复“修改代码→刷新页面”这个流程，过于繁琐，不够直观。

幸运的是，浏览器的开发者工具让我们可以实时调试样式。就像 Python 的交互式命令行，所见即所得。

1. 按下F12或右键→检查，打开开发者工具。
2. 在Styles（样式）面板找到目标样式
3. 单击颜色值打开取色器
4. 勾选框可禁用某条样式
5. 双击属性值直接修改
6. 点击属性名后按下 Enter 键，即可新增属性
7. 点击属性名后按下 Backspace 键，即可删除属性。

<!-- 尝试实时修改这个div的颜色 -->
<div style="width: 100px; height: 100px; background: #f00;"></div>

TIP

开发者工具的修改不会保存到源代码，调试完记得复制回代码文件！

2.4. ⭐ 开发者工具中的"已计算"窗格

“为什么我写的样式没生效？”这是 CSS Coder 最头疼的一个问题。

别担心，浏览器通过『已计算』窗格告诉你元素最终应用的样式。

操作路径：

Elements（元素）面板 → 选中元素 → Computed（已计算）选项卡

三大功能：

1. 显示所有最终生效的CSS属性
2. 过滤搜索特定属性（如输入"color"）
3. 点击属性跳转到具体CSS规则位置

知识回顾

1. 颜色表示：标准名称 / rgb(a) / hsl(a) / 十六进制
   1. 标准名称：red 等。
   2. rgb：rgb(255, 0, 0) 等，每个分量在 [0, 255] 之间。
   3. hsl：hsl(120, 100%, 50%) 等，H 在 [0, 360] 之间，S/L 在 [0%, 100%] 之间。
2. alpha 通道（不透明度）用 0~1 小数，十六进制可简写
3. HSL 可以直观调色：
   1. H：色相，0~360，0 红，120 绿，240 蓝。
   2. S：饱和度，0% 灰，100% 鲜艳。
   3. L：亮度，
4. color 控制前景色，background-color 控制背景
5. 开发者工具中“样式”可以实时调试，“已计算”显示最终样式

课后练习

1. （单选）下面哪个写法合理并且具有透明效果？
   • A. rgba(255,0,0,0.5)
   • B. rgb(255,0,300,0.5)
   • C. hsla(0,100%,50%)
   • D. #ff0000
2. （填空）请写出“紫色”的至少三种表示方式：____, ____, ____。
3. （代码纠错）修复以下代码：

   <p style="color: rgb(240, 0, 0); background: colour: white;">
     错误示范
   </p>

4. （操作题）用开发者工具将本站顶栏改成 #FF69B4 背景色。