CSS <link> 标签必须置于 <head> 中，因浏览器流式解析机制要求其阻塞渲染以构建CSSOM；rel属性须严格为"stylesheet"；href路径需正确且可访问，否则样式静默失效。
CSS <link> 标签必须放在 <head> 里，不是“建议”，而是浏览器流式解析机制决定的硬性前提——放错位置，FOUC（无样式内容闪现）几乎必然发生，且部分样式可能根本不会应用。
浏览器解析 HTML 时，<link rel="stylesheet"> 是阻塞渲染的信号
浏览器从上到下逐行解析 HTML，一旦遇到 <link rel="stylesheet">，就会立即发起 CSS 请求，并暂停 DOM 构建和页面渲染，直到该 CSS 下载完成、解析成 CSSOM、并与 DOM 合并为渲染树后才继续。
- 放在
<head>：解析器一遇到就启动加载，DOM 构建全程等待样式就绪 → 渲染树一次性生成，首屏内容带样式输出 - 放在
<body>：DOM 已构建出<h1>、<p>等节点，甚至已开始绘制文本 → 此时再加载 CSS，只能触发重绘，造成文字跳变、布局抖动、媒体查询失效 - 即使本地开发看着“好像也生效”，上线后 CDN 延迟、HTTP/2 队头阻塞、缓存失效都会让问题暴露得更明显
rel="stylesheet" 缺失或拼错会导致静默失效
浏览器只把 rel="stylesheet" 当作样式表处理；漏写、写成 rel="style" 或 rel="css"，文件照常下载，但完全不参与 CSSOM 构建——控制台无报错，Network 面板能看到 200 响应，页面就是没样式。
- 检查方法：打开 DevTools → Elements 面板，看
<head>中的<link>是否有rel="stylesheet"属性，且值完全匹配 - 注意大小写：
rel="StyleSheet"在某些旧版 Safari 中也会被忽略 - 不要依赖自动补全：编辑器可能帮你补
rel="stylesheet"，但复制粘贴时容易带空格或不可见字符
路径错误在控制台不报 JS 错误，但 Network 面板会暴露 404
href 路径写错是 404 的最常见原因，而浏览器不会抛 JS 异常，只会安静地跳过这个样式表。
立即学习“前端免费学习笔记（深入）”；
- 相对路径基于 HTML 文件所在目录计算，不是当前 URL 或服务器根目录。例如
/blog/article.html里写href="css/style.css"，实际请求的是/blog/css/style.css - 推荐使用根相对路径：
href="/css/style.css"（开头带/），避免路径嵌套导致的歧义 - 验证方式：Network 面板中筛选
css，确认请求状态码是 200，响应体是有效 CSS 规则（不是 HTML 错误页或空文件）
即使放对了位置，仍可能不生效？重点查这三件事
结构正确 ≠ 样式就绪。常见断点不在位置，而在资源链路或执行时机。
- 用
document.styleSheets查长度，再遍历每个sheet.cssRules—— 若为空或抛SecurityError，说明跨域 CSS 被浏览器策略拦截，JS 无法读取规则（但样式仍可能应用） - 检查是否用了
@import：内联<style>块里的@import url(...)是同步阻塞且无法并行下载，比<link>更慢，应避免 - 确认没有被其他样式覆盖：比如
<link>在<style>后面，而后者含!important规则，优先级更高
真正关键的不是“放 head 就万事大吉”，而是理解：浏览器靠 <head> 中的 <link> 提前发现资源、启动预连接、阻塞渲染以保样式就绪——任何绕开这个机制的操作（比如 JS 动态插入、<body> 里硬塞），都在主动放弃浏览器为你做的关键保障。
