# CSS基础入门：样式引入与核心概念

---

## 一、CSS的三种引入方式

### 1. 内联样式
**适用场景**：快速调试单个元素的样式
**语法**：直接在HTML标签中使用`style`属性
**示例**：
```html

内联样式示例文本

```
**缺点**：难以维护，无法复用样式规则。

---

### 2. 内部样式表
**适用场景**：单页面样式管理
**语法**：在HTML文件的``标签内添加`

内部样式表示例标题

```
**优点**：页面级样式隔离，避免污染全局样式。

---

### 3. 外部样式表
**适用场景**：多页面共享样式
**语法**：通过``标签引入独立的`.css`文件
**示例**：
**styles.css**：
```css
.container {
max-width: 1200px;
margin: 0 auto;
}
```
**index.html**：
```html

```
**优势**：
- 代码复用性强
- 便于团队协作
- 浏览器缓存优化性能

---

## 二、样式优先级规则
| 引入方式 | 优先级 | 作用范围 |
|----------------|--------|----------|
| 内联样式 | 最高 | 单个元素 |
| 内部样式表 | 中 | 当前页面 |
| 外部样式表 | 低 | 全局 |

**冲突解决**：
当多个样式规则冲突时，优先级遵循：
`!important > 内联样式 > ID选择器 > 类选择器 > 元素选择器`

---

## 三、最佳实践建议
1. **开发环境**：使用外部样式表便于维护
2. **生产环境**：压缩CSS文件（如`styles.min.css`）
3. **调试技巧**：通过浏览器开发者工具实时修改样式