用 color css 属性是最直接可靠的方式，它是控制文本前景色的唯一标准属性，支持十六进制、rgb、rgba 和命名色，具有继承性，优先使用外部样式表而非内联样式。
用 color CSS 属性是最直接可靠的方式
HTML 本身没有专门设置字体颜色的标签（<font></font> 已被废弃且在 HTML5 中完全无效），所有现代方案都依赖 CSS。color 是控制文本颜色的唯一标准属性，作用对象是元素的前景色（即文字），不影响背景或边框。
常见错误是把 color 和 background-color 混用，或误以为写在 标签里加 text 属性还能生效——它早就不被支持了。
实操建议：
- 优先在外部样式表或
<style></style>块中写color: #333;，避免内联样式污染结构 - 颜色值可用十六进制（
#666、#ff0033）、RGB（rgb(255, 0, 51)）、RGBA（支持透明度，如rgba(0,0,0,0.7)）或命名色（darkblue） - 注意继承性：父元素设了
color，子元素默认继承，除非被更具体的选择器覆盖
内联样式 style="color: ..." 适合临时调试但别上线
虽然不推荐，但在快速验证、原型草稿或 CMS 输出受限时，style 属性确实能立刻生效。它的优先级高于外部样式表中的同名规则（除非加 !important），所以容易掩盖本应生效的 CSS。
典型翻车场景：
- 复制粘贴富文本内容后，编辑器自动塞了一堆
style="color:red"，结果全局主题色改不了 - 用 JavaScript 动态设置
element.style.color = 'blue'，后续 CSS 类切换失效（因为内联样式权重更高） - RGBA 值写成
style="color: rgba(0,0,0,0.5)"却忘了 IE8 及以下根本不识别，导致文字消失（纯黑变透明黑）
不要用已废弃的 <font color="..."></font>
这个标签在 HTML5 中已被移除，Chrome/Firefox/Edge 现代版本虽仍会渲染，但 W3C 验证器报错，部分无障碍工具和 SSR 渲染环境可能忽略它，而且无法响应媒体查询或伪类（比如 a:hover 下变色）。
如果你在老项目里看到它，迁移时注意两点：
- 不是简单替换成
style="color:..."，而应提取到 CSS 类中，例如把<font color="#c00">错误</font>改成<span class="error-text">错误</span>，再定义.error-text { color: #c00; } - 批量替换时警惕嵌套：
<font color="red"><b>加粗</b></font>中的<b></b>会继承颜色，但改成内联后若只写在<span></span>上，<strong></strong>子元素依然有效——这点反而比旧标签更可控
遇到颜色没生效？先查这三件事
90% 的“设了 color 不变色”问题不是语法错，而是被其他规则压制或作用对象不对：
- 检查是否选中了正确元素：用浏览器开发者工具（F12）点开元素，看
Computed标签页里color最终值是多少，来源是哪条规则 - 确认没有更高优先级的规则覆盖：比如
div p { color: blue; }比p { color: red; }优先级高；ID 选择器（#header）比类选择器（.text）权重高 - 留意文本是否被其他属性“盖住”：例如设置了
background-color: white但文字是浅灰，在白底上就看不见；或者用了opacity: 0.1让整个元素几乎透明
真正难调的情况，往往出在 CSS 自定义属性（--text-color）链式传递、Shadow DOM 隔离，或者框架（如 Vue 的 scoped style）做了样式封装——这些已经超出“设颜色”的基础范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
