HTML改字体颜色方法全解析

内联样式改单个文字颜色最简单

适合临时调试或只改一两个字。写在 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;，它会让颜色依赖父级，嵌套深了容易失控

颜色不是调出来就行，得看它在真实屏幕、不同光照、不同视力条件下是否真的可用。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。