# CSS 选择器与样式

## 学习目标
- 理解 CSS 的作用
- 掌握 CSS 选择器
- 学会使用常见样式属性

## CSS 语法

```css
选择器 {
    属性名: 值;
    属性名: 值;
}
```

## 选择器类型

| 选择器 | 说明 | 示例 |
|--------|------|------|
| 元素选择器 | 选中所有该元素 | `p { }` |
| 类选择器 | 选中 class 属性 | `.box { }` |
| ID 选择器 | 选中 id 属性 | `#header { }` |
| 后代选择器 | 选中后代元素 | `div p { }` |

## 常用属性

```css
.box {
    color: #333;
    font-size: 16px;
    background-color: #f5f5f5;
    padding: 10px;
    margin: 5px;
    border: 1px solid #ddd;
}
```

## 动手练习

1. 为之前的 HTML 页面添加样式
2. 使用不同选择器设置样式
3. 实现一个卡片组件