HTML中改文字颜色必须用CSS的color属性，禁用已废弃的<font color>标签；支持十六进制、RGB、命名色、HSL等值；需注意对比度、继承性、优先级及语义化类名管理。
用 color CSS 属性直接改文字颜色
HTML 本身没有“设置字体颜色”的独立标签，所有颜色控制都靠 CSS。最常用、最直接的方式就是给元素加 color 属性。
常见错误是写成 <font color="red"> —— 这个标签早在 HTML5 就被废弃了，现代浏览器虽可能渲染，但会报警告，且不保证兼容性。
- 推荐写法：
style="color: #333;"（行内样式）或写在<style>里 - 支持的颜色值：十六进制（
#ff6b35）、RGB（rgb(255, 107, 53)）、命名色（tomato）、HSL（hsl(14, 100%, 60%)） - 注意：
color只影响文本内容，不影响背景、边框等；子元素会继承该值，除非被显式覆盖
color 和 background-color 混用时的可读性风险
设了深色文字却忘了配浅色背景，或者反过来，很容易导致文字看不见——这是上线前高频翻车点。
比如 color: white; 搭配默认白色背景，页面一刷新就“消失”。不是代码错了，是对比度崩了。
立即学习“前端免费学习笔记（深入）”；
- 检查方式：用浏览器开发者工具选中元素，看 computed 标签页里的
color和background-color实际值 - 建议搭配使用
background-color或至少用opacity做临时调试（如color: rgba(0,0,0,0.7);） - 无障碍要求：WCAG 推荐文本与背景对比度 ≥ 4.5:1（正文），低于这个值，色弱用户可能根本读不出
用 CSS 类批量控制字体颜色更安全
写一堆 style="color:..." 行内样式，后期改起来痛苦，还容易漏改。真正在项目里，应该抽成类。
比如定义 .text-primary 表示主色文字，.text-muted 表示次要灰字——语义清晰，维护成本低。
- 示例：
.text-success { color: #28a745; } .text-danger { color: #dc3545; } - 避免用
.red、.blue这类纯视觉命名，换主题时会反向绑定颜色逻辑 - 如果用 CSS 预处理器（如 Sass），可用变量统一管理颜色值，比如
$brand-red: #e74c3c;
内联样式、<style> 和外部 CSS 的优先级陷阱
同一个元素上，color 被写了好几处，最后生效的是哪条？很多人以为“后写的覆盖前写的”，其实不是。
CSS 优先级规则起作用：内联样式 > <style> 块 > 外部 CSS 文件。但如果有 !important，就会打乱顺序，埋下隐患。
- 典型翻车：外部 CSS 设了
.btn { color: blue; }，某处又加了style="color: red;"，结果按钮变红——看着正常，但后续想全局调色时发现到处都是内联色，没法批量改 - 调试技巧：在开发者工具里看 styles 面板，带“inline”标识的就是内联样式，带“element.style”就是 JS 动态加的
- 底线建议：业务代码里尽量不用
!important，更别用在color这种基础属性上；它解决的是“覆盖不了”，暴露的是“结构没理清”
颜色不是孤立存在的，它总和背景、字号、行高、语义层级绑在一起。一个 color 值改错，可能整块区域的可读性就垮了，而这种问题往往要到真机上才看得出来。
