外部css不生效的三大主因是：rel="stylesheet"缺失或错误、link未置于head内、href路径计算错误；三者任一出错均导致cssom无法构建，样式完全不应用。
外部CSS文件不生效，八成是 rel="stylesheet" 漏了、link 放错了位置，或路径算错了基准——不是浏览器不支持，而是它根本没“认出”这是要解析的样式表。
为什么 rel="stylesheet" 不能省，且不能写错
浏览器只靠 rel 值决定是否启动 CSS 解析流程。rel="stylesheet" 是唯一被 HTML5 规范认可的标识；写成 rel="style"、rel="css" 或直接不写，标签就退化为普通超链接：文件可能下载成功（Network 面板能看到 200），但 CSSOM 不构建、样式完全不应用，控制台也无报错。
常见误操作：
- 复制别人代码时删掉了
rel属性，只留<link href="main.css"> - 用构建工具自动生成
link，但模板里写成了rel="preload"或rel="modulepreload" - 手写时拼错大小写，比如
rel="StyleSheet"（HTML 属性名不区分大小写，但值区分）
link 必须放在
浏览器解析 HTML 是流式进行的，遇到 link rel="stylesheet" 就会暂停 HTML 解析，等 CSSOM 构建完成再继续。如果把它塞进 底部，页面会先渲染无样式的 DOM（FOUC），尤其在慢网或移动端，你能明显看到文字跳变、按钮错位、响应式断点失效。
真正容易被忽略的副作用：
- 某些 SSR 框架（如 Next.js、Nuxt）依赖服务端生成的 HTML 已包含完整样式上下文，
link在中会导致 hydration 失败 - 媒体查询（如
prefers-color-scheme）在 CSS 加载前已计算完毕，延迟加载等于放弃响应时机 - 字体加载（
@font-face）若在后置 CSS 中定义，文本会先以系统字体渲染，再重绘，造成 FOIT/FOUT
href 路径怎么写才不会 404 —— 基准永远是 HTML 文件位置
相对路径（如 href="css/main.css"）的计算起点是当前 HTML 文件所在目录，不是服务器根目录，也不是当前 URL 路径。例如 HTML 在 /blog/article.html，浏览器实际请求的是 /blog/css/main.css，而非你预期的 /css/main.css。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
开发时快速验证路径的方法：
- 打开浏览器 Network 面板，找到标为
404的 CSS 请求，点击它，看 “Initiator” 列指向哪个link标签 - 右键页面源码里的
href值，选择“在新标签页中打开”，看是否能直接显示 CSS 内容 - Linux 服务器上注意大小写：
Style.css≠style.css；Windows 下不报错，部署后就挂
推荐统一用根相对路径：href="/css/main.css"（开头带 /），避免嵌套子页时疯狂写 ../../。
多个 link 的顺序和 media 属性影响首屏性能
CSS 加载是串行阻塞的：浏览器按 link 出现顺序依次下载、解析、构建 CSSOM。顺序错乱会导致样式覆盖异常、布局抖动，甚至关键样式被非关键样式覆盖。
合理组织方式：
- 关键 CSS（重置、排版、首屏组件）放最前：
<link rel="stylesheet" href="/css/normalize.css"> - 框架样式居中：
<link rel="stylesheet" href="/css/bootstrap.min.css"> - 自定义样式最后：
<link rel="stylesheet" href="/css/custom.css"> - 非关键样式用
media隔离：<link rel="stylesheet" href="/css/print.css" media="print">（打印时才加载）
注意：media="(max-width: 768px)" 这类条件仍会下载并解析 CSS，只是不应用；真想延迟加载，得用 JS 动态插入，而不是靠 media。
真正卡住引入效果的，从来不是语法有多难，而是 rel 属性有没有、link 放没放在 、路径算没算对 HTML 所在位置——这三个点任一出错，外部 CSS 就等于白写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
