最常用方式是用标签引入外部CSS文件，需注意路径正确性、缓存更新和样式覆盖优先级，避免@import用于主样式引入。
如何在多个 HTML 页面中引入同一份 CSS 文件
直接用 <link> 标签引入外部样式表是最常用、最可靠的方式，所有现代浏览器都支持，且能被浏览器缓存复用。
关键不是“能不能”，而是路径写对没、是否被覆盖、有没有加载失败。
-
<link rel="stylesheet" href="css/common.css">—— 相对路径，从当前 HTML 所在目录出发找css/common.css - 若页面在子目录（如
/pages/about.html），而common.css在根目录，则应写href="/css/common.css"（开头带/表示根相对路径） - 避免用
../多层回退，容易因页面层级变化失效；统一用站点根路径更稳定 - 把
<link>放在内，且尽量靠前，防止 FOUC（内容闪动）
为什么改了 common.css 但页面没更新样式
大概率是浏览器缓存了旧的 CSS 文件，尤其开发时本地文件没加版本号或时间戳，改动后不强制刷新就看不到效果。
- 开发阶段可禁用缓存：Chrome DevTools → Network 标签页 → 勾选 “Disable cache”
- 上线前建议在
href后加查询参数实现缓存穿透，例如：href="/css/common.css?v=1.0.2" - 不要依赖 Ctrl+F5 或清空历史记录——那只是清 HTML 缓存，CSS 文件可能单独缓存更久
- 检查 Network 面板里该 CSS 文件状态码是不是
304（未修改），确认是否真加载了新内容
多个页面共用样式但个别页面要覆盖某条规则
优先级和作用域控制比“复用”本身更重要。公共样式文件只是起点，不是终点。
立即学习“前端免费学习笔记（深入）”；
- 在公共文件中避免过度具体的选择器，比如少用
div#header .nav li a，多用语义类名如.nav-link - 需要局部覆盖时，**不在公共文件里删改**，而是在页面自己的
<style></style>或独立 CSS 中用更高优先级规则覆盖，例如加body.about-page .nav-link - 慎用
!important—— 它会让后续维护变困难，尤其是多人协作时 - 如果差异较大，考虑用 CSS 自定义属性（
--primary-color）在公共文件中定义变量，各页面通过:root覆盖，更可控
用 @import 在 CSS 里导入公共样式可行吗
语法上可以，但不推荐用于主样式引入，尤其不能替代 <link>。
-
@import是 CSS 规则，必须写在 CSS 文件顶部，且会阻塞并串行加载，影响渲染性能 - 放在 HTML 的
<style></style>块里使用@import，等价于内联样式里再发一次 HTTP 请求，无缓存复用优势 - 它不支持媒体查询条件加载（
<link media="print">可以），灵活性差 - 仅适合在某个组件 CSS 文件内部，导入其强依赖的工具类（如
reset.css），且最好确保这些文件已内联或预加载
