link标签必须放在中且rel="stylesheet"不可省略，否则css虽下载但不解析；href路径需用根相对路径或绝对url；rel="stylesheet"是样式生效的唯一依据，type="text/css"可省略。
link 标签必须放在 rel="stylesheet" 不能省——漏掉它，CSS 文件照常下载，但浏览器根本不会解析样式。
为什么 link 必须写在
浏览器按 HTML 文本顺序解析，CSS 是渲染阻塞资源。如果 link 放在 里或底部：
- 页面先无样式渲染（FOUC），文字闪动、布局跳变肉眼可见
- 媒体查询（如
max-width: 768px）可能失效——样式表还没加载完，断点就错过了 - Vue/React SSR 或 Next.js 等框架的服务端预渲染会出错，hydration 时 DOM 和样式状态不一致
- 移动端尤其敏感：字体回退、按钮错位、滚动条抖动都可能由此引发
href 路径写错是 404 的主因
相对路径不是按 URL 算，而是按当前 HTML 文件所在目录算。比如 /blog/article.html 里写 href="css/main.css"，浏览器实际请求的是 /blog/css/main.css，而非你期望的 /css/main.css。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 开发时打开浏览器 Network 面板，点 404 的 CSS 请求，看 “Initiator” 列就能定位是哪个
link发起的 - 推荐统一用根相对路径：
href="/css/main.css"（开头带/） - CDN 资源用绝对 URL：
href="https://cdn.example.com/css/main.css"，但记得配 SRI（integrity属性）
rel="stylesheet" 是生效开关，type="text/css" 可删
HTML5 规范中 type="text/css" 已是默认值，显式声明纯属冗余；而 rel="stylesheet" 才是浏览器识别“这是要解析并应用的样式表”的唯一依据。
- 写成
rel="style"、rel="css"或漏掉rel，样式一律不生效 - 构建工具（Vite/Webpack）通常自动注入
link，手动补写容易重复或路径错位 - 非关键 CSS（如打印样式）可用
media隔离：<link rel="stylesheet" href="print.css" media="print">，它仍下载，但不参与首屏渲染
多个 link 的顺序直接影响样式覆盖和性能
CSS 加载是串行阻塞的：浏览器按 link 出现顺序依次下载、解析、构建 CSSOM。后加载的规则才能覆盖前面同选择器的声明。
- 推荐顺序：
normalize.css→ 框架 CSS（如bootstrap.min.css）→ 自定义样式（custom.css） - 把自定义样式放最前，重置类放最后？结果就是你的按钮颜色被 normalize 覆盖了
- HTTP/2 下多个小 CSS 文件影响不大，但
@import仍应避免——它在 CSS 内部触发串行加载，比link更慢
rel="stylesheet" 这个属性本身——它不像 href 那样报 404，也不像路径错那样有明显提示，而是静默失效：文件下载成功、控制台无报错、开发者工具 Network 里绿勾全亮，但页面就是没样式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
