必须用外部css文件，因其支持跨页面共享样式、便于统一维护、可被构建工具优化；需按link→visited→hover→active顺序声明伪类，确保可访问性与交互反馈，并注意路径正确性及清除冗余内联样式。
直接用外部 CSS 文件，别在每个 HTML 里重复写 <style></style> 或内联 style="color:..." —— 否则改一个颜色，得手动翻十页文件，漏改是大概率事件。
为什么必须用外部 CSS 文件
浏览器加载 HTML 时，<link rel="stylesheet" href="styles.css"> 是唯一能跨页面共享样式规则的机制。内部 <style></style> 只作用于当前文档，style 属性更是绑定到单个元素上，毫无复用性。
- 多页面共用同一套链接状态逻辑（比如
a:link蓝、a:visited灰、a:hover深蓝）时，外部 CSS 是强制统一的底线 - 团队协作中，设计师给的色值变了，你只需改
styles.css里一行，所有页面自动同步 - 如果用构建工具（如 Vite、Webpack），外部 CSS 还能被压缩、缓存、按需加载，内联或内部样式做不到
外部 CSS 中必须显式声明四个伪类
只写 a { color: #007bff; } 看似省事，但会覆盖浏览器默认的 :visited 紫色，导致用户无法分辨哪些链接点过 —— 这是可访问性问题，不是“看起来差不多”就完事。
- 顺序不能错：
a:link→a:visited→a:hover→a:active。CSS 层叠规则下，:visited写在:hover后面会导致悬停失效 -
:visited受浏览器限制：只能设color、background-color、border-color等少数属性，加text-shadow或transform会被静默忽略 - 建议保留下划线交互反馈：
a:hover { text-decoration: underline; }，纯改颜色不加视觉提示，对鼠标用户很不友好
引入 CSS 时路径和位置容易出错
<link> 标签必须放在 里，且最好在所有其他样式之前（避免被后续 <style></style> 覆盖）。路径写错是高频问题。
- 相对路径要以 HTML 文件为基准：如果
index.html和styles.css同级，就写href="styles.css"；如果 CSS 在css/目录下，就得写href="css/styles.css" - 路径中不要用中文或空格，浏览器解析可能失败；大小写敏感（
Styles.css≠styles.css） - 检查浏览器开发者工具的 Network 面板：如果
styles.css显示 404 或 “failed to load”，说明路径错了，不是 CSS 写得不对
最常被忽略的一点：外部 CSS 生效后，页面里残留的内联 style="color:red" 仍会优先于外部规则——因为内联样式的 CSS 优先级更高。上线前务必全局搜索 style=，删掉所有非必要的内联颜色设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
