引入 CSS 的三种方式 - CSS 教程

讲解

CSS 进入页面有三种方式。第一种是行内样式：直接写在元素的 style 属性里，如。它只影响这一个元素，优先级最高（仅次于 !important），适合临时调试或由 JS 动态计算的值，不适合写正式样式——内容和表现又混在一起了，且无法复用。

第二种是内部样式表：在 HTML 的里放标签。样式只作用于当前页面，适合单页小作品、邮件模板（很多邮件客户端只认它）或演示 demo。第三种是外部样式表：把 CSS 存成独立的 .css 文件，用引入。这是正式项目的标准做法：样式可缓存、可跨页面复用、HTML 保持干净。一个页面可以 link 多个 CSS 文件，后面的文件在同优先级下覆盖前面的。

还有一种较老的方式 @import url("other.css")，写在 CSS 文件里再引入另一个 CSS。它会串行阻塞加载（先下载主文件才发现还有子文件），性能差，现代工程基本不用——构建工具会在打包阶段内联合并。实际项目的结论是：默认外部样式表，小组件演示用，行内样式留给 JS 动态值。

示例

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>三种引入方式</title>
    <!-- 方式三（推荐）：外部样式表，注意 rel 和 href 都不能少 -->
    <link rel="stylesheet" href="styles/main.css" />
    <!-- 方式二：内部样式表，只对本页生效 -->
    <style>
      body {
        background: #fafafa;
      }
    </style>
  </head>
  <body>
    <!-- 方式一：行内样式，只对这个元素生效，优先级最高 -->
    <p style="color: #b3541e">这行文字是橙色的（行内样式）。</p>
  </body>
</html>

/* styles/main.css —— 外部样式表，可被多个页面共享并被浏览器缓存 */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.7;
}

常见坑

link 标签属性写错：漏写 rel="stylesheet" 浏览器会直接忽略这个文件；href 路径写错（相对路径基准是当前 HTML 的位置）会 404，打开 DevTools 的 Network 面板一眼就能看到。
改了 CSS 页面没变：外部样式表被浏览器缓存了。开发时勾选 DevTools 的 "Disable cache"，或强制刷新（Cmd/Ctrl + Shift + R）。
行内样式覆盖不掉：行内样式优先级高于几乎所有选择器，外部文件里写普通规则打不过它，只能靠 !important——这正是行内样式要少用的原因。
多个文件的顺序搞反：reset.css、base.css、page.css 这类分层文件必须按「从通用到具体」的顺序 link，后面的才能覆盖前面的。
在里放指望它生效：虽然现代浏览器宽容地允许，但它会造成渲染阻塞和内容闪烁，样式表应统一放。

小结

行内样式、内部、外部三种方式各有位置，正式项目用外部样式表；多个文件按从通用到具体的顺序引入。下一节学习 CSS 的两大基础词汇：颜色与单位。