应优先使用 引入外部 css，适用于多页共用、缓存优化、动态主题切换等场景，必须置于 并带 rel="stylesheet"； 仅限临时调试或极简单页；禁用 @import。
link 是引入外部 CSS 文件的标准方式，style 是在 HTML 里写内嵌样式的标签；前者适合工程化、可复用、可缓存，后者只该用于临时调试或极简页面。
什么时候该用 <link>？
当你需要多个页面共用同一套样式、想利用浏览器缓存、或者要支持暗色模式切换这类动态操作时，<link> 是唯一合理选择。
- 必须放在
中，且带上rel="stylesheet"—— 缺少这个属性，浏览器不会当它是样式表 - 支持
media属性，比如media="print"或media="(prefers-color-scheme: dark)"，实现按条件加载 - 可通过 JavaScript 动态改
link.href切换主题，例如：<link id="theme" rel="stylesheet" href="light.css"> <script> document.getElementById('theme').href = 'dark.css'; </script> - 浏览器会并行下载它引用的 CSS 文件，不阻塞 HTML 解析（但会阻塞渲染）
什么时候可以用 <style></style>？
仅限单页应用原型、内部工具页、或需要快速验证某段样式是否生效的场景。它不是“引入”，而是把 CSS 写进 HTML 里，本质是耦合。
- 写在
里最稳妥；若放在底部，可能造成 FOUC（闪白屏） - 没有
href，也不需要rel—— 它就是一段内联 CSS 代码容器 - 同权重下，
<style></style>里的规则比<link>加载的更晚解析，所以天然容易覆盖外部样式（但别依赖这点来 hack） - 无法被其他页面复用，每次加载都要重新传输整段 CSS，不走缓存
为什么不能用 @import 替代 <link>？
它不是 HTML 标签，而是 CSS 规则，只能出现在 <style></style> 块里或另一个 CSS 文件中；现代项目里它已被淘汰，只在老代码或预处理器迁移过渡期偶见。
立即学习“前端免费学习笔记（深入）”；
- 串行加载：浏览器必须先下载并解析完当前 CSS，才能开始下载
@import的文件，拖慢首屏 - 不支持
rel="preload"，也不能用 JS 动态控制 - IE5 以下完全不识别，部分旧版安卓 WebView 也有兼容问题
- 即便写成
@import url("a.css") screen and (min-width: 768px);，媒体查询也只作用于“是否应用”，不控制“是否下载”——文件照下
样式优先级和加载顺序的坑
很多人以为“后写的 <link> 一定覆盖前面的”，其实还要看解析时机和特异性。真正决定最终效果的是三件事：特异性（specificity）、源顺序（source order）、是否内联。
- 内联样式（
style="..."）优先级最高，其次是<style></style>和<link>—— 两者同属“普通样式表”，谁在 HTML 里位置靠后，谁的同权重规则就生效 - 如果
base.css在前、theme.css在后，但theme.css里用了更弱的选择器（如div pvs.content p），照样会被覆盖 - 不要为了覆盖某个样式，就在页面底部加个
<style></style>—— 这会让关键 CSS 推迟到 DOM 构建完成后才解析，破坏渲染流水线
真正难的不是记住区别，而是判断“这段样式到底该放哪”：公共组件？抽成外部 <link>；页面独有交互反馈？用 JS 注入内联 style；临时调色？<style></style> 可以，但上线前必须移走。
