📘 CSS 基础笔记 1
一、CSS 简介
CSS（层叠样式表）用于为网页添加样式，实现结构与样式分离，能够控制颜色、字体、布局、位置、动画等视觉效果。
二、基本语法
选择器 {属性1: 值1;属性2: 值2;
}
说明：
- 选择器：选中目标元素
- 属性:值：设置样式
- 每条声明用 ; 结尾，属性和值用 : 分隔
三、CSS 的三种写法
- 行内样式（不推荐）：
<p style="color: green;">你好</p>
- 内部样式表：
<style>p { color: red; }
</style>
- 外部样式表（推荐）：
<link rel="stylesheet" href="style.css">
四、基础选择器
| 类型 | 写法 | 说明 |
|---|---|---|
| 标签选择器 | p {} | 所有 <p> 标签 |
| 类选择器 | .box {} | class 为 box 的元素 |
| ID 选择器 | #header {} | id 为 header 的元素 |
| 通配符选择器 | * {} | 匹配所有元素，常用于初始化 |
五、复合选择器
| 类型 | 写法 | 说明 |
|---|---|---|
| 后代选择器 | div p {} | 所有 div 内的 p 元素 |
| 子选择器 | ul > li {} | ul 的直接子元素 li |
| 并集选择器 | h1, p {} | 同时选中 h1 和 p |
六、伪类选择器（常用交互样式）
| 伪类 | 写法 | 说明 |
|---|---|---|
:hover | a:hover {} | 鼠标悬停 |
:active | button:active {} | 鼠标点击时 |
:focus | input:focus {} | 输入框获取焦点时 |
:first-child | li:first-child {} | 第一个子元素 |
:last-child | li:last-child {} | 最后一个子元素 |
七、通配符说明
* {margin: 0;padding: 0;
}
用于清除所有元素的默认边距，常用于页面初始化。
