讓 CSS 正確載入
能從 HTML 找到 link，並以畫面變化證明 style.css 生效。
CHAPTER 03 · 180 MINUTES
內容不搬家，先替網站穿上第一套衣服
在第 02 章相同內容上完成柔和背景、易讀內文與清楚標題層級，第一次把 CSS 規則和畫面變化連起來。
3個明確任務
2個接回點
1套一致樣式
LEARNING GOALS
本章結束時，你能做出什麼
調整文字與顏色
用 body 統一背景、字體和內文字色。
建立資訊層級
讓主標題明顯比段落更醒目，而不是所有字一樣大。
PROBLEM & ANALOGY
內容完整，為什麼仍像尚未整理的草稿？
HTML 像家具清單，CSS 像室內設計：換牆色、字體與尺寸，不需要搬走任何家具。
本章要解決：預設白底黑字缺少風格、文字層級不清楚，以及規則寫了卻因檔案或語法錯誤而沒有生效。
接住上一章：照片、影片與文字結構保留原樣，只修改
style.css。
把名詞對回畫面與程式
- style.css
- 真正要保存 CSS 規則的檔案，瀏覽器由 HTML 的 link 載入。
- 選取器
- 回答「要改誰」，例如 body 或 .practice-title。
- 屬性
- 回答「改什麼」，例如 color、font-family 或 font-size。
- 值
- 回答「改成什麼」，例如色碼、字體名稱或尺寸。
- Styles
- DevTools 中查看規則是否套用、被覆蓋或有語法錯誤的位置。
SCOPE
今天的學習邊界
能自己完成
辨識選取器、屬性、值，修改 body 與
.practice-title，並重新整理驗證。
看得懂即可
十六進位色碼、px、rem 與 DevTools
Styles。
刻意延後
盒模型、Flex、Grid、動畫與複雜字型載入。
CORE IDEAS
三個核心觀念
- 選取器回答「改誰」，屬性回答「改什麼」，值回答「改成什麼」。
-
整頁共同文字規則放在
body；只屬於主標題的尺寸與顏色放在.practice-title。 -
DevTools 暫改只用來試驗，確認後仍要存回
style.css。
DEBUG
錯誤觀察與排查順序
課堂刻意錯誤：拿掉
.practice-title
前的句點，再故意漏掉冒號，分辨「沒有選到」和「宣告語法錯誤」的症狀。
- 先確認 HTML 的 CSS link 路徑正確且檔案已載入。
- 比對 HTML class 與 CSS 選取器是否完全一致。
- 檢查大括號、冒號與分號。
- 在 Styles 看規則是否出現或被刪線，一次只修一處再重整。
整頁沒有變色
先查：先查 HTML 的 CSS link 路徑與檔案名稱，再查 body 規則是否載入。
標題沒有變大
先查：比對 HTML class 與 .practice-title 的句點、拼字和大小寫。
規則整段不生效
先查：從大括號、冒號、分號查起，一次只修一個語法點。
PRACTICE CONTRACT
Starter 到 Solution 是同一份骨架
開始前先確認這四件事
- 我開的是 Starter，不是 Solution。
- 我知道這章只改 style.css，不先搬動 HTML 結構。
- 我能說出這次規則的選取器、屬性和值。
- 我會在瀏覽器與 DevTools 都確認，再保存成果。
設定頁面背景色
檔案：style.css
位置：body
結果：頁面出現柔和淺色背景
設定內文字體與顏色
檔案：style.css
位置：body
結果：全頁文字易讀且風格一致
建立標題尺寸層級
檔案：style.css
位置：.practice-title
結果：主標題比段落更醒目
EVIDENCE
成果證據與檢核
30 秒說法可以直接照這個句型練習：
我用 ______ 選取器改 ______ 屬性為 ______；我在 Styles 看見規則 ______，並已存回 style.css。
DevTools 的暫時修改不是交件；請以 style.css 內容與重新整理後的畫面作為證據。
提交套用前後截圖，並在 DevTools 指出一條由
body 套用到內文的規則。
下一章：把技能內容當成包裹，分清內容、內距、邊框與外距。