直接用 css 的 color 属性设置 h1～h6 颜色，如 h1 { color: #333; }，禁用无效的 html color 属性；推荐类名控制、避免行内样式和 !important；暗色模式需配合 @media (prefers-color-scheme: dark) 适配。
用 color CSS 属性直接改 h1 到 h6 的文字颜色
HTML 标题本身没有“颜色属性”，必须靠 CSS 控制。最直接的方式就是给 h1～h6 选择器加 color 声明，浏览器会立刻生效。
常见错误是写成 <h1 color="red">标题</h1>——这个 color 属性在 HTML 标准里根本不存在，浏览器直接忽略。
- 推荐写法：
h1 { color: #333; } h2 { color: #e74c3c; } - 支持所有颜色值：十六进制（
#ff6b6b）、RGB（rgb(255, 107, 107)）、关键字（darkblue）、HSL 等 - 注意优先级：如果标题被其他 CSS（比如类名或内联样式）覆盖，
color可能不生效，用浏览器开发者工具检查计算样式更可靠
给特定标题单独设色：用 class 比直接选 h1 更安全
项目里往往不止一种标题样式，比如导航栏的 h1 要蓝，文章主标题要黑，侧边栏小标题要灰——全靠标签名选中会互相干扰。
这时候必须用 class 分离语义和样式：
立即学习“前端免费学习笔记（深入）”；
- HTML 中写：
<h1 class="page-title">首页</h1> - CSS 中写：
.page-title { color: #2c3e50; } - 避免用
id：虽然也能用，但 id 是唯一标识，复用性差，也不利于组件化开发 - 别滥用
!important：它会让后续维护变困难，真正需要时再加，不是默认选项
行内样式虽快，但只适合临时调试或动态生成场景
用 style 属性写在标签里确实立竿见影：<h3 style="color: #9b59b6;">小节标题</h3>。但它绕过了样式表管理，容易失控。
适用场景其实很窄：
- 服务端渲染时根据数据动态决定颜色（比如状态色：
color: {{ status === 'error' ? '#e74c3c' : '#2ecc71' }}） - 前端调试阶段快速验证效果，确认后再挪到 CSS 文件里
- 某些 CMS 或低代码平台导出的 HTML，无法修改外部样式表时的兜底方案
长期项目里混用行内样式，后期想统一换主题或适配暗色模式，基本等于重写一遍。
暗色模式下标题颜色没变？得配合 @media (prefers-color-scheme)
现在越来越多用户开启系统级暗色模式，但纯 CSS 的 color 不会自动响应——除非你主动适配。
简单加一段媒体查询就能解决：
@media (prefers-color-scheme: dark) {
h1, h2, h3 { color: #ecf0f1; }
.page-title { color: #3498db; }
}
注意两点：
- 不要只改背景不改文字：暗色背景下用默认黑色文字会看不清
- 别用纯白（
#ffffff）：在 OLED 屏上太刺眼，#ecf0f1或#bdc3c7更柔和 - 部分老浏览器（如 IE）不支持该媒体查询，属于渐进增强，不影响基础功能
color 覆盖、CSS 自定义属性（--title-color）这些进阶点，实际项目里出现频率不高，先确保上面四条跑通再说。 
