📘 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;
}
用于清除所有元素的默認邊距，常用于頁面初始化。
