color属性直接设置字体颜色，支持关键字、十六进制、rgb/hsl等写法，仅作用于文本前景色，不控制背景，需注意继承性、优先级及高对比度模式下的可访问性适配。
用 color CSS 属性直接改字体颜色
HTML 本身不负责样式，改字体颜色必须靠 CSS。最常用、最直接的方式就是给元素加 color 属性，它控制的是文本内容的前景色（也就是你看到的字的颜色）。
常见错误是试图在 <font color="red"></font> 这种老式标签里硬套——现代 HTML5 已废弃 <font></font> 标签，浏览器虽可能兼容，但会被校验器报错，也不利于维护。
-
color可以写在style属性里（内联样式），比如：<p style="color: #333;">这段字是深灰</p> - 更推荐写在
<style></style>块或外部 CSS 文件中，例如：p { color: hsl(200, 100%, 40%); } - 支持多种写法：英文关键字（
red）、十六进制（#ff6b6b）、rgb/rgba（rgb(255, 107, 107)）、hsl/hsla —— 选哪种取决于是否需要透明度或方便后期调整色相
别把 background-color 和 color 搞混
新手常把背景色当文字色改，结果字“消失”了——比如给白底文字设了 color: white，或者没设 background-color 却以为 color 能影响背景。
记住：color 只管字，background-color 只管字背后那块区域。两者独立，必须分别设置。
立即学习“前端免费学习笔记（深入）”；
- 如果想让文字在深色背景上清晰可见，得同时确认：
color足够亮，且background-color不抢戏 - 用开发者工具（F12）点开元素，看 computed 样式里
color的最终值，比猜靠谱得多 - 避免用纯黑（
#000）配纯白背景——实际阅读体验不如#333或#222舒服
继承性导致“改了没反应”的真实原因
有时候明明写了 color: blue，但文字还是黑色——大概率是父元素的样式被子元素继承了，而你写的规则优先级不够，被覆盖了。
CSS 里 color 是可继承属性，也就是说，如果父容器设了 color: green，所有没显式重写 color 的子文本都会变成绿色，哪怕你只给某个 <span></span> 加了 style="color: red"，也得看这条内联样式有没有被更高优先级的规则干掉。
- 检查是否被更具体的 CSS 选择器覆盖，比如
div p span比span优先级高 - 别依赖
!important解决问题，先理清层叠顺序；真要用，也只在调试时临时加 - 行内样式（
style属性）通常比外部 CSS 优先级高，但依然可能被带!important的规则压倒
移动端和高对比度模式下颜色不是“设完就稳”
用户开了系统级高对比度模式（比如 Windows 的“高对比度主题”或 macOS 的“增加对比度”），浏览器会忽略大部分 color 值，强制使用系统指定的文本色。这不是 bug，是可访问性保障。
这意味着：你设的 color: #ff6b6b 在某些设备上根本不会生效，文字会变成系统主题色。这时候真正起作用的是语义化结构 + 合理的 contrast ratio（对比度）。
- 用工具测一下文字和背景的对比度是否 ≥ 4.5:1（小字）或 ≥ 3:1（大字），推荐 WebAIM Contrast Checker
- 避免仅靠颜色传达信息，比如“红色表示错误”，要搭配图标或文字说明
- 如果必须动态响应系统偏好，可用
@media (prefers-contrast: high)单独写适配规则
