link标签必须写在head里，否则按钮会闪一下再变样；浏览器流式解析HTML，<link>在body中会导致FOUC（无样式内容闪现），移动端更明显，旧版IE甚至忽略。
link标签必须写在里，否则按钮会闪一下再变样
浏览器解析 HTML 是从上到下流式进行的。<link> 放在 <body> 里，等于让页面先用默认样式渲染一遍，等 CSS 加载完再重绘——这就是 FOUC（Flash of Unstyled Content）。移动端尤其明显，文字跳、按钮边框闪、圆角延迟出现，甚至旧版 IE（IE6–8）直接忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<link rel="stylesheet" href="button.css">必须是<head>的直接子元素，紧贴<title>或<meta>后面写 - 别嵌套在
<script>、<noscript>或其他标签内部 - SSR 场景（如 Next.js 静态导出）下，
<head>外的<link>会导致服务端渲染无样式，客户端 hydration 时补样式，视觉跳变不可避免
rel="stylesheet" 少一个字母，CSS 就静默失效
浏览器只靠 rel 值判断是否启动 CSS 解析。漏掉 rel="stylesheet"，或者写成 rel="style"、rel="css"、rel="StyleSheet"（大小写敏感）、rel="stylesheet "（末尾空格），标签就退化为普通链接：Network 面板能看到请求发出（甚至返回 200），但 Elements 面板 Styles 栏完全空白，控制台也不报错。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查
<link>是否同时包含rel="stylesheet"和href，二者缺一不可 - 别加过时属性，比如
type="text/css"—— HTML5 中已冗余，写了不报错但没必要 - 引号必须闭合：
href=button.css（没引号）在某些解析器下会截断路径，务必写成href="button.css"
href 路径算错，404 就躲不掉
路径基准永远是当前 HTML 文件的 URL，不是你编辑器打开的目录，也不是 CSS 文件所在位置。写成 href="css/button.css"，浏览器就会从 HTML 所在路径出发找 css/ 子目录；如果 HTML 在 /blog/post.html，那实际请求的是 /blog/css/button.css，而不是你本意的根目录下 /css/button.css。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用根相对路径：
href="/css/button.css"，无论 HTML 在哪层目录都从域名根开始找 - 绝对 URL 适合 CDN：
href="https://cdn.example.com/v1.2.0/button.css"，注意协议一致（HTTPS 页面别引 HTTP 资源） - 本地开发别双击打开 HTML 文件，用
python3 -m http.server或 Vite 启服务，避免file://协议下路径解析异常 - Network 面板点开那个 404 请求，看 “Initiator” 列就能定位是哪个
<link>发起的
多个 link 标签顺序错了，样式覆盖就乱套
CSS 加载是串行阻塞的：浏览器按 <link> 出现顺序依次下载、解析、构建 CSSOM。后加载的 CSS 规则可覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失或重绘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 推荐顺序：
normalize.css（重置类）→bootstrap.min.css（框架）→custom.css（自定义） - 非关键 CSS（如打印样式、暗色主题）用
media属性隔离：<link rel="stylesheet" href="print.css" media="print">，它仍会下载，但不影响首屏渲染 - 别在 CSS 文件里用
@import引其他 CSS —— 它阻塞、串行、多一次网络往返，性能比<link>差得多
rel 属性的严格性。它们不报错、不警告，只安静地跳过，等你花半小时检查 CSS 写法、刷新十次、清缓存、换浏览器……才发现 rel 少了个字母，或者 href 多了个点。 
