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> 也不放过。

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

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 给需要定制的文本加语义类名：<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 值改完，最好顺手用浏览器的“对比度检查”功能扫一眼是否达标。