link标签引入css失效的主因是rel="stylesheet"书写错误或href路径计算错误；rel值必须严格小写、完整、无多余字符，href应使用根相对路径并确保link位于head内。
link 标签引入 CSS 失效，基本就是 rel="stylesheet" 没写对、link 没放对位置，或者 href 路径算错了——不是 CSS 写得有问题，是浏览器压根没把它当样式表处理。
rel="stylesheet" 必须严格写对，大小写和空格都不能错
浏览器只认这个字符串，多一个空格（比如 rel="stylesheet "）、少一个字母、写成 rel="style" 或 rel="StyleSheet"，都会静默失效：Network 面板能看到请求成功（200），但 Elements 里 Styles 栏空白，控制台也不报错。
-
rel值必须小写、完整、无多余字符，HTML 属性名不区分大小写，但值区分 - 别从别人代码里复制时手滑删掉
rel属性，只留<link href="main.css"> - 构建工具模板里如果用了
rel="preload"或rel="modulepreload"，要手动改成stylesheet
link 必须放在 里，且不能嵌套在其他标签内
放在 里会导致 FOUC（页面先无样式渲染，再闪一下重绘），移动端尤其明显；IE6–8 直接忽略。SSR 框架如 Next.js 还可能因 hydration 不一致报错。
-
link必须是的直接子元素，不能包在<script></script>或<meta>里 - 推荐顺序：
<title></title>→<link rel="stylesheet">→ 其他<script></script> - 动态用 JS 插入
link不是“优化”，只是把 FOUC 变成可预期的闪屏
href 路径必须基于 HTML 文件位置计算，别信“相对路径很直观”
相对路径 href="css/main.css" 在 /blog/article.html 中，实际请求的是 /blog/css/main.css，不是你想要的 /css/main.css。本地双击打开 file:// 协议时，很多浏览器还会因安全策略拒绝加载。
- 开发阶段务必用本地服务器（如
python3 -m http.server或 VS Code Live Server） - 优先用根相对路径：
href="/css/main.css"，开头带/，基准是域名根目录 - 检查 Network 面板里 404 请求的 “Initiator” 列，能直接定位是哪个
link发起的 - 右键源码里的
href值 → “在新标签页中打开”，看是否能直接显示 CSS 内容
type="text/css" 可以删，media 属性写错等于关掉整个 CSS
type="text/css" 是 HTML5 中冗余属性，写了纯属多占字节；而 media 不是装饰用的，写错值（比如 media="screen and (min-width:768px" 少个括号）会让整个 link 被视为无效，CSS 不加载也不报错。
- 不写
media等价于media="all"，始终生效 - 打印样式必须显式写
media="print"，否则普通浏览下完全不生效 - 想按需加载，用
media条件或 JS 动态创建link，别用@import—— 它串行、阻塞、无法并行下载
最容易被忽略的其实是 rel 的严格性和路径基准——它们不报错，却让整个样式链静默断裂。调试时先盯死这两点，比翻 CSS 规则本身快得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
