<link> 标签必须置于 <head> 内且写全 rel="stylesheet"，否则 CSS 不加载；href 路径需正确（以 HTML 文件为基准），media 属性错误会导致静默失效。
link 标签必须写在 head 里，不能放 body 开头或中间
浏览器解析 HTML 是从上到下流式进行的，<link> 如果写在 <body> 里（哪怕只是紧贴 <body> 开始标签），CSS 文件仍会加载，但可能触发「FOUC」（Flash of Unstyled Content）：页面先以无样式状态渲染一次，等 CSS 下载完再重绘。这不是 bug，是规范行为。
实操建议：
-
<link>必须作为<head>的直接子元素，且尽量靠前（在<title>之后、<script>之前） - 不要用 JavaScript 动态插入
<link>来“优化首屏”，除非你明确接受样式延迟应用的风险 - 服务端渲染（SSR）场景下，若
<head>内容由 JS 拼接生成，要确保<link>在最终 HTML 字符串中真实存在于<head>内
rel="stylesheet" 缺失会导致链接被忽略
很多初学者只写 <link href="style.css">，漏掉 rel 属性。此时浏览器根本不会把它当作样式表处理——既不下载，也不解析，控制台也通常不报错，静默失效。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 明明路径正确、服务器返回 200，页面就是没样式
- 开发者工具的 Network 面板里看不到
style.css的请求 - Elements 面板中
<head>下能看到<link>标签，但 Styles 面板为空
正确写法只有这一种核心组合：<link rel="stylesheet" href="style.css">。其他 rel 值如 "preload" 或 "prefetch" 不会触发样式应用。
href 路径写错是 90% 的“CSS 不生效”原因
路径问题不是“对不对”，而是“相对于谁”。href 的解析基准永远是当前 HTML 文件的 URL，不是 CSS 文件位置，也不是 JS 执行时的路径。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
使用场景与参数差异：
- 绝对路径（推荐用于生产）：
href="/css/style.css"—— 从域名根开始，不受 HTML 存放位置影响 - 相对路径：
href="css/style.css"—— 相对于当前 HTML 文件所在目录；如果 HTML 在/blog/post.html，就会去请求/blog/css/style.css - 协议相对路径（已过时）：
href="//cdn.example.com/style.css"—— 现在应统一用https://
容易踩的坑：
- 本地双击打开 HTML（
file://协议），相对路径可能因浏览器安全策略失败，务必用本地服务器测试 - 构建工具（如 Vite、Webpack）常自动重写
href，但如果你手动拼接字符串（比如href="css/" + name + ".css"），构建后路径极易断裂
media 属性写错会让 CSS “条件性消失”
media 不是可有可无的装饰属性。一旦写了但值不合法（比如 media="screen and (min-width:768px" 少了个括号），整个 <link> 会被浏览器视为无效，CSS 不加载也不报错。
性能与兼容性影响：
-
media="print"的 CSS 只在打印预览时解析，不影响页面渲染性能 -
media="(max-width: 767px)"这类响应式媒体查询，CSS 文件仍会下载，只是不立即应用；切换窗口大小时，浏览器会重新评估并启用/停用 - IE8 及更早版本不支持
media查询值，只认media="all"或media="screen"这类简单关键字
最稳妥的写法是显式声明：<link rel="stylesheet" href="style.css" media="all">。省略 media 默认为 "all"，但显式写出能避免被误删或混淆。
复杂点在于：当多个 <link> 共存，且 media 条件动态变化时，浏览器不会卸载已加载的 CSS 规则，只会切换启用状态。这意味着即使你用 JS 改了 media 属性，旧规则依然留在内存里——这点很容易被忽略。
