rel="stylesheet"必须存在且全小写、href路径可访问并返回text/css、link标签必须为直接子元素，缺一即导致chrome/firefox/safari/edge静默失效。
link 标签引入 CSS 要兼容主流浏览器，核心不是“加不加”，而是 rel="stylesheet" 必须存在、href 路径可解析、且标签必须在 内——漏一个，Chrome/Firefox/Safari/Edge 都会静默失效，不报错但样式全丢。
rel="stylesheet" 缺失或大小写错误就等于没写
浏览器只认 rel="stylesheet"（全小写，严格匹配），其他任何变体都会被忽略：
-
<link href="style.css">：缺rel→ 当普通链接处理，Network 里能看到 200，Elements 里 Styles 栏空 -
<link rel="StyleSheet" href="style.css">：大小写错 → 不触发 CSSOM 构建 -
<link rel="import" href="style.css">：已废弃，控制台警告，样式不加载
href 路径必须可访问且返回 text/css
路径算错或服务器配置不对，CSS 就不会被解析：
- 相对路径以 HTML 文件位置为基准，不是编辑器目录；
href="css/style.css"在/blog/article.html中请求的是/blog/css/style.css - 推荐用根相对路径：
href="/css/style.css"，避免嵌套层级歧义 - 本地双击
file://打开时，多数浏览器会拒绝加载外部 CSS（CORS + MIME 限制），必须用python3 -m http.server或 VS Code Live Server 启服务 - Network 面板中检查 CSS 请求的
Content-Type：必须是text/css；若为text/plain或application/octet-stream，样式一定不生效
必须放在 里，且不能嵌套在其他标签内
放错位置会导致 FOUC（样式闪现）、布局跳变、移动端字体重绘，甚至 SSR hydration 失败：
-
<link>必须是的直接子元素，不能包在<script></script>或<meta>里 - 放在
里：浏览器先渲染无样式的 DOM，再加载 CSS，造成肉眼可见的抖动 - 顺序建议：
<title></title>→<link rel="stylesheet">→ 其他<script></script>，避免阻塞关键渲染路径
多个 link 的顺序和 media 属性影响实际效果
浏览器按 link 出现顺序串行加载并构建 CSSOM，顺序错乱会破坏样式覆盖逻辑：
- 推荐顺序：
reset.css→framework.css→custom.css，确保自定义规则能覆盖通用规则 -
media属性不影响是否下载（现代浏览器仍会发请求），但决定是否应用；media="print"的 CSS 不参与屏幕渲染，但打印时生效 - 避免
@import：它强制串行加载，比link多一轮 HTTP 请求，且无法被预加载或并行优化
最容易被忽略的点是：你以为路径对了，其实服务器没配 Content-Type: text/css；你以为放 里了，其实被某个构建插件自动挪到了 底部。上线前务必打开 Network 面板，逐个点开 CSS 请求，看 Initiator 和 Response Headers。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
