link 标签必须放在 head 中，否则会导致 fouc；rel="stylesheet" 不可缺失，否则样式不生效；href 路径须正确，推荐绝对路径；多个 link 按顺序加载，影响层叠覆盖。
link 标签必须放在 head 中才有效
浏览器解析 HTML 是从上到下顺序进行的，<link> 如果写在 里，虽然多数浏览器仍会加载样式，但会导致页面先无样式渲染（FOUC），尤其在网速慢或 CSS 较大时明显。W3C 规范也明确要求 <link rel="stylesheet"> 只应在 内使用。
实操建议：
- 始终把
<link>放在最靠前的位置（紧随<title></title>或 meta 标签之后） - 避免用 JavaScript 动态插入
<link>到来“加载样式”，这无法阻止初始无样式的闪现 - 可通过 DevTools 的 Network 面板确认 CSS 是否在 HTML 解析早期就已发起请求
rel="stylesheet" 缺失会导致样式完全不生效
rel 属性不是可选的装饰项——没有 rel="stylesheet"，浏览器不会把该 <link> 当作样式表处理，哪怕 href 指向的是 .css 文件。常见错误是误写成 rel="style"、rel="css"，或干脆漏掉。
正确写法只有一种：
立即学习“前端免费学习笔记（深入）”；
<link rel="stylesheet" href="styles.css">
其他组合均无效：
-
<link rel="style">→ 被忽略 -
<link href="styles.css">（无 rel）→ 不加载 CSS -
<link rel="import" href="styles.css">→ 已废弃，且不触发样式应用
href 路径错误是 404 和样式空白的最常见原因
路径看似简单，但相对路径容易因当前 HTML 文件位置变化而失效。比如 href="css/main.css" 在根目录的 index.html 中能加载，但在 /blog/post.html 中就会请求 /blog/css/main.css，结果 404。
推荐做法：
- 优先用以
/开头的绝对路径（如href="/css/main.css"），从站点根目录开始定位，与 HTML 所在位置无关 - 避免用
../嵌套过深，超过两级就极易出错；若必须用相对路径，确保在不同子目录下手动验证 - 检查浏览器 DevTools 的 Network 标签页：状态码不是 200、MIME 类型不是
text/css，基本就是路径或服务器配置问题
多个 link 标签的加载顺序直接影响样式覆盖逻辑
CSS 层叠规则中，“后声明者胜出”不仅适用于同一文件内的规则，也适用于多个 <link> 引入的外部样式表——它们按 HTML 中出现的顺序依次加载并参与层叠。
这意味着：
- 基础样式（如重置、工具类）应放在前面
- 页面专属样式或主题样式应放在后面，才能可靠覆盖前面的通用规则
- 不要依赖
@import在 CSS 文件内再引入其他样式，它会阻塞并延迟后续资源加载，性能比<link>差得多
一个常被忽略的细节：如果某 <link> 加载失败（如 404 或 CORS 错误），它不会中断后续 <link> 的加载，但缺失的样式规则将永远不可用，且控制台通常只报 warning，不易察觉。
