link标签必须放在head中，否则因流式解析导致样式延迟加载、页面闪动（FOUC）或被忽略；rel="stylesheet"不可省略，href路径须准确，且应置于title之后、script之前以确保优先加载与正确覆盖。
link 标签必须放在 head 里，不是 body 里
浏览器解析 HTML 是从上到下顺序执行的，<link> 如果写在 中，可能导致样式加载延迟、页面闪动，甚至被某些严格模式的浏览器忽略。实际开发中常见错误是把 <link rel="stylesheet" href="style.css"> 直接丢在 开头或结尾，结果样式没生效，但控制台又不报错。
正确做法是确保它出现在 内，且最好在 <title></title> 之后、其他资源（如 <script></script>）之前：
<head> <meta charset="UTF-8"> <title>My Page</title> <link rel="stylesheet" href="style.css"> </head>
href 路径写错会导致 404，但控制台可能不显眼
路径错误是最常踩的坑：用相对路径时，href 的基准是当前 HTML 文件位置，不是 CSS 文件位置，也不是服务器根目录。比如 index.html 在项目根目录，而 style.css 在 css/style.css，就必须写 href="css/style.css"，而不是 href="/css/style.css"（除非你明确配置了服务器根路径）。
检查方式很简单：打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 找 style.css 这一行，看状态码是不是 200。如果是 404，点开它看 “Initiator” 和请求的完整 URL，就能反推路径该怎样改。
立即学习“前端免费学习笔记（深入）”；
-
href="style.css"→ 同目录 -
href="css/style.css"→ 子目录 -
href="../assets/style.css"→ 上级再进子目录 -
href="/style.css"→ 仅当部署在域名根路径（如https://example.com/style.css）才可靠
rel="stylesheet" 不能省略或拼错
有些人在复制代码时漏掉 rel="stylesheet"，或者误写成 rel="style"、rel="css"，浏览器就完全不会把它当样式表处理，也不会报错，只是静默忽略。这个属性是告诉浏览器“这个链接指向的是层叠样式表”，没有它，<link> 就只是一个普通外部资源引用。
另外，不要混用 <style></style> 标签和 <link>：前者用于内联样式，后者才是引入外部 CSS 文件的唯一标准方式。如果看到有人写 <link href="style.css">（缺 rel），务必补全。
加载顺序影响样式覆盖，@import 更慢更不可控
多个 <link> 按 HTML 中出现顺序加载和应用，后引入的 CSS 规则会覆盖前面同名选择器的声明。这点和 @import 不同：@import 必须写在 CSS 文件开头，且会阻塞并延迟后续样式加载，还无法被多数打包工具（如 Webpack）静态分析，容易引发 FOUC（Flash of Unstyled Content）。
所以，除非有特殊架构需求（比如主题切换依赖 CSS 层级），否则别在 CSS 里用 @import 引入另一个 CSS；所有外部样式都统一用 <link> 放在 里，按优先级从低到高排列。
真正容易被忽略的是：CSS 加载是异步的，但渲染是同步阻塞的 —— 浏览器会等所有 <link rel="stylesheet"> 下载并解析完才开始绘制页面。所以一个大而慢的 CSS 文件，会让白屏时间变长，这点比 JS 阻塞更隐蔽。
