# 引入 CSS

URL: https://caijiao.org/html/09-integration/01-css
Source: docs/html/09-integration/01-css.md
Description: HTML 引入 CSS 可通过内联样式、内部样式表和外部样式表三种方式实现，推荐使用外部样式以便统一管理和复用，提升页面维护效率。

在 HTML 中，**CSS（层叠样式表）** 用于控制网页的外观与布局。我们可以通过多种方式将 CSS 应用于 HTML 页面，实现更丰富的样式效果。

## 三种引入方式

### 1. 内联样式（Inline CSS）

将样式直接写在标签内的 `style` 属性中。适合局部简单样式。

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

### 2. 内部样式表（Internal CSS）

将 CSS 写在 HTML 文件 `<head>` 区域的 `
</head>
```

### 3. 外部样式表（External CSS）

将 CSS 单独写在 `.css` 文件中，并通过 `<link>` 标签引入。推荐使用此方式，便于样式复用与维护。

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

**style.css 示例：**

```css
body {
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}
```

## 使用建议

- 推荐使用 **外部样式表** 管理项目样式。
- 避免频繁使用 **内联样式**，不利于维护。
- **内部样式** 可用于单页演示或测试阶段。

通过引入 CSS，网页不仅结构清晰，还能拥有良好的视觉体验，是前端开发的重要组成部分。