link rel="stylesheet" 必须放<head>里，因浏览器会阻塞渲染直至CSS下载解析完成以避免FOUC；放<body>中可能导致忽略、重排或样式延迟应用。
link 是唯一可靠的方式，其他写法要么失效、要么被废弃、要么只适合调试。
为什么 link rel="stylesheet" 必须放 <head> 里
浏览器解析到 <link rel="stylesheet"> 时会阻塞渲染，直到该 CSS 下载并解析完成——这是有意为之的设计，为的是避免 FOUC（无样式闪屏）。但这个阻塞行为只在 <head> 中有效且受控；一旦放进 <body>，部分老浏览器（如 IE6）直接忽略，现代浏览器虽能加载，却可能触发重排或延迟样式应用，导致布局跳动。
- 路径正确但页面白屏几毫秒 → 检查是否误放在
<body>底部 - 控制台没报错但样式不生效 → 看 Network 面板里该 CSS 请求是否 status 200，还是被当成普通链接跳过
-
rel属性拼错成rel="style"或漏写 → 浏览器完全不识别，请求发出去也当废链处理
href 路径怎么写才不 404
路径始终以 HTML 文件所在位置为基准，不是以 CSS 文件、也不是以服务器根目录。本地双击打开（file:// 协议）和服务器访问（http://localhost）对 /css/main.css 的解析完全不同：前者会去找磁盘根目录（比如 C:/css/main.css），后者才找网站根目录。
- ✅ 推荐用根相对路径：
href="/css/main.css"（服务器环境稳，构建工具友好） - ✅ 简单项目可用相对路径：
href="css/main.css"（前提是 HTML 在网站根目录） - ❌ 避免
./css/main.css：某些构建流程（如 Vite、Webpack dev server）会忽略点号前缀，或导致热更新异常 - ❌ 绝对 URL 如
//cdn.jsdelivr.net/xxx.css在file://下会尝试用file://加载，直接失败
别碰 @import，它不是 HTML 加载机制
@import 是 CSS 规则，不是 HTML 标签。它必须写在 CSS 文件最开头（@charset 后、任何选择器前），且路径是相对于该 CSS 文件位置，不是 HTML 文件。更关键的是：它串行执行——浏览器得先下载并解析完主 CSS，才会发起 @import 的请求，极易引发 FOUC，还无法被预加载器识别、不支持 media 条件加载。
立即学习“前端免费学习笔记（深入）”；
- 常见翻车点：
@import url("base.css");写在.header { }后面 → 整行被忽略 - 移动端 Safari 旧版本有解析 bug，遇到嵌套
@import可能静默失败 - 就算你硬要用，也只允许出现在 CSS 文件里，不能塞进
<style>块中（<style>@import "x.css";</style>是无效的）
media 属性不是摆设，但写错就等于没写
media 用于条件加载，比如 media="print" 让样式只在打印时生效，media="screen and (min-width: 768px)" 控制桌面端样式。但它依赖两个前提：一是 rel="stylesheet" 必须存在，二是该 <link> 放在 <head> 中。如果写成 media="all" 或干脆不写，就退化为默认行为。
- 写
media="screen"却在手机上调试 → 样式可能不加载（取决于 UA 判断） - 想做响应式拆分，却把
mobile.css和desktop.css都设成media="all"→ 两者都加载，白耗带宽 -
media不影响文件是否请求，只影响是否应用；即使不匹配，浏览器仍会下载（除非用preload+as="style"显式控制）
最容易被忽略的其实是协议差异：file:// 下所有带斜杠的路径都指向磁盘根，而开发者工具 Network 面板里看到的请求 URL 才是真实发起的地址——盯住它，比猜路径靠谱得多。
