外部css不生效主因是rel="stylesheet"缺失、link位置错误或href路径计算错误；必须置于head内，rel值严格区分大小写，href用根相对路径可避免404。
外部CSS不生效，八成是 rel="stylesheet" 漏了、<link> 放错了位置，或 href 路径算错了基准——不是浏览器不支持，而是它根本没“认出”这是要解析的样式表。
为什么 <link> 必须写在
浏览器解析 HTML 是流式自上而下的。<link rel="stylesheet"> 在 里，等于告诉浏览器：“先渲染 DOM，CSS 慢点来”。结果就是 FOUC（Flash of Unstyled Content）：文字闪一下、按钮跳位、响应式断点失效。移动端尤其明显，字体可能先用系统默认字体渲染，再重绘一次。
更隐蔽的问题是 SSR 场景：Next.js 或 Nuxt 服务端生成的 HTML 若不含样式上下文，客户端 hydration 会失败，导致样式错乱或交互异常。
-
<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"（大小写敏感），甚至漏掉整个属性，标签就退化为普通链接：Network 面板能看到 200，但 Elements 面板 Styles 栏为空，控制台也不报错——静默失效。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 错误写法：
<link href="style.css">、<link rel="preload" as="style" href="style.css"> - 正确写法只有这一种核心组合：
<link rel="stylesheet" href="style.css"> -
type="text/css"已冗余，现代浏览器默认就是它，写了纯属多占字节
href 路径怎么写才不 404
href 的计算基准永远是当前 HTML 文件的 URL，不是编辑器打开的目录，也不是服务器根路径。相对路径 href="css/style.css" 在 /blog/article.html 中，实际请求的是 /blog/css/style.css，而非你想要的 /css/style.css。
- 开发时快速验证：右键页面源码里的
href值 → “在新标签页中打开”，看能否直接显示 CSS 内容 - Network 面板里找 404 请求，点开看 “Initiator” 列，直接定位到哪个
<link>发起的 - 推荐统一用根相对路径：
href="/css/style.css"（开头带/），避免嵌套层级带来的歧义 - 本地双击打开
file://协议时，相对路径可能被浏览器安全策略拦截，务必用live-server或vite preview测试
多个 <link> 的顺序和 media 属性
CSS 加载是串行阻塞的：浏览器按 <link> 出现顺序依次下载、解析、构建 CSSOM。后加载的规则会覆盖前面同选择器的声明，但顺序错乱会导致意料外的样式丢失。
- 推荐顺序：
normalize.css→bootstrap.min.css→custom.css -
media不是装饰属性，写错值（比如media="screen and (min-width:768px"少个括号）会让整个<link>失效，且不报错 - 非关键 CSS（如打印样式）用
media="print"隔离，避免阻塞首屏渲染
最容易被忽略的其实是路径基准和 rel 值的严格性——它们不报错、不警告，只默默让样式消失。调试时别急着改 CSS 写法，先盯住 Network 面板里那条没出现的请求，或者出现了却返回 404 的记录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
