link标签必须放在head里，否则因浏览器自上而下解析会导致样式未就绪即渲染，引发闪屏或错乱；rel="stylesheet"不可省略，href路径需准确，且应优先使用link而非@import或内联样式。
link标签必须放在head里，否则样式可能不生效
浏览器解析HTML是自上而下进行的，<link> 如果写在 <body> 里，CSS 文件加载完成前，页面已开始渲染，容易出现闪屏或样式错乱。即使最终显示正常，也属于不可靠行为。
-
<link rel="stylesheet" href="style.css">必须出现在<head>内部 - 多个
<link>按顺序加载，后加载的样式会覆盖前面同名规则（层叠优先级） - 不要用
<script>动态插入<link>到<body>来“绕过”这个限制——它依然无法保证样式在首次渲染前就绪
href路径写错是最常见的404原因
控制台报 Failed to load resource: the server responded with a status of 404 ()，八成是路径问题。相对路径从当前 HTML 文件位置算起，不是从 CSS 文件、也不是从服务器根目录。
- HTML 在
/pages/index.html，CSS 在/css/main.css→ href 应为"../css/main.css" - HTML 在根目录
/index.html，CSS 在/assets/style.css→ href 应为"assets/style.css"（不加斜杠）或"/assets/style.css"（加斜杠表示绝对路径） - 开发时用浏览器「网络」面板看实际请求地址，比猜路径更可靠
rel="stylesheet"不能省略，type属性已过时
HTML5 中 type="text/css" 是冗余的，默认就是 CSS；但 rel="stylesheet" 是强制的，缺了浏览器就不当它是样式表处理。
- ✅ 正确：
<link rel="stylesheet" href="theme.css"> - ❌ 错误：
<link href="theme.css">（没 rel，被忽略） - ❌ 错误：
<link rel="style" href="theme.css">（rel 值拼错） - 现代构建工具（如 Vite、Webpack）生成的
<link>通常带as="style"和fetchpriority="high"，这是优化手段，非必需
内联样式和@import会阻塞渲染，优先用link
<style> 标签内容虽快，但无法缓存；@import 在 CSS 文件里写，会引发串行加载，拖慢整体速度。只有 <link> 支持预加载和并行下载。
立即学习“前端免费学习笔记（深入）”；
- 避免在 CSS 里写
@import "reset.css";—— 它让浏览器等主 CSS 下载完才发起下一次请求 - 不要为了“组织代码”把关键样式藏进
@import，首屏样式务必直出或通过<link>并行加载 - 如果要用 CSS 变量做主题切换，
<link>的media属性可配合prefers-color-scheme实现免 JS 切换
路径、位置、rel 属性这三处出错，占了外部 CSS 加载失败的 90% 以上。调试时先开开发者工具的「网络」页卡，盯着那个 CSS 请求的状态码和响应头，比翻文档更快定位问题。
