link是唯一推荐用于生产环境的引入方式，因@import会延迟加载、引发FOUC、无法并行下载、不支持media条件加载且兼容性差；href路径须按HTML文件位置写相对或根路径，避免404。
link 是唯一推荐用于生产环境的引入方式，其他方式要么阻塞渲染、要么无法缓存、要么破坏样式优先级规则。
为什么不能用 @import 引入 CSS 文件
@import 会延迟加载 CSS，浏览器必须先下载并解析完主 CSS 文件，才会发起对 @import 中路径的请求。这意味着：页面可能先无样式渲染（FOUC），尤其在慢网或大文件下明显；无法并行加载多个样式表；不支持 media 属性做条件加载；IE6–8 对嵌套 @import 支持极差。
常见错误现象：@import url("base.css"); 写在 .header { ... } 规则之后 → 整行被忽略；路径写成相对 HTML 而非相对当前 CSS 文件 → 404。
- 必须放在 CSS 文件最开头（
@charset后、任何规则前） - 路径是相对于当前 CSS 文件位置，不是 HTML 文件
- 移动端 Safari 旧版本存在解析 bug，建议完全规避
link 标签的 href 路径怎么写才不翻车
路径错误是样式不生效的头号原因。浏览器按 HTML 文件所在位置解析 href，不是按开发者直觉。
立即学习“前端免费学习笔记（深入）”；
假设目录结构为：/index.html 和 /css/style.css：
- ✅ 正确：
<link rel="stylesheet" href="/css/style.css">（根路径，最稳） - ✅ 正确：
<link rel="stylesheet" href="css/style.css">（相对路径，HTML 在根目录时有效） - ❌ 危险：
<link rel="stylesheet" href="./css/style.css">（.在某些构建工具中会被忽略或报错） - ❌ 错误：
<link rel="stylesheet" href="style.css">（HTML 若在/blog/post.html下就 404）
性能影响：用根路径可避免构建后路径错乱；不用查询字符串（如 style.css?v=1.2）更利于 CDN 缓存命中。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
多个 link 标签的加载顺序和作用域
CSS 规则按 link 出现顺序逐个解析并应用，后加载的样式会覆盖前面同名选择器的声明（除非用 !important）。
典型使用场景：
- 基础重置：
<link rel="stylesheet" href="/css/reset.css"> - 通用组件：
<link rel="stylesheet" href="/css/components.css"> - 当前页特有样式：
<link rel="stylesheet" href="/css/article.css">
注意：media 属性不会阻止下载，只控制是否应用。例如 media="print" 的 CSS 仍会在页面加载时请求，但仅在打印预览时生效。
内联 style 和 style 标签什么时候能用
它们不是“引入外部 CSS 文件”的方式，但常被误当作替代方案。
<style> 标签适合：
- 仅当前页需要的少量样式（如某页特殊动画 keyframes）
- 服务端渲染中需首屏关键 CSS 提前注入（Critical CSS）
- 模板系统里动态拼接的样式变量（如主题色）
style 属性（内联）只该用于 JS 动态控制单个元素样式，比如 el.style.opacity = "0.5"；硬编码进 HTML 会导致维护灾难，且优先级过高，后续 CSS 很难覆盖。
容易被忽略的一点：所有内联样式都会随 HTML 一起传输，无法被浏览器单独缓存——哪怕只是改一个颜色，整页 HTML 都得重新下载。
