必须把<link>放进<head>且rel="stylesheet"一个字不能少，否则浏览器不识别、不请求、不解析CSS，导致样式静默失效；它必须置于<head>内以提前阻塞渲染，避免FOUC、IE忽略及SSR hydration不一致。
必须把 <link> 放进 <head>，且 rel="stylesheet" 一个字不能少，否则框架样式根本不会加载——不是“没效果”，是浏览器压根不认它。
为什么 <link rel="stylesheet"> 一定要写在 <head> 里
浏览器解析 HTML 是自上而下流式进行的。CSS 是渲染阻塞资源，只有在 <head> 中声明的 <link rel="stylesheet"> 才会被提前识别、下载并阻塞渲染，确保首屏内容出来时已有样式。
如果把它塞进 <body>（哪怕开头），会出现 FOUC：页面先白屏/乱排版，1 秒后突然“弹”出样式；旧版 IE 直接忽略整条标签；SSR 或静态生成场景还会导致服务端输出和客户端 hydration 不一致。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 本地双击打开 HTML 时样式正常，一部署到服务器就失效（
<head>位置 + 路径双重问题） - Elements 面板能看到
<link>标签，但 Styles 面板里空空如也 - Network 面板看不到 CSS 请求记录（说明
rel漏了或拼错）
href 路径写错是 90% 的“框架样式不生效”原因
路径永远以当前 HTML 文件所在目录为基准，不是你编辑器打开的位置，也不是 CSS 文件所在的文件夹。比如 /blog/article.html 里写 href="css/bootstrap.css"，浏览器实际请求的是 /blog/css/bootstrap.css，而不是你项目根目录下的 /css/bootstrap.css。
实操建议：
- 开发时打开浏览器 Network 面板，看哪个 CSS 请求返回 404，点开它，看 “Initiator” 列直接定位是哪个
<link> - 优先用根相对路径：
href="/css/bootstrap.min.css"（开头带/） - 用 CDN 时写绝对 URL：
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"，记得加integrity和crossorigin - 构建工具（Vite/Webpack）会重写文件名（如
bootstrap.a1b2c3.css），硬编码href="bootstrap.css"必然 404 —— 必须由插件注入真实路径
多个框架 CSS 的加载顺序直接影响样式是否可用
CSS 加载是串行阻塞的，浏览器按 <link> 出现顺序依次下载、解析、构建 CSSOM。后加载的规则能覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失、重绘甚至布局错位。
推荐顺序：
- 重置类（如
normalize.css或reset.css） - 框架主样式（如
bootstrap.min.css、tailwind.css） - 自定义样式（
custom.css）
非关键样式（如打印、暗色主题）用 media 隔离：<link rel="stylesheet" href="dark.css" media="(prefers-color-scheme: dark)">，它仍会下载，但不会干扰首屏渲染。
rel 属性拼错或漏写 = 静默失效
rel="stylesheet" 是浏览器识别“这是要加载并应用的样式表”的唯一开关。漏掉、写成 rel="style"、rel="css"，甚至末尾多一个空格，浏览器都会当成普通链接处理：文件不下载、不解析、不报错、Network 面板里查无此请求。
type="text/css" 在 HTML5 中已默认，显式写上纯属冗余，还多占字节。正确写法就一行：<link rel="stylesheet" href="/css/bootstrap.min.css">。
容易被忽略的细节：如果你用的是 SSR 框架（Next.js、Nuxt、Vue SSG），<head> 外的手动 <link> 可能被服务端忽略，或与客户端 hydration 冲突——所有样式引入必须统一走框架提供的 head 管理机制，不能靠裸写 HTML。
