rel="stylesheet"是浏览器启动CSS解析的唯一开关，必须严格小写、带引号、无空格或拼写偏差；缺漏或错误将导致样式静默失效、CSSOM无法构建、页面无样式渲染。
rel="stylesheet" 是重置 CSS 生效的唯一开关
漏掉或写错 rel="stylesheet"，哪怕路径完全正确，浏览器也只会把文件当普通链接下载，不会解析、不会构建 CSSOM、页面彻底无样式。这不是兼容性问题，是规范硬性要求——rel 值必须严格为小写 stylesheet，带引号、无空格、无拼写偏差（比如 styleSheet 或 css 都无效）。
常见误写：<link href="reset.css">（缺 rel）→ 静默忽略<link rel="reset" href="reset.css">（自定义值）→ 不触发样式加载<link rel="alternate stylesheet" href="reset.css">（备用样式）→ 默认不启用，需 JS 手动切换
重置 CSS 必须放在所有其他样式 link 之前
重置类（如 normalize.css 或 reset.css）的作用是归一化浏览器默认样式，它必须是第一个被解析的样式表。否则后续样式会基于未归一化的 UA 样式计算，导致按钮边距不一致、表单控件高度错乱等隐蔽问题。
推荐顺序（严格按此顺序写在 <head> 中）：
- <link rel="stylesheet" href="/css/normalize.css">
- <link rel="stylesheet" href="/css/bootstrap.css">（框架）
- <link rel="stylesheet" href="/css/custom.css">（项目自定义）
如果用构建工具（Vite/Webpack），注意插件注入顺序是否覆盖了手动写的重置 link；手动补写时别重复引入。
立即学习“前端免费学习笔记（深入）”；
路径写法决定重置是否真能加载到
重置 CSS 的 href 路径错误是 404 的主因，尤其在子目录页中容易翻车。浏览器始终以当前 HTML 文件所在位置为基准解析相对路径。
安全写法：
- ✅ 根相对路径：href="/css/normalize.css"（最稳，不受 HTML 所在层级影响）
- ✅ 绝对 URL（CDN）：href="https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css"（注意检查 SRI 是否配置）
- ❌ 危险相对路径：href="./css/normalize.css"（某些构建工具会忽略点号前缀）
- ❌ 错误假设：href="normalize.css"（若 HTML 在 /blog/article.html 下，请求的是 /blog/normalize.css）
开发时打开 Network 面板，点击报 404 的请求，看 “Initiator” 列就能确认是哪个 <link> 发起的。
不要用 @import 替代 link 引入重置 CSS
@import 会强制串行加载：浏览器必须先下载并解析完主 CSS 文件，才发起对 @import 内路径的请求。这意味着重置规则延后执行，FOUC（无样式闪屏）概率大幅上升，尤其在弱网下明显。
更严重的是：
- @import 不支持 media 属性做条件加载（比如只在屏幕尺寸 >768px 时加载重置）
- 路径解析基于当前 CSS 文件位置，不是 HTML 文件，极易因文件移动导致 404
- IE6–8 对嵌套 @import 支持极差，现代项目虽已不需兼容，但逻辑上仍属反模式
真正需要条件加载重置？用 media 属性：<link rel="stylesheet" href="/css/normalize.css" media="all">（all 是默认值，显式写出更清晰）。
重置 CSS 看似简单，但一旦 rel 值错、顺序错、路径错，就等于没加——页面可能渲染出来，但布局抖动、字体跳变、响应式断点失效这些“软故障”，往往比直接白屏更难排查。
