link标签必须放在<head>中，因浏览器流式解析时需在渲染前阻塞加载CSS以避免FOUC、媒体查询失效及SSR hydration失败；rel="stylesheet"和正确href路径缺一不可，否则静默失效。
link 标签必须放在 <head> 里，rel="stylesheet" 不能漏，href 路径得对——三者缺一，样式就静默失效，浏览器不报错，只让你页面“看起来不太对”。
为什么 link 必须写在 <head> 中
浏览器是自上而下流式解析 HTML 的。link 放在 <body> 里，等于告诉它：“先画内容，CSS 慢点来”。结果就是 FOUC：文字先用默认字体蹦出来，再跳成你设的字体；按钮位置偏移一次；媒体查询压根不触发。移动端尤其明显，首屏错位、字体加载延迟、响应式断点失效。SSR 框架（如 Next.js）还会因服务端渲染时缺失样式上下文，导致 hydration 失败。
-
link必须是<head>的直接子元素，别嵌套在<script>或<meta>里 - 顺序建议：
<title>→<link rel="stylesheet">→ 其他<script> - 别用 JS 动态插入
link来“优化”，那只是把 FOUC 变成可预期的闪屏
rel="stylesheet" 漏掉或写错会怎样
这是浏览器识别“这是要解析并应用的样式表”的唯一开关。漏掉、拼错、大小写不对（比如 rel="StyleSheet"），link 就退化为普通链接：Network 面板能看到 200 响应，Elements 面板的 Styles 栏却空空如也，控制台也不报错。
- 错误写法：
<link href="style.css">、<link rel="preload" as="style" href="style.css"> - 正确写法只有一种核心组合：
<link rel="stylesheet" href="style.css"> -
type="text/css"在 HTML5 中已默认，显式写上纯属冗余，还多占字节
href 路径怎么写才不 404
路径不是按当前网页 URL 算的，而是按 HTML 文件所在目录算。比如 /blog/article.html 里写 href="css/style.css"，浏览器实际请求的是 /blog/css/style.css，不是你想要的根目录下的 /css/style.css。
立即学习“前端免费学习笔记（深入）”；
- 开发时快速验证：右键源码里的
href值 → “在新标签页中打开”，看能否直接显示 CSS 内容 - Network 面板里找 404 请求，点开看 “Initiator” 列，直接定位到哪个
link发起的 - 推荐统一用根相对路径：
href="/css/style.css"（开头带/），避免嵌套层级带来的歧义 - 本地双击打开
file://协议时，相对路径可能被浏览器安全策略拦截，务必用live-server或vite preview测试
多个 link 标签的顺序和性能影响
CSS 加载是串行阻塞的，浏览器按 link 出现顺序依次下载、解析、构建 CSSOM。后加载的规则可以覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失或重绘。
- 推荐顺序：重置类（如
normalize.css）→ 框架（如bootstrap.min.css）→ 自定义样式（custom.css） - 非关键 CSS（比如打印样式、深色模式）用
media属性隔离：<link rel="stylesheet" href="print.css" media="print">，它仍会下载，但仅在对应场景生效 - 构建工具（Vite/Webpack）通常自动注入
link，手动补写反而容易重复或路径出错
真正容易被忽略的点是：样式是否生效，不只取决于“有没有引入”，更取决于“是否在渲染前就可用”。link 的位置、rel 属性、href 路径，三者任何一个出错，都会让样式表变成摆设——而这种错误往往没有红色报错，只有页面看起来“不太对”。
