CSS 使用方式

外部样式表/内部样式表/内联样式三种方式及优先级

三种方式引入 CSS——外部样式表、内部样式表、内联样式。

学完本章你将： 掌握三种引入方式及优先级关系。

外部样式表（推荐）

html

<head>
  <link rel="stylesheet" href="style.css">
</head>

css

/* style.css */
body { background-color: #f0f0f0; }
h1 { color: blue; }

💡 一个 CSS 文件控制整个网站——修改一处，全局生效。

html

<head>
  <style>
    body { background-color: #f0f0f0; }
    h1 { color: blue; }
  </style>
</head>

html

<h1 style="color: blue; font-size: 28px;">标题</h1>

内联样式 > 内部样式表 > 外部样式表
（就近原则——后加载的覆盖先加载的）

html

<!-- 外部: color: red -->
<!-- 内部: color: blue → 覆盖外部 -->
<!-- 内联: color: green → 最终颜色 -->
<h1 style="color: green;">最终是绿色</h1>

⚠️ !important 可以打破一切优先级——但尽量不用。