内联样式仅用于临时覆盖、服务端动态注入或JS动画等特定场景；嵌入式样式适用于微前端、静态单页及轻量响应式；外链式是绝大多数项目的首选，具备缓存、复用等优势。
内联样式只该用在「临时覆盖」或「服务端动态注入」场景，嵌入式（<style></style>）适合单页应用的局部隔离样式，外链式（<link rel="stylesheet">）才是绝大多数项目的唯一合理选择。
什么时候必须用内联样式？
内联样式本质是强制覆盖，它不参与 CSS 层叠计算中的「来源权重」博弈，而是靠优先级硬压。但这也意味着它无法被 !important 之外的任何规则反向覆盖——除非 JS 直接改 element.style。
- 服务端渲染时动态生成的「一次性」样式，比如邮件模板中为兼容老客户端而写的
style="margin:0;padding:0;" - JS 动画过程中需要频繁更新的属性，如
transform、opacity，避免触发重排（此时用element.style.transform = "translateX(10px)"比 class 切换更可控） - 调试时临时加样式验证效果，但上线前必须删掉
别用它写颜色、字体、布局——写了就等于放弃维护性。
<style></style> 嵌入式只适合这三类情况
嵌入式样式写在 里的 <style></style> 标签中，作用域是整个 HTML 文档，但它没有外部文件的缓存优势，也不能被多个页面复用。
立即学习“前端免费学习笔记（深入）”；
- 微前端子应用独立打包，且不允许外链 CSS（例如某些 CMS 插件沙箱环境）
- 静态单页（如 landing page），全站就一个 HTML，没拆分必要，且不想多发一次 HTTP 请求
- 需要基于
@media或@supports做轻量响应式适配，又不值得单独建 CSS 文件
注意：<style></style> 里不能用 @import，也不支持 scoped（那是 Vue 的扩展语法，原生 HTML 不认）；如果用了 id 或 class 选择器，和外链 CSS 冲突时，照样按层叠规则走，不是“一定生效”。
外链 CSS 是默认选项，但引入方式有坑
外链式通过 <link rel="stylesheet" href="xxx.css"> 引入，浏览器会并行加载、缓存复用、支持 HTTP/2 多路复用——这些是内联和嵌入完全不具备的。
- 确保
href路径正确：相对路径以 HTML 文件位置为基准，不是以 CSS 文件位置；推荐用根相对路径（/css/main.css）或绝对 URL - 不要把
<link>放在里：部分浏览器会阻塞渲染，甚至触发重绘；必须放在中 - 避免在同一个页面重复引入同一份 CSS：即使路径不同（如
./style.css和../css/style.css），浏览器也当两个资源处理，造成冗余
如果发现样式没生效，先检查 Network 面板里这个 CSS 文件是否返回 200，有没有 404 或 MIME 类型错误（比如服务器返回 text/plain 而不是 text/css）。
优先级不是万能解药，层叠逻辑才决定最终效果
很多人以为「内联 > 嵌入 > 外链」就能控制一切，其实这只是最表层的「来源优先级」。真正起效的是完整的层叠顺序（cascade origin），包括：用户代理样式 → 用户样式 → 作者样式（外链/嵌入/内联）→ !important → 继承 → 特异性（specificity）→ 源码顺序。
这意味着：
- 哪怕你用了内联样式，一个带更高特异性的外链规则（如
div#app p span.highlight）仍可能赢过它 -
!important在内联里写是合法的，但一旦外链 CSS 里也有!important，就得比特异性 - 继承来的样式永远低于任何直接指定的样式，不管来源
所以别迷信「我用了内联，它就一定显示成红色」——打开 DevTools 的 Computed 面板看真实生效值，比背优先级规则管用得多。
