rel="stylesheet"是浏览器启动CSS解析的唯一开关，漏写、拼错或位置错误会导致样式静默失效；必须严格拼写、置于<head>内、配合有效href，否则Network无请求、Computed为空。
rel="stylesheet"不是可选修饰，是浏览器启动 CSS 解析流程的唯一开关。漏写、拼错、位置不对，样式就彻底不加载——页面渲染正常，但Computed里空空如也，Network 面板里连请求都没有。
为什么rel="stylesheet"必须严格写对
浏览器只认这个字符串，大小写不敏感但拼写不能差一个字母。写成 rel="style"、rel="css"、rel="StyleSheet"（首字母大写）或带空格如 rel=" stylesheet "，都会被当作普通链接忽略。
- 它不是“建议写”，而是 HTML5 规范强制要求的语义标识
- 没有它，
href再正确也没用：不会发请求，不会解析 CSS，更不会参与层叠 - 控制台通常不报错，Elements 面板中该
<link>标签会显示为“未启用”状态 - 双引号必须包裹：
rel="stylesheet"✅，rel=stylesheet❌（某些解析器会出问题）
<link>必须放在<head>里，且不能晚于首个渲染节点
放到 <body> 或 <head> 末尾，会导致 FOUC（无样式闪屏），尤其在移动端或 SSR 场景下，hydration 可能失败。
- 它得是
<head>的直接子元素，不能包在<script>或<meta>里 - 推荐顺序：
<title>→<link rel="stylesheet" href="...">→ 其他资源 - 别用 JS 动态插入来“优化”，那只是把 FOUC 变成可控的闪屏，没解决根本问题
- 部分旧版 Safari 和 IE 会直接忽略
<body>内的rel="stylesheet"
href路径必须相对于 HTML 文件，不是 CSS 文件
路径算错不会报错，但返回 404；页面看起来“有结构”，实则颜色、布局、响应式全失效。
立即学习“前端免费学习笔记（深入）”；
-
href="css/style.css"表示 CSS 在 HTML 同级目录下的css/子目录 -
href="../assets/main.css"表示上一级目录里的assets/下 - 根相对路径更稳：
href="/css/base.css"（从网站根目录开始算） - 绝对 URL 也可用：
href="https://cdn.example.com/css/base.css"，适合 CDN 场景
别混用@import或rel="prefetch"假装替代rel="stylesheet"
它们行为完全不同：rel="stylesheet" 是并行加载、阻塞渲染、参与层叠；其他方式要么不触发样式解析，要么串行阻塞，无法等效替换。
-
<link rel="prefetch" as="style" href="a.css">→ 浏览器可能预取，但绝不会当样式表处理 -
@import url("b.css");（写在 CSS 里）→ 必须等当前 CSS 解析完才发起请求，延迟明显 -
<style>@import url("c.css");</style>→ 同样串行，且无法被预加载机制识别 -
type="text/css"已废弃，写了纯属冗余，现代浏览器默认就是它
真正容易被忽略的，是 rel 值的拼写准确性和 href 路径的基准逻辑——这两点一错，整个外部样式链就断了，而且静默无声，排查起来比报错还费劲。
