CSS 引入方式的选择，直接影响页面的加载速度、样式复用程度以及后续维护成本。从浏览器渲染的角度看，一份 HTML 文档最终展示出的样式并不是由单一来源决定，而是行内声明、内部规则、外部文件以及浏览器默认样式共同参与层叠计算的结果。把样式写在不同的位置，不只是书写习惯问题，它关系到选择器优先级、缓存策略、请求数量和团队协作方式。因此有必要把常见的引入方式拆开来看，结合代码示例和实际场景，理解它们各自的优劣。

一、行内样式：把声明写在 style 属性里

行内样式是最直接的引入方式，它把 CSS 声明直接写在 HTML 元素的 style 属性中。浏览器在构建 DOM 时遇到这种写法，会立即将声明绑定到对应元素上。由于它不经过选择器匹配，也不需要额外请求，只对当前元素生效，解析链路非常短。

<p style="color: red; font-size: 16px;">这是一段红色文字</p>

这种方式的优点是可以快速覆盖其他规则，适合在 JavaScript 中动态设置样式、邮件模板中兼容老旧邮件客户端，或者调试时临时验证效果。例如很多富文本编辑器生成的 HTML 也会带有大量行内样式，因为内容需要脱离独立样式表仍然保持可读。

但行内样式的缺点同样明显。样式不能复用，重复元素需要逐一声明；HTML 结构被大量 CSS 细节侵入，可读性下降；而且由于优先级很高，后续想通过类选择器覆盖时不得不使用 !important，进一步加重维护负担。因此除特殊场景外，不建议在业务代码中大量使用行内样式。

二、内部样式表：集中管理单个页面

内部样式表是把一组 CSS 规则集中写在 HTML 文档的 <head> 区域内，使用 <style> 标签包裹。这样样式规则与文档结构仍然处于同一个文件里，但选择器可以复用，结构也不用被逐条内联声明污染。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>内部样式表示例</title>
  <style>
    .card {
      padding: 16px;
      border: 1px solid #e5e5e5;
      border-radius: 6px;
    }
    .card h2 {
      font-size: 18px;
      color: #222;
    }
  </style>
</head>
<body>
  <div class="card">
    <h2>标题</h2>
    <p>内容区域</p>
  </div>
</body>
</html>

这种方式适合单个页面或原型页面。开发者只需要管理一个 HTML 文件就能看到完整效果，不需要在多个文件之间切换。对于一些动态生成的独立页面、活动落地页或邮件内嵌样式，内部样式表也是省事的方案。

不过它同样不适合跨页面复用。如果站点有多个页面，样式写在各页面内部会导致规则重复，修改主题色或字体时需要逐个文件更新。此外，内部样式表无法被浏览器单独缓存，用户每次访问不同页面都要重新下载这些规则，对较大项目来说并不友好。

三、外部样式表：最常用的生产环境方案

外部样式表是生产环境中最常见的引入方式。它把样式规则独立到一个或若干个 .css 文件中，再通过 HTML 的 <link> 标签引用。浏览器遇到 <link rel="stylesheet" href="css/style.css"> 后会发起请求，下载并解析该文件，然后参与页面样式计算。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>外部样式表示例</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="container">页面内容</div>
</body>
</html>

对应的 CSS 文件里只需要维护类选择器、标签选择器以及媒体查询等内容，不再混杂 HTML 结构。

/* css/style.css */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
}
.container .item {
  display: flex;
  gap: 12px;
}

外部样式表的最大好处是职责分离。HTML 负责结构，CSS 负责表现，设计调整时只修改样式文件即可。浏览器会对已经请求过的 CSS 文件做缓存，用户在站内切换页面时不必重新下载相同的规则，这对多页面站点有明显的性能收益。同时一个 HTML 页面可以引入多个外部样式表，按照项目模块拆分基础样式、布局样式和主题样式，便于团队并行开发。

它的不足主要在于会增加额外的 HTTP 请求，尤其是文件数量过多时，可能导致首屏渲染变慢。不过借助资源合并、按需加载和 HTTP/2 的多路复用能力，这种影响可以被控制在较小范围内。对于大多数正式项目来说，外部样式表仍然是首选的 CSS 组织方式。

四、@import 导入：在 CSS 内部继续引入

@import 是 CSS 提供的模块导入语法，通常写在 <style> 块或外部 CSS 文件顶部。它允许在一个样式表中继续引入其他样式表，例如 @import url("base.css");。从语法上看，它解决的也是样式拆分问题，可以在一个入口文件中聚拢多个基础模块。

/* 放在 CSS 文件顶部 */
@import url("base.css");
@import url("components/button.css");
/* 后续业务样式 */
.page {
  background: #fafafa;
}

不过 @import 的加载行为并不理想。如果它出现在外部 CSS 文件里，浏览器需要先下载并解析当前文件，发现 @import 后再发起新的请求。这种串行等待可能导致首屏出现没有样式的情况。相比之下，使用多个 <link> 标签可以让浏览器并行请求样式文件，通常能更早完成加载。

但这不代表 @import 完全没有用途。在一些需要严格管理样式依赖、不希望修改 HTML 文件、或者兼容旧式 CSS 构建流程的场景中，它仍然可以作为一种折中方案。关键原则是不要在关键渲染路径上依赖 @import 加载首屏必需样式，可以把非关键的主题扩展、兼容性补丁等通过它引入。

五、实际选择建议与优先级关系

实际项目里一般不会只用一种方式。常见组合是：公共样式、框架样式、主题样式用外部样式表引入；页面级细节用内部样式表放在 <style> 块中做小幅覆盖；局部动态调整则通过 JavaScript 操作元素的 style 属性完成。这样既保留外部样式的缓存和复用能力，又能灵活处理特殊状态。

还有必要理解它们的优先级关系。行内样式的优先级最高，其次是内部样式表和外部样式表中靠后的、选择器权重更高的规则。如果多种来源对同一属性产生了冲突，最终生效的是计算后权重更高的那条声明。因此调试样式时，不要只增加 !important，而应先确认规则来源是否合理、加载顺序是否符合预期。

从长期维护角度看，把样式尽量外置、按模块拆分、避免行内样式泛滥，能够显著降低沟通和修改成本。这个原则并不绝对，例如抖动的动画、用户个性化颜色等场景，行内样式反而更直观。选择引入方式时，核心判断依据是这段样式是否需要在多个元素或多个页面之间复用，以及它是否属于首屏关键渲染内容。