設定頁面背景色
修改檔案：style.css
完成後看見：頁面出現柔和淺色背景
個人介紹
小安｜前端學習者
我喜歡把生活中的問題整理成簡單畫面。
認識我
這是我準備網站作品時最常使用的工作桌。
我正在學什麼
觀看這段影片，先認識 HTML 如何描述頁面結構。
CHAPTER 03 · PRACTICE WORKSPACE
CSS 語法、文字、顏色與尺寸
替個人網站完成第一版一致的視覺樣式
01
Starter
0/3
- 01Starter讀懂作品骨架
- 02Checkpoint 1加入第一項能力
- 03Checkpoint 2累積第二項能力
- 04Solution核對完整結果
TASK STATUS
三項任務目前狀態
設定內文字體與顏色
修改檔案：style.css
完成後看見：全頁文字易讀且風格一致
建立標題尺寸層級
修改檔案：style.css
完成後看見：主標題比段落更醒目
WORKSPACE
本階段實作區
先確認作品目前能做什麼、還缺什麼，再從 TASK-01 開始修改。
FOCUS TASK · TASK-01
現在只處理：設定頁面背景色
講解時展開：2 個小型比較
selector vs declaration｜規則對回元素
比較：selector 決定套用誰，property/value 決定改什麼；要先分清元素與樣式責任。
現在做：先在 DevTools 選取 body，暫時關閉 background-color，再回到 style.css 找到 body 規則；只在 body 宣告 background-color，重新整理後指出是哪個選取器接收了這條宣告。
看預期與證據
預期：能把 body 說成選取器，把 background-color 說成屬性，並用整頁背景恢復的畫面證明規則對到了正確元素。
證據：指出 DevTools 中的 body、style.css 中的 body 規則與整頁背景前後畫面，三者能互相對應。
背景色 vs 文字色｜對比責任不同
比較：背景負責表面，文字色負責可讀性；兩者一起調整才知道改動真正影響什麼。
現在做：在 DevTools 的 body 規則逐一關閉 background-color 與 color，先預測哪一部分會變，再只恢復 background-color；重新整理後說明背景與文字色各自負責什麼。
看預期與證據
預期：能看到背景消失只影響頁面表面、文字色消失會影響閱讀對比，並說出兩個宣告不能互相代替。
證據：留下關閉 background-color、關閉 color、恢復背景三個狀態的截圖或口述，指出每次變化屬於哪個責任。
需要排錯時查看：任務循環（觀察 → 預測 → 實作 → 故障 → 驗收）
- A｜觀察：在 Starter 觀察 body 仍使用預設白底，並在 Computed 記下 background-color 尚未套用指定淺色。
- B｜預測：重新整理後觀察整個頁面底色，不只看單一卡片。
- C｜實作：在 style.css 的 body 完成「設定頁面背景色」，一次只處理本任務責任。
- D｜故障：若結果不一致，先依原操作重現，再檢查 body 與 style.css，最後重跑原操作。
- E｜驗收：頁面出現柔和淺色背景
完成條件：DONE-01：頁面出現柔和淺色背景
CONTINUE
開始 TASK-01
前往 Checkpoint 1，依要求完成「設定頁面背景色」。