你的网页比你想象的传达得更多——尤其是在颜色方面
文本色调能为品牌定下基调，从大胆自信到冷静可信。无论吸引顾客还是建立品牌形象，合适的文本颜色都至关重要。
CSS 让你只需几行代码即可控制网站文字外观，无需设计学位或开发团队。下面将逐步介绍如何在 CSS 中更改文本颜色。
什么是 CSS？
CSS（层叠样式表）是控制网页外观的代码，涵盖文本颜色、元素间距等。修改 CSS 会改变页面视觉效果，但底层内容保持不变。
CSS 遵循“级联”原则：样式规则向下流动并叠加。例如，“所有文本设为黑色”与“标题设为蓝色”同时存在时，浏览器会对标题应用更具体的蓝色规则。若再添加“首页标题设为红色”，该最具体指令将仅作用于对应元素。这种从一般到具体的分层机制，为浏览器提供了清晰的样式路线图。
HTML 与 CSS：有什么区别？
HTML（超文本标记语言）构建网页结构，定义标题、列表、链接和图像等内容。无样式的 HTML 页面如同 Craigslist 广告般基础平淡。
CSS 则为结构赋予样式，设定颜色、字体、间距、对齐及布局。例如，将段落设为蓝色或将标志居中，均需依赖 CSS。
两者协同工作：HTML 搭建骨架，CSS 穿上符合品牌风格的“外衣”。
CSS 文本颜色选项
- HTML 颜色名称
- 十六进制代码
- RGB 值
- HSL 颜色
根据对精确度或可读性的需求，可通过多种方式定义文本颜色：
HTML 颜色名称
使用浏览器支持的英文颜色名（如 red、blue、darkgreen）兼容性最佳，适合简单场景或追求代码可读性。共有超 140 种公认名称，包括金黄色、深红、浅灰和丽贝卡紫等。
示例：将所有段落设为蓝色
p {
color: blue;
}
十六进制代码
以 # 开头后跟六位字母数字字符，分别代表红、绿、蓝强度。该方法紧凑精确，适用于需严格匹配品牌色的场景。
示例：H1 标题设为亮橙色
h1 {
color: #ff5733;
}
RGB 值
用 0–255 的数值表示红、绿、蓝强度。
示例：H2 标题设为暖红褐色
h2 {
color: rgb(255, 87, 51);
}
RGBA 增加 alpha 通道（透明度），取值 0（全透明）至 1（不透明）。示例：50% 透明度的暖红色
h2 {
color: rgba(255, 87, 51, 0.5);
}
注：数字屏幕采用基于光的加色混合模式，三原色为红、绿、蓝（RGB），而非颜料中的红黄蓝。通过调节 RGB 光强可生成数百万种颜色。
HSL 颜色
HSL 代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）。色相为色轮角度值，饱和度表颜色强度，亮度表明暗程度。此方式便于在保持品牌色相不变的前提下微调明暗或鲜艳度。
示例：完全饱和、60% 亮度的红橙色段落
p {
color: hsl(12, 100%, 60%);
}
HSLA 同样支持 alpha 透明度，适用于分层或微妙视觉效果。示例：60% 透明度的红橙色
p {
color: hsla(12, 100%, 60%, 0.6);
}
如何在 CSS 中更改文本颜色
- 选择编码方法
- 确定默认颜色
- 编写 CSS 规则
自定义 CSS 改色仅需两步：确认默认文本颜色，再编写覆盖规则。
1. 选择编码方式
CSS 规则通常置于 <style> 标签或外部文件中，也可内联于单个页面（仅限该页生效）。浏览器按优先级级联样式：更具体或位置靠后的规则优先生效。
2. 确定默认颜色
默认文本色通常为黑色。可通过浏览器开发者工具检查元素当前颜色，或查阅主题/CSS 文件确认已有规则。示例：
body {
color: #000000; /* 黑色 */
}
3. 编写 CSS 规则
针对目标 HTML 元素（如标题、段落或类）编写 color 属性。Shopify 商家可通过主题自定义 CSS 应用相同规则。
颜色名称示例：
h1 {
color: blue;
}
RGB 示例：
p {
color: rgb(255, 87, 51);
}
如何在 CSS 中更改文本背景颜色
使用 background-color 属性即可设置文本背景色。
颜色名称示例：
p {
background-color: yellow;
}
RGB 示例：
span {
background-color: rgb(200, 200, 255);
}
务必确保前景色与背景色对比度充足以提升可读性。示例：黑底白字
p {
color: white;
background-color: black;
}
CSS 文本颜色与无障碍性
并非所有颜色组合都符合网络无障碍标准。视力障碍、色盲或学习障碍用户可能难以辨识低对比度文本（如白底浅灰），或无法仅凭红/绿色区分状态信息。应优先保障高对比度与清晰呈现。
推荐工具：
- WebAIM 对比度检查器：验证是否符合 WCAG 标准
- Chrome DevTools：实时检查元素颜色
- ColorZilla 扩展：分析网页配色
WCAG 建议：
- 普通文本对比度 ≥ 4.5:1
- 大文本（≥18pt 或 ≥14pt 粗体）对比度 ≥ 3:1
- 不可仅依赖颜色传递信息
建议在亮色与暗色模式下均进行测试（可通过 Chrome DevTools 模拟）。避免白底浅灰（1.6:1），改用高对比组合（如 15.3:1）：
p {
color: #1a1a1a; /* 近黑色文本 */
background-color: #ffffff; /* 白色背景 */
}
辅助信息提示：除颜色外，应结合图标或文字标签传达含义。示例：
<p>
<span style="color: red;">⚠️</span>
<strong>错误：</strong>您忘记输入姓名了。
</p>
CSS 更改文本颜色的常见问题解答
哪个 CSS 属性用于配置文本颜色？
使用 color 属性。适用于 <p>、<h1> 等所有含文本的 HTML 元素。如需精准控制，可选用 RGB、HSL 或十六进制代码。
如何在 CSS 中更改文本样式？
通过 font-size、font-weight、font-family 等属性调整文本外观，编码方式与颜色设置相同。
我可以用 CSS 更改文本本身吗？
CSS 仅改变文本显示方式，不能修改实际内容。真实文本始终存储于 HTML 文档中。