应使用 css color 属性而非废弃的 标签;内联样式适合临时调试,类选择器利于统一维护;需显式定义伪类如 :hover;注意可访问性与对比度规范。

直接用 color CSS 属性改,别碰 <font></font> 标签——它早被 HTML5 废掉了,浏览器可能不渲染,还容易和 CSS 冲突。
内联样式改单个文字颜色最简单
适合临时调试或只改一两个字。写在 style 属性里,值可以是英文名、十六进制、RGB 或 HSL:
<p style="color: #ff6b35;">这行字是橙红色</p> <span style="color: rgb(30, 144, 255)">这个蓝是 DodgerBlue</span>
注意:十六进制必须带 #,rgb() 三个数字之间用逗号,不能写成 rgb(30 144 255),否则无效。
CSS 类统一控制多处字体颜色
项目里有多个相同风格的文字(比如所有标题、所有错误提示),该用类,而不是重复写 style:
立即学习“前端免费学习笔记(深入)”;
<h2 class="title-primary">主标题</h2> <p class="error-text">出错了</p>
.title-primary { color: #2c3e50; }.error-text { color: #e74c3c; }
好处是改一处 CSS 就全变,也方便做暗色模式适配。别把颜色写死在 HTML 里,后期维护成本高得离谱。
伪类和状态颜色要单独写,hover 不会自动继承
比如想让链接鼠标悬停时变红,只写 a { color: blue; } 是不够的,:hover 必须显式声明:
a { color: #3498db; }a:hover { color: #e74c3c; }-
a:visited { color: #9b59b6; }(访问过后的颜色)
常见坑:漏写 :hover,或者写了但没加空格(比如 a:hover{} 没问题,但 a :hover{} 就变成选子元素了)。
系统默认颜色和可访问性容易被忽略
用 color: red; 看起来没问题,但色弱用户可能分不清;纯黑 #000 和纯白 #fff 在 OLED 屏上对比度过高,伤眼。实际开发中:
- 优先用 WCAG 推荐的对比度比(正文至少 4.5:1)
- 避免只靠颜色传递信息,比如“红色=错误”还得搭配图标或文字提示
- 慎用
color: inherit;,它会让颜色依赖父级,嵌套深了容易失控
颜色不是调出来就行,得看它在真实屏幕、不同光照、不同视力条件下是否真的可用。










