link标签必须放在中，否则因浏览器流式解析机制导致css延迟加载、fouc（无样式内容闪现）甚至被旧版ie忽略；需确保rel="stylesheet"和正确href路径，根相对路径更可靠。
link 标签必须写在 里，否则样式大概率不生效——这不是“有时出问题”，而是流式解析机制决定的必然行为。
为什么 link 必须放在
浏览器从上到下解析 HTML，遇到 <link rel="stylesheet"> 时会暂停渲染，等待 CSS 下载并解析完成后再继续。如果把它丢进 ，DOM 已经开始构建甚至绘制，样式表还没加载完，就会出现 FOUC（Flash of Unstyled Content）：页面先闪一下无样式的原始状态，再突然套上样式。弱网、高延迟设备上尤其明显。
- 即使本地开发看着“好像也行”，上线后 CDN 延迟、HTTP/2 排队、缓存失效等情况都会放大这个问题
- 开发者工具 Network 面板里能看到 CSS 请求晚于 HTML 解析完成时间点，这就是隐患信号
- 不要用 JS 动态插入
<link>来“优化首屏”——这等于主动放弃阻塞渲染机制，FOUC 几乎必然发生
href 路径写错是 404 的最常见原因
控制台不会报 JS 错误，但 Network 面板会出现 GET http:///style.css 404 这类请求失败记录，而页面只是“没样式”，线索非常隐蔽。
- 相对路径依赖当前 HTML 文件位置：比如
/blog/article.html里写href="css/style.css"，浏览器实际请求的是/blog/css/style.css，不是你本意的根目录下的/css/style.css - 推荐用根相对路径：
href="/css/style.css"，无论 HTML 在哪层目录，都从站点根开始找 - 绝对 URL 适合 CDN：
href="https://cdn.example.com/v1.2.0/main.css"，注意协议要一致（HTTPS 页面别引 HTTP 资源，会触发混合内容警告）
rel 和 type 属性不能乱省
rel="stylesheet" 是强制的，没有它，浏览器根本不当这是样式表；type="text/css" 在 HTML5 中已冗余，写了反而多余。
- ✅ 正确：
<link rel="stylesheet" href="theme.css"> - ❌ 完全无效：
<link href="theme.css">（缺rel） - ⚠️ 过时写法：
<link rel="stylesheet" type="text/css" href="theme.css">（type不必要）
多个 link 的加载顺序影响样式覆盖逻辑
CSS 层叠规则按 <link> 出现顺序生效，后加载的同名选择器会覆盖前面的。这点常被忽略，导致调试时“明明改了却没变”。
- 典型结构：
<link rel="stylesheet" href="reset.css">→<link rel="stylesheet" href="layout.css">→<link rel="stylesheet" href="theme.css"> - 如果想提前下载关键 CSS（如首屏样式），可用
<link rel="preload" as="style" href="critical.css">，但它只下载不应用，仍需配一个rel="stylesheet"的同路径<link>才真正起效 - 避免滥用
@import：它在 CSS 文件内使用，会阻塞后续规则解析，性能比<link>差得多
最容易被忽略的其实是路径和 rel 的组合有效性——href 对了但漏写 rel="stylesheet"，或 rel 对了但路径是相对路径且 HTML 深度变化了，这两种情况在多页项目中高频出现，且极难一眼定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
