HTML5中改字体颜色应使用CSS color属性，禁用废弃的<font>标签；内联样式style="color: red"适用于单元素调试，类选择器更利于批量管理，链接需按LVHA顺序设置伪类颜色，并注意路径、缓存及浏览器兼容性。
直接用 color CSS 属性，别碰 <font> 标签——它在 HTML5 里已被废弃，浏览器可能忽略，或未来某天彻底失效。
内联样式改单个元素颜色最直白
适合调试、临时改一处，写在元素的 style 属性里就行：
-
color值别加引号：style="color: red"✅，style="color: 'red'"❌ - 十六进制必须合法：
#ff0000✅，#f000或#GGG❌（后者根本不是颜色） - RGBA 透明色在 IE 中不支持，如果要兼容旧环境，得 fallback：
color: #333; color: rgba(51, 51, 51, 0.8) - 内联样式优先级最高，会盖掉 class 或外部 CSS，改完没反应？先检查有没有其他
style写在同个标签上
用 class 控制多处文字颜色更可控
避免重复写 style，也方便批量调整：
- HTML 里加类名：
<p class="error">出错了</p> - CSS 里定义：
.error { color: #d32f2f; } - 注意优先级：类选择器
.error比标签选择器p强，但比内联style弱 - 别滥用
!important：比如.error { color: #d32f2f !important; }看似能压倒一切，但后续谁想覆盖它就得再加!important，恶性循环 - 如果用了 Bootstrap 或 Tailwind 这类框架，它的
a、p默认色可能已设好，你的.error要生效，得确保选择器足够明确（比如p.error）
链接文字颜色要用伪类分状态写
只写 a { color: blue; } 不够——用户点过、悬停、点击瞬间的颜色都不同：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 未访问：
a:link { color: #1a5fb4; } - 已访问：
a:visited { color: #6a1b9a; } - 鼠标悬停：
a:hover { color: #0d47a1; } - 点击时：
a:active { color: #000; } - 顺序不能乱：LVHA（link → visited → hover → active），否则
:hover可能被:visited盖掉 - 别漏掉
:visited的限制：出于隐私考虑，浏览器只允许它设有限的 CSS 属性（color、background-color等），不能读取真实访问状态
外部 CSS 文件路径和缓存最容易翻车
代码明明写了，页面却没变色，八成是这两处卡住了：
- 路径写错：
<link rel="stylesheet" href="css/theme.css">但文件实际在assets/css/theme.css，控制台会报net::ERR_ABORTED - Linux 服务器区分大小写：
Theme.css和theme.css是两个文件，本地开发可能不报错，一上线就失效 - 改了 CSS 却没刷新效果：浏览器缓存了旧文件，Ctrl+Shift+R 强制刷新，或临时禁用缓存（开发者工具 → Network → Disable cache）
- 想用 CSS 变量统一管理颜色？可以：
:root { --text-primary: #111; }+p { color: var(--text-primary); }，但 IE 完全不支持，得看项目兼容要求
真正麻烦的不是写哪一行 color，而是搞清它被谁继承、被谁覆盖、在哪一级生效。打开浏览器开发者工具，点中元素，看「Computed」面板里的 color 值从哪来，比猜强十倍。
