css color属性控制文字颜色，html5废弃font标签；推荐内联样式或外部css类名管理，避免id和标签选择器滥用；注意继承、优先级及深色模式适配。
用 color CSS 属性直接控制文字颜色
HTML 本身没有“设置字体颜色”的独立标签，所有颜色控制都靠 CSS 的 color 属性。写在 style 里最直白，也最容易调试。
常见错误是混用过时的 <font color="red"></font> —— 这个标签在 HTML5 中已被废弃，现代浏览器虽可能渲染，但会报警告，且无法响应式、无法继承、无法用伪类控制。
- 内联样式最稳妥：
<p style="color: #333;">正文</p> - 十六进制、rgb、hsl、关键词（如
darkblue）都支持，推荐用#222或rgb(34, 34, 34)，语义清晰、兼容性好 - 别用
!important压颜色，优先理清 CSS 选择器权重
在外部 CSS 文件里统一管理文字颜色
项目一多，内联写法就失控。把颜色抽到 CSS 文件里，用类名或元素选择器批量控制，才是可持续做法。
容易踩的坑是过度依赖标签名（比如直接写 p { color: gray; }），结果所有段落被强制染色，连 <footer></footer> 里的 <p></p> 也不放过。
立即学习“前端免费学习笔记（深入）”；
- 给需要定制的文本加语义类名：
<p class="text-muted">辅助说明</p>，再在 CSS 里定义.text-muted { color: #666; } - 避免用 ID 控制颜色（
#header-title { color: blue; }），ID 复用受限，不利于组件化 - 注意继承：父元素设了
color，子元素没显式覆盖就会继承，有时看似没写却变了色，就是这个原因
遇到文字颜色不生效？先查这三件事
不是代码写错，而是被更高优先级规则或浏览器默认行为覆盖了。
典型现象：明明写了 color: red，文字还是黑色；或者只在 Chrome 有效，Safari 里失效。
- 打开开发者工具，看
color属性是否被划掉（被覆盖）或显示为灰色（未生效） - 检查是否触发了用户代理样式，比如
<a></a>标签默认有color: -webkit-link，需显式重置a { color: inherit; }或具体值 - 确认是否用了
opacity或filter: grayscale()等间接影响颜色显示的属性，它们会让color看起来“失效”
深色模式下文字颜色要适配吗？
必须适配。硬编码 color: #000 在深色背景下就看不见了，这不是“bug”，是设计断层。
现在主流做法是用 prefers-color-scheme 媒体查询，而不是 JS 检测或手动切主题类。
- 基础适配写法：
@media (prefers-color-scheme: dark) { body { color: #eee; } } - 更健壮的方式是定义 CSS 自定义属性：
:root { --text-color: #333; } @media (prefers-color-scheme: dark) { :root { --text-color: #ddd; } }，然后所有文本用color: var(--text-color); - 别忘了测试系统级深色开关开启后，
<input>、<button></button>等表单控件的文字是否可读——它们常被忽略
color 值改完，最好顺手用浏览器的“对比度检查”功能扫一眼是否达标。 
