rel="stylesheet"是浏览器加载css的唯一开关，漏写、拼错（如style、css）、缺引号或空格，或放于中，均导致样式静默失效且network无请求。
rel="stylesheet" 是浏览器识别外部 CSS 的唯一开关，漏写、拼错或放错位置，样式就根本不会加载——不是“没效果”，而是整条 <link> 被当成普通链接忽略。
为什么必须写 rel="stylesheet"？
浏览器只靠 rel 属性判断这个 <link> 是不是样式资源。不写、写成 rel="style"、rel="css"、rel= stylesheet（缺引号或末尾空格），请求压根不会发出——Network 面板里连记录都没有，控制台也不报错，极难排查。
常见静默失败现象：
- 页面完全无样式，但 HTML 结构正常渲染
-
<link>标签在 Elements 面板里存在，右键「Edit as HTML」发现它没被解析为资源节点 - 明明
href指向了正确的 .css 文件，却毫无反应
href 路径怎么写才对？
路径始终以当前 HTML 文件所在目录为基准，不是编辑器打开的文件夹，也不是 CSS 文件自己的位置。
正确写法示例：
- 同级目录：
href="style.css"或href="./style.css"（点斜杠可省略） - 子目录：
href="css/main.css"（表示 HTML 同级下有css/文件夹） - 上级目录：
href="../reset.css"（慎用多级../，移动文件易失效） - 推荐根相对路径：
href="/assets/css/theme.css"（开头/表示网站根目录）
Linux 服务器注意大小写：Style.css ≠ style.css；404 不一定代表文件不存在，也可能是路径语义错误。
<link> 必须放在
放到 中或 HTML 内容之后，会导致 FOUC（先闪白页再上样式），部分旧浏览器（如 IE6–8）直接忽略，服务端渲染时还可能引发 hydration 失败。
关键细节：
- 它不一定要紧贴
<title></title>后，但必须在第一个可能触发渲染的标签（如<h1></h1>）之前 - 不能塞在一堆
<script></script>中间——JS 执行阻塞会延迟样式加载 - 多个
<link>按 HTML 中顺序加载，后引入的同权重规则会覆盖前面的
别用 @import 替代 <link>
@import 是 CSS 规则，不是 HTML 资源加载机制。写在 <style></style> 块里或另一个 CSS 文件顶部，都会导致串行加载、阻塞后续样式计算、无法预加载、多一次网络往返。
典型问题：
- 即使
<link href="a.css">和<style>@import url("b.css");</style>同时存在，a.css仍优先生效且更早加载 -
@import在媒体查询（如print）中行为不可靠，media="print"应直接用<link>的media属性 - 现代构建工具和 CDN 都不优化
@import，它本质上是性能反模式
真正容易卡住人的，从来不是 CSS 写得对不对，而是 rel="stylesheet" 少了个字母，或者 href 路径以为“相对于当前 CSS 文件”，结果找错了层级——这两处不报错、不警告，只安静跳过，等你反复刷新、清缓存、换浏览器，最后才发现是拼写或路径基准搞错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
