正确引入外部CSS需将link标签置于head中且rel="stylesheet"不可省略，href须用根相对路径（如"/css/style.css"）或绝对URL；否则将导致FOUC、样式不生效或404。
直接用 <link> 标签在 <head> 里引入，关键就两点：rel="stylesheet" 不能少，href 路径要对。
必须放在 <head> 中
浏览器是自上而下解析 HTML 的。CSS 是渲染阻塞资源，如果 <link> 写在 <body> 里，页面会先无样式显示（FOUC），再闪一下重绘，文字跳、布局乱、媒体查询失效，移动端尤其明显。
- 所有
<link rel="stylesheet">都得塞进<head>，哪怕只有一个 - 服务端渲染（如 Next.js、Vue SSR）依赖首屏样式就绪，放错位置会导致 hydration 不一致
href 路径别写错
路径不是按当前网页 URL 算的，而是按 HTML 文件所在目录算。比如 /blog/article.html 里写 href="css/style.css"，浏览器实际请求的是 /blog/css/style.css，不是你想要的根目录下的 /css/style.css。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 开发时打开浏览器 Network 面板，看报 404 的那个 CSS 请求，“Initiator” 列能定位是哪个
<link>搞错了 - 推荐统一用根相对路径：
href="/css/style.css"（开头带斜杠） - CDN 场景可用绝对 URL：
href="https://cdn.example.com/css/main.css"，但记得配 SRI 校验
rel="stylesheet" 是生效开关
rel="stylesheet" 是浏览器识别“这是要加载并应用的样式表”的唯一标识。漏掉它，文件会被当成普通链接下载，但完全不生效。
立即学习“前端免费学习笔记（深入）”；
-
type="text/css"在 HTML5 中已默认，显式写上纯属冗余，还多占字节 - 构建工具（Vite/Webpack）通常自动注入
<link>，手动补写反而容易重复或路径出错
多个 CSS 文件要注意顺序
CSS 加载是串行阻塞的，浏览器按 <link> 出现顺序依次下载、解析、构建 CSSOM。后加载的样式规则可以覆盖前面同选择器的声明。
- 把基础样式（reset/base）放前面，组件样式放中间，主题或覆盖样式放后面
- 非关键 CSS（比如打印样式、深色模式）用
media属性隔离：<link rel="stylesheet" href="print.css" media="print"> - 避免把大文件或第三方 CSS 放在关键链路上，影响首屏渲染
