零基礎前端課程

CHAPTER 03 · 180 MINUTES

內容不搬家，先替網站穿上第一套衣服

在第 02 章相同內容上完成柔和背景、易讀內文與清楚標題層級，第一次把 CSS 規則和畫面變化連起來。

3個明確任務
2個接回點
1套一致樣式

LEARNING GOALS

本章結束時，你能做出什麼

01

讓 CSS 正確載入

能從 HTML 找到 link，並以畫面變化證明 style.css 生效。

02

調整文字與顏色

用 body 統一背景、字體和內文字色。

03

建立資訊層級

讓主標題明顯比段落更醒目，而不是所有字一樣大。

進場檢核與作品接力

  • 具備第 02 章成果：完成含文字、圖片、觀看目的、外部連結與嵌入影片的個人介紹頁：不看答案，展示或口述第 02 章成果，並說出一項可見證據。 需要補強時從這裡接回
  • 能從 Starter、Checkpoint 與 Solution 中辨識目前工作階段：開啟本章主講義，指出 TASK-01 的修改檔案、可見結果與第一個 Checkpoint。 需要補強時從這裡接回
  • 能用「操作後看見什麼」描述驗收證據：閱讀三個任務後，選一題說出操作條件與預期可見結果。 需要補強時從這裡接回

輸入：第 02 章產物：完成含文字、圖片、觀看目的、外部連結與嵌入影片的個人介紹頁

本章輸出：替個人網站完成第一版一致的視覺樣式

產物類型：mainline；後續用途：第 04 章

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

三個核心觀念

  1. 選取器回答「改誰」，屬性回答「改什麼」，值回答「改成什麼」。
  2. 整頁共同文字規則放在 body；只屬於主標題的尺寸與顏色放在 .practice-title。
  3. DevTools 暫改只用來試驗，確認後仍要存回 style.css。

DEBUG

錯誤觀察與排查順序

課堂刻意錯誤：拿掉 .practice-title 前的句點，再故意漏掉冒號，分辨「沒有選到」和「宣告語法錯誤」的症狀。

  1. 先確認 HTML 的 CSS link 路徑正確且檔案已載入。
  2. 比對 HTML class 與 CSS 選取器是否完全一致。
  3. 檢查大括號、冒號與分號。
  4. 在 Styles 看規則是否出現或被刪線，一次只修一處再重整。
症狀 01

整頁沒有變色

先查：先查 HTML 的 CSS link 路徑與檔案名稱，再查 body 規則是否載入。

症狀 02

標題沒有變大

先查：比對 HTML class 與 .practice-title 的句點、拼字和大小寫。

症狀 03

規則整段不生效

先查：從大括號、冒號、分號查起，一次只修一個語法點。

PRACTICE CONTRACT

Starter 到 Solution 是同一份骨架，任務一路加厚

開始前先確認這四件事

  • 我開的是 Starter，不是 Solution。
  • 我知道這章只改 style.css，不先搬動 HTML 結構。
  • 我能說出這次規則的選取器、屬性和值。
  • 我會在瀏覽器與 DevTools 都確認，再保存成果。
TASK-01

設定頁面背景色

檔案：style.css

位置：body

結果：頁面出現柔和淺色背景

TASK-02

設定內文字體與顏色

檔案：style.css

位置：body

結果：全頁文字易讀且風格一致

TASK-03

建立標題尺寸層級

檔案：style.css

位置：.practice-title

結果：主標題比段落更醒目

  1. 先讀任務 Starter 先確認 HTML 與 CSS 都在。 累積完成 0／3 個任務 開始練習
  2. 完成第一項 Checkpoint 1 完成 TASK-01。 累積完成 1／3 個任務 繼續第一步
  3. 累積第二項 Checkpoint 2 再完成 TASK-02。 累積完成 2／3 個任務 繼續第二步
  4. 核對完成品 Solution 只補 TASK-03，HTML 不變。 累積完成 3／3 個任務 查看完整結果

網頁版答案位置對照卡住時先完成 Checkpoint 2，再查看每個 TASK 對應的檔案與位置。

EVIDENCE

成果證據與檢核

30 秒說法可以直接照這個句型練習：

我用 ______ 選取器改 ______ 屬性為 ______；我在 Styles 看見規則 ______，並已存回 style.css。

DevTools 的暫時修改不是交件；請以 style.css 內容與重新整理後的畫面作為證據。

提交套用前後截圖，並在 DevTools 指出一條由 body 套用到內文的規則。

交件前自我檢核 4 項 · 點選每一列完成自評

下一章：把技能內容當成包裹，分清內容、內距、邊框與外距。

下一步：前往第 04 章「Box Model、class 與選取器」，帶著本章輸出繼續累積作品。