rel="stylesheet"缺一不可，因浏览器仅凭rel属性识别资源类型，该值大小写敏感、不可拼错或加空格，且是所有浏览器唯一广泛支持的样式表标识。
rel="stylesheet" 是 <link> 标签能生效的“开关”，漏写、拼错或加空格都会让样式彻底不加载——浏览器根本不会把它当样式表处理。
为什么 rel="stylesheet" 缺一不可
浏览器只靠 rel 属性识别资源类型。rel="stylesheet" 是唯一被所有现代浏览器和旧版 IE（包括 IE6）广泛支持的取值。写成 rel="style"、rel=" css "（带空格）、rel='stylesheet'（单引号没问题，但引号必须闭合）都可能触发解析失败。
常见现象：Network 面板里看不到 CSS 请求，或者请求发出去了但样式没应用，控制台也无报错——大概率就是 rel 没写对。
- 必须严格写成
rel="stylesheet"，大小写敏感，不能缩写、不能加前缀 -
type="text/css"可以省略，HTML5 中已是默认值，写了纯属冗余 - 不要用
rel="import"或rel="preload"替代——它们语义不同，不会触发样式解析
<link> 必须放在
把 <link rel="stylesheet" href="main.css"> 塞进 ，旧版 IE（IE6–8）会直接忽略；现代浏览器虽能加载，但会延迟应用，导致 FOUC（页面先闪白再套样式），媒体查询也可能失效。
立即学习“前端免费学习笔记（深入）”；
正确位置：紧贴 <title></title> 后或 <meta> 标签之后，确保在任何 内容渲染前就声明。
- 不要等 DOM 构建完再用 JS 插入到
document.body—— 这样仍会 FOUC - 若需动态加载，务必插入到
document.head，例如：document.head.appendChild(linkEl) - 多个
<link>的顺序 = 样式覆盖顺序，基础重置（reset）应排最前
href 路径写错，90% 的 404 都在这儿
相对路径是按 HTML 文件位置算的，不是按当前 CSS 文件位置。比如 HTML 在 /blog/post.html，href="css/style.css" 就会去找 /blog/css/style.css，而不是网站根目录下的 /css/style.css。
调试建议：打开 Network 面板，点开那个 404 的 CSS 请求，看「Initiator」列——它明确告诉你哪个 HTML 文件触发了这次请求，再对照它的路径去校验 href。
- 开发期优先用绝对路径：
href="/assets/css/main.css"，从根目录开始，稳定不易错 - 避免
../嵌套三层以上，文件一挪动就全崩 -
href="./style.css"比href="style.css"更明确，推荐加./前缀 - 路径中不要有中文、空格或特殊符号，URL 编码易出错
别用 @import 替代 <link>
@import 是 CSS 规则，不是 HTML 标签，必须写在 <style></style> 块里或另一个 CSS 文件开头。它会阻塞渲染：浏览器得先下载并解析完当前 CSS，才发起 @import 的请求，形成串行加载，比 <link> 慢得多。
更麻烦的是：@import 在 CSS 文件里无法做媒体查询条件加载，也不支持 as="style" 或 preload 等优化手段。
- 构建工具（如 Vite/Webpack）生成的 HTML 里，
<link>是自动注入的，手动再写容易重复 - 邮件模板等极少数受限环境才可能被迫用
@import，普通网页请绕道 - 如果已有
@import，迁移时注意：它不继承父文件的路径上下文，@import "base.css"是相对于被导入的 CSS 文件位置，不是 HTML
真正卡住外部样式加载的，就四件事：<link> 是否在 、rel="stylesheet" 是否完整准确、href 路径是否真能定位到文件、有没有其他 <link> 或内联样式在后面覆盖了它——其余都是干扰项。
