# 第 5 章：CSS 基礎與畫面設計

## 本章目標

這一章會學會 CSS 的角色：它負責網頁的視覺呈現。你會使用顏色、字體、間距、邊框與版面，讓 HTML 內容變得清楚好讀。

## 你會做出什麼

你會把第 4 章的學習筆記頁改成清爽的卡片式版面，使用淺藍紫色調與簡潔留白。

## 核心觀念

CSS 透過「選擇器」找到 HTML 元素，再套用樣式。常見樣式包含顏色、字體大小、內距、外距、邊框、背景與排列方式。

初學者最重要的是先掌握 Box Model。每個元素都像一個盒子，包含內容、內距、邊框與外距。

## Box Model (盒模型) 重點

初學者最常遇到的排版問題都來自「Box Model」。請記住這個口訣：**「內容是核心，Padding 往內擠，Border 是邊界，Margin 往外推。」**

- **Content (內容)**：文字或圖片的實際大小。
- **Padding (內距)**：內容到邊框的距離（會改變元素的整體大小）。
- **Border (邊框)**：元素的實際邊界。
- **Margin (外距)**：與其他元素之間的距離（不屬於元素內部）。

建議在 CSS 最開頭加上 `* { box-sizing: border-box; }`，這能讓寬高計算包含 Padding 和 Border，大幅減少排版破版的機會。

## 常用 CSS

- `color`：文字顏色
- `background`：背景
- `font-size`：字體大小
- `line-height`：行高
- `margin`：外距
- `padding`：內距
- `border`：邊框
- `border-radius`：圓角
- `display: flex`：一維排列
- `display: grid`：格線排列

## 實作步驟

1. 建立 `style.css`。
2. 在 HTML 用 `link` 載入 CSS。
3. 設定全站字體與背景。
4. 用 `max-width` 控制內容寬度。
5. 用 Grid 建立卡片排列。
6. 加上手機版一欄排列。

## Codex Prompt 範例

```text
請只修改 style.css，將這個學習筆記頁設計成清爽的卡片式版面。使用白色背景、淡灰區塊、淺藍紫色調、8px 圓角，並加入手機版一欄排列。
```

## 常見錯誤

*   **[錯誤] 所有元素都直接指定固定寬度**
    **[解法]**：使用 `max-width: 100%` 可以讓元素在手機螢幕上自動縮小，避免破版。

*   **[錯誤] 忘記處理手機版**
    **[解法]**：撰寫 CSS 時要養成習慣，記得加入 `@media (max-width: 768px)` 來處理手機排版。

*   **[錯誤] 圓角與陰影太重**
    **[解法]**：陰影用極淡透明黑 (`rgba(0,0,0,0.1)`)、圓角不要超過 `16px`，畫面會更有質感。

## 本章練習

請調整範例頁：

- 把卡片改成兩欄
- 手機版維持一欄
- 替重要提示加入淡紫色背景
- 讓按鈕有 hover 效果

## 檢查清單

- 我知道 CSS 負責視覺樣式
- 我理解 margin、padding、border 的差異
- 我能使用 Flexbox 或 Grid 排版
- 我能請 Codex 只修改 CSS