設定頁面背景色
修改檔案：style.css
完成後看見：頁面出現柔和淺色背景
個人介紹
小安｜前端學習者
我喜歡把生活中的問題整理成簡單畫面。
認識我
這是我準備網站作品時最常使用的工作桌。
我正在學什麼
觀看這段影片，先認識 HTML 如何描述頁面結構。
CHAPTER 03 · PRACTICE WORKSPACE
CSS 語法、文字、顏色與尺寸
替個人網站完成第一版一致的視覺樣式
02
Checkpoint 1
1/3
- 01Starter讀懂作品骨架
- 02Checkpoint 1加入第一項能力
- 03Checkpoint 2累積第二項能力
- 04Solution核對完整結果
TASK STATUS
三項任務目前狀態
設定內文字體與顏色
修改檔案：style.css
完成後看見：全頁文字易讀且風格一致
建立標題尺寸層級
修改檔案：style.css
完成後看見：主標題比段落更醒目
WORKSPACE
本階段實作區
已完成 TASK-01；先核對可見結果，再前往 TASK-02。
FOCUS TASK · TASK-02
現在只處理：設定內文字體與顏色
講解時展開：2 個小型比較
font-family vs color｜字體與顏色分開
比較：font-family 決定字形風格，color 決定文字對比；兩者都屬於 body 的共同基礎，但不能用一個屬性代替另一個。
現在做：在 DevTools 的 body 規則逐一關閉 font-family 與 color，先比較字形與對比的變化，再把兩個宣告寫回 style.css；重新整理後從標題讀到段落。
看預期與證據
預期：能分辨字形改變與對比改變是兩種不同結果，並讓全頁文字在同一個 body 規則下保持易讀。
證據：指出關閉 font-family 與 color 時各自發生的畫面變化，並展示 style.css 中已保存的兩條 body 宣告。
body vs 元件｜全域與局部範圍
比較：body 適合全頁共同基礎，元件 selector 適合局部差異；範圍錯了會造成回歸。
現在做：在 DevTools 暫時把 color 加到 .practice-title，再把同一個 color 移回 body，觀察全頁文字與單一標題的差異；最後只保留 body 的共同文字色。
看預期與證據
預期：能看到 .practice-title 只影響標題、body 會影響整頁，並能說明 TASK-02 為什麼應把共同字體與顏色放在 body。
證據：留下標題單獨變色與全頁共同變色兩個狀態的截圖或口述，並指出最後保存的 selector。
需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
- A｜觀察：在 Checkpoint 1 確認背景已變成柔和淺色，但正文仍是 serif 與偏淡的 #66756f。
- B｜預測：重新整理後從標題讀到段落，確認字型與文字顏色一致且清楚。
- C｜實作：在 style.css 的 body 完成「設定內文字體與顏色」，一次只處理本任務責任。
- D｜故障：若結果不一致，先依原操作重現，再檢查 body 與 style.css，最後重跑原操作。
- E｜驗收：全頁文字易讀且風格一致
完成條件：DONE-02：全頁文字易讀且風格一致
CONTINUE
繼續完成 TASK-02
前往 Checkpoint 2，依要求完成「設定內文字體與顏色」。