css link 和 style 区别是什么_两种 css 引入方式对比

应优先使用 引入外部 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 p vs .content p），照样会被覆盖
• 不要为了覆盖某个样式，就在页面底部加个 <style></style> —— 这会让关键 CSS 推迟到 dom 构建完成后才解析，破坏渲染流水线

真正难的不是记住区别，而是判断“这段样式到底该放哪”：公共组件？抽成外部 <link>；页面独有交互反馈？用 JS 注入内联 style；临时调色？<style></style> 可以，但上线前必须移走。