link标签引入css不生效的三大主因是：未置于head内导致fouc、rel="stylesheet"缺失或拼写错误、href路径基准计算错误；三者任一出错均使cssom无法构建，样式静默失效。
link标签引入CSS不生效，基本就是三件事没做对：位置错了、rel属性漏了或写错了、href路径算错了基准——浏览器不会报错，但样式就是不出现。
为什么必须放在里
浏览器从上到下解析HTML，link在
-
link必须是的直接子元素，不能嵌在<script></script>或<meta>里 - 推荐顺序：
<title></title>→<link rel="stylesheet">→ 其他<script></script> - 别用JS动态插入
link来“优化”，那只是把FOUC变成可预期的闪屏
rel="stylesheet"拼错或漏写就等于没写
这个属性不是装饰，是语义开关。浏览器只靠rel值决定是否启动CSS解析流程。rel="stylesheet"是HTML5规范唯一认可的标识。漏掉、写成rel="style"、rel="css"、rel="StyleSheet"（大小写敏感）、甚至rel="stylesheet "（末尾空格），整个link都会退化为普通链接：Network面板能看到200，Elements面板Styles栏却空空如也，控制台也不报错。
- 错误写法：
<link href="style.css">、<link rel="preload" as="style" href="style.css"> -
type="text/css"已冗余，现代浏览器默认就是它，写了纯属多占字节 - 别信
rel="alternate stylesheet"能当主样式用——那是备用主题，需JS手动激活
href路径怎么写才不404
href的计算基准永远是当前HTML文件的URL，不是项目根目录、不是CSS文件位置、也不是服务器配置路径。最常踩的坑就是凭直觉乱写。
-
href="style.css"→ 要求style.css和HTML在同一目录 -
href="css/style.css"→ 实际请求/blog/css/style.css（如果HTML在/blog/article.html） -
href="/css/style.css"→ 只有部署在域名根路径（如https://example.com/css/style.css）才有效；本地开发或子路径部署时大概率404 - Flutter Web中必须以
web/为基准：web/css/theme.css只能写href="css/theme.css"，不能写href="/css/theme.css" - 开发时快速验证：右键源码里的href值 → “在新标签页中打开”，看能否直接显示CSS内容
media属性写错会让CSS“条件性消失”
media不是装饰属性。一旦写了但值不合法（比如media="screen and (min-width:768px"少了个括号），整个link会被浏览器视为无效，CSS不加载也不报错。默认不写media，等价于media="all"，始终生效。
-
media="print"的CSS仍会在页面加载时请求，但仅在打印预览时生效 -
media不阻止下载，只控制是否应用；想真正延迟加载，得用onload或动态创建link - 避免
@import：它天然串行、阻塞、不支持预加载，现代项目里没有它的容身之地
最容易被忽略的其实是路径基准和rel属性的严格性——它们不报错，却让整个样式链静默断裂。检查时优先盯死这两点，比翻CSS规则本身更高效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
