CSS color属性控制文字颜色，须写在style中而非HTML属性；支持十六进制、RGB、命名色、HSL；优先用class配合外部CSS，避免内联滥用；排查不生效需查继承、覆盖和内容存在性；兼顾可访问性与多端适配。
用 color CSS 属性直接改文字颜色
HTML 本身没有“设置文字颜色”的独立标签，所有颜色控制都靠 CSS 的 color 属性。写在 style 里最直白，也最容易调试。
常见错误是把 color 当成 HTML 属性写进标签，比如 <p color="red"></p> —— 这完全无效，浏览器会忽略。
- 正确写法：
<p style="color: #333;">这段字是深灰</p> - 支持颜色值类型：十六进制（
#ff6b6b）、RGB（rgb(255, 107, 107)）、命名色（steelblue）、HSL（hsl(200, 50%, 60%)） - 注意：命名色只有约 140 个被所有主流浏览器稳定支持，别用
rebeccapurple以外的冷门名做关键色
内联样式 vs 外部 CSS：什么时候该用哪个
单页临时改一两个字的颜色，用 style 内联最快；但只要涉及复用、主题切换或维护，必须抽到外部 CSS 文件里。
容易踩的坑是：用 JS 动态加 style 改颜色，却忘了清理旧样式，导致 style 属性越堆越多，最终覆盖失效或难以追踪。
- 推荐做法：给元素加 class，比如
<span class="error-text"></span>，然后在 CSS 里统一定义.error-text { color: #d32f2f; } - 如果必须用 JS 控制，优先操作
className而非拼接style字符串 - 注意：CSS 优先级规则下，
!important会破坏可维护性，99% 的场景其实不需要它
color 不生效？检查这三件事
写了 color 却没变色，大概率不是语法错，而是被其他规则盖过去了，或者目标根本不是文本节点。
- 检查是否作用在了容器元素上，但里面用了
<span></span>或伪元素（::before），它们可能继承不到或被重置 - 打开浏览器开发者工具，看 computed 标签页里
color值是否被 strike-through（划掉），点开来源就能看到哪条规则赢了 - 确认元素确实渲染了文字内容——比如
<div></div>里没文本，设再艳的颜色也看不见
移动端和高对比度模式下的颜色适配
纯黑（#000）和纯白（#fff）在 OLED 屏或夜间模式下反而伤眼，而且系统级高对比度设置（如 Windows 的“高对比度主题”）会强制覆盖页面颜色。
- 建议正文用深灰（如
#333）替代纯黑，背景用浅灰（#f8f9fa）替代纯白 - 对关键提示色（如错误、成功），加图标或文字标识，别只依赖颜色传达语义
- 可用
@media (forced-colors: active)做兜底，但别在里面写复杂逻辑，简单重置几个核心色就够了
颜色这事看着简单，但真要兼顾可访问性、多端一致、后期维护，光写对 color 远不够——重点不在“怎么设”，而在“谁来设、在哪设、设完会不会被悄悄覆盖”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
