HTML文字颜色设置方法：html color怎么设置文字颜色【手册】

应使用 CSS color 属性而非废弃的 <font> 标签；推荐十六进制色值，注意继承与覆盖问题，用语义化 class 管理颜色并兼顾高对比度模式适配。

直接用 color CSS 属性，别碰 <font> 标签——它早被废弃，现代浏览器只当空气。

为什么 <font color="red"> 不起作用

这个标签在 HTML5 中已移除，Chrome、Safari、Firefox 都不会解析它的 color 属性。即使页面看似变色，也只是浏览器对错误标签的容错渲染，不可靠，且控制台会报 Deprecated tag 'font' 警告。

• 写 <font color="red">文字</font> → 无效，别试
• 写 <p style="color: red;">文字</p> → 有效，立刻生效
• 若必须兼容极老系统（如 IE8），也该用 style，而非复活 <font>

color 值怎么选：十六进制、RGB、HSL、命名色的区别

四种写法都合法，但适用场景不同：

• #333 或 #2E86AB：最稳，兼容所有浏览器，手写快，推荐正文主色
• rgb(51, 51, 51)：适合 JS 动态生成颜色，比如 color: rgb(${r}, ${g}, ${b})
• rgba(51, 51, 51, 0.8)：加透明度，但注意：它只影响文字本身，不改变背景，常被误用于“半透文本”效果
• hsl(210, 20%, 40%)：调色方便，比如想把所有蓝色统一变浅，改 l% 就行；但 IE9– 不支持
• tomato、steelblue：仅限原型或教学，标准名只有约 140 个，rebeccapurple 是唯一新增的，别信拼出来的名字（如 lightseagreen 可以，lightsea-green 不行）

写了 color 却没变色？优先查这三处

不是语法错，而是被覆盖、继承错位或压根没内容：

立即学习“前端免费学习笔记（深入）”；

• 打开 DevTools → Elements → 选中元素 → 切到 Computed 标签页，看 color 值是否被划掉（strike-through）。点来源就能看到哪条规则赢了
• 检查是否设在容器上，但实际文字在 ::before 或 <span> 里——伪元素和子元素可能重置了 color，或用了 inherit 却父级没值
• 确认元素真有文本节点：<div class="error"></div> 设再红的 color 也看不见；用 console.log(el.textContent.trim()) 快速验证

用 class 管理颜色比写 style 强在哪

内联样式看着快，但一上项目就失控：

• 改主题时要搜全站 style="color:，漏一个就露馅；而 .text-danger { color: #dc3545; } 改一处全更新
• 类名要语义化：.text-success 比 .green-text 好——换主题时绿色可能变成蓝，但“成功”含义不变
• 避免 !important：它会让后续调试变成猜谜。真要破权重要么提升选择器精度（如 body .header h1），要么抽成自定义属性（--text-primary: #111;）
• 移动端高对比度模式下，系统可能强制覆盖 color。加一层 @media (forced-colors: active) 兜底，比如 .text-error { color: ButtonText; }，别写死值

真正麻烦的从来不是“怎么写对 color”，而是谁来管它、在哪定义、改的时候会不会牵一发而动全身——类名设计、变量抽象、媒体查询兜底，这些才是上线前卡住人的地方。