link标签必须写在<head>中，否则触发FOUC；rel="stylesheet"不可省略且全小写；href路径需以HTML文件为基准，区分大小写；多link按顺序层叠，@import应避免。
link 标签必须写在 <head> 里，否则大概率触发 FOUC（无样式内容闪现）；rel="stylesheet" 不可省、大小写敏感；href 路径错一个字符或大小写不匹配，浏览器就静默失败——你只看到页面没样式，控制台未必报错。
为什么 link 必须放在 <head> 中
浏览器是自上而下流式解析 HTML 的。如果 link 在 <body> 里，DOM 已开始渲染，但 CSS 还没下载完，就会先用默认样式画一遍，等样式加载后再重绘——这就是 FOUC。弱网、大 CSS 文件、旧版 Safari 下尤其明显。
实操建议：
-
link标签紧贴<title>后面放，别穿插<script> - 别信“放
<body>开头也差不多”，部分浏览器（如旧版 Safari）会直接忽略<body>里的rel="stylesheet" - 动态用 JS 插入
link到<body>更不可取——它无法阻止初始闪屏
rel="stylesheet" 写错或漏掉的后果
浏览器靠 rel 值识别资源用途。rel="stylesheet" 是唯一被广泛支持且生效的取值，漏写、拼错、大小写不对（比如 REL="STYLESHEET" 或 rel="StyleSheeT"），整条 link 就只是个被下载却完全被忽略的文件。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 必须写
rel="stylesheet"，全小写，前后不能有空格 - 别写成
rel="style"、rel="css"、rel="import"（已废弃） -
type="text/css"已过时，删掉更干净；加了可能在严格模式下报 warning
href 路径怎么写才不会 404
路径错误是最隐蔽的 404 原因：浏览器不报 JS 错误，控制台可能只显示一行 “Failed to load resource”，甚至某些 WebView 根本不提示。关键在于——href 是相对于当前 HTML 文件的位置，不是相对于 CSS 文件，也不是你心里想的那个“根目录”。
实操建议：
- 本地调试优先用根相对路径：
href="/css/style.css"（开头带/），和 HTML 所在位置无关 - 用相对路径时，以 HTML 文件为基准：HTML 在
/blog/post.html，CSS 在同级style.css，就写href="style.css"；若 CSS 在/css/main.css，就得写href="../css/main.css" - 打开 DevTools → Network → 过滤
css，看请求状态码是不是200，MIME 类型是不是text/css - Linux 服务器区分大小写：
Style.css≠style.css，别靠猜
多个 link 标签的顺序影响什么
CSS 层叠规则里，“后声明者胜出”对多个外部样式表同样适用——不是按文件名、不是按体积、就是按 HTML 中 link 出现的顺序。哪怕前面的规则写了 !important，后面同选择器的普通声明也能覆盖它。
实操建议：
- 基础重置（如
reset.css）放最前 - 框架样式（如
bootstrap.css）放中间 - 项目专属样式（如
app.css）放最后，确保能可靠覆盖 - 别靠一堆
!important对抗加载顺序——这说明结构设计有问题 - 避免用
@import在 CSS 里再引入其他 CSS，它串行阻塞，比link慢得多
最容易被忽略的是路径基准点：它永远是 HTML 文件所在位置，不是服务器根目录，不是当前 CSS 文件，也不是你刚改完的路由路径。调试时盯着 Network 面板里那个 404 请求的完整 URL 看两秒，比翻三遍文档都快。
