一、内联样式

概念：直接在 HTML 元素上使用 style 属性定义样式。
语法：<div style="属性: 值;">
优点：优先级最高，可以覆盖其他样式。
缺点：代码重复，难以维护，不推荐使用。

👇 内联样式演示

这是一个使用内联样式的段落

使用内联样式的标题

查看代码

1<!-- 内联样式 -->
2<p style="color: blue; font-size: 16px;">这是一个段落</p>
3<h1 style="color: green; font-size: 20px;">这是一个标题</h1>

二、内部样式表

概念：在 <head> 中使用 <style> 标签定义样式。
语法：<style> 选择器 { 属性: 值; } </style>
优点：样式与结构分离，便于维护。
缺点：只能在当前页面使用，无法复用。

👇 内部样式表演示

这是一个段落（使用内部样式表）

这是一个标题（使用内部样式表）

查看代码

1<head>
  <style>
      p {
          color: blue;
          font-size: 16px;
      }
7
      h2 {
          color: red;
          font-size: 24px;
      }
  </style>
13</head>

三、外部样式表

概念：将 CSS 代码保存在独立的 .css 文件中，通过 <link> 标签引入。
语法：<link rel="stylesheet" href="style.css">
优点：样式与结构完全分离，可以复用，便于维护。
推荐：这是最常用的导入方式。

👇 外部样式表演示

这是一个段落（使用外部样式表）

这是一个标题（使用外部样式表）

查看代码

1<!-- HTML 文件 -->
2<head>
3    <link rel="stylesheet" href="style.css">
4</head>
5
6/* style.css 文件 */
7p {
8    color: blue;
9    font-size: 16px;
10}
11
12h3 {
13    color: blue;
14    font-size: 18px;
15}

四、@import 导入

概念：在 <style> 或 CSS 文件中用 @import 导入其他 CSS 文件。
与 link 的区别：
@import 先加载 HTML，再加载 CSS（可能闪屏）
<link> 并行加载 HTML 和 CSS（性能更好）
结论：优先用 <link>，@import 仅用于 CSS 文件内部合并。

👇 @import 用法

/* 方式一：在 style 标签中 */
<style>
    @import url("reset.css");
    @import url("layout.css");
</style>

/* 方式二：在 CSS 文件开头 */
@import url("variables.css");
@import url("components.css");

查看代码

1/* link vs @import 对比 */
2
3/* ✅ 推荐：link 方式 */
4<head>
5    <link rel="stylesheet" href="style.css">
6</head>
7
8/* ⚠️ 不推荐：@import 方式 */
9<style>
10    @import url("style.css");
11</style>
12
13/* @import 的唯一优势：可以在 CSS 文件内部合并 */
14/* main.css */
15@import url("header.css");
16@import url("footer.css");
17body { margin: 0; }

五、优先级对比

概念：当多种导入方式同时存在时，按优先级决定谁生效。
优先级从高到低：
1. 内联样式（权重 1000）
2. 内部/外部样式（权重 100）
3. 浏览器默认样式（权重 1）
注意：内部和外部样式优先级相同，后定义的会覆盖先定义的。

👇 优先级演示

内联样式（红色）会覆盖内部样式（蓝色）

查看代码

1<!-- 优先级演示 -->
2<style>
3    p { color: blue; }  /* 内部样式 */
4</style>
5
6<p style="color: red;">内联样式（红色）会覆盖内部样式（蓝色）</p>
7
8/* 最终显示红色，因为内联样式优先级更高 */