LESSON-06 · 零基礎學生教材
CSS 基礎：字型、顏色與背景
完成一張服務型商家卡片：標題與段落有可解釋的文字階層，顏色透過 CSS custom property 統一管理，背景與按鈕清楚可辨，390px viewport 能閱讀與操作。
先理解：這堂課解決什麼問題？
商家已有一張服務卡片，但標題、說明文字、按鈕與狀態提示還沒有一致的閱讀階層；本堂只處理這張卡片的內容呈現，不延伸到多頁、框架或版面排列。
本堂要完成：完成一張服務型商家卡片：標題與段落有可解釋的文字階層，顏色透過 CSS custom property 統一管理，背景與按鈕清楚可辨，390px viewport 能閱讀與操作。
學習邊界：先完成「完成一張服務型商家卡片的字型、文字階層、色彩、背景與窄版可讀性」，不提前引入尚未教過的框架或建置工具。
先備知識與操作環境
本堂先備：商家已有一張服務卡片，但標題、說明文字、按鈕與狀態提示還沒有一致的閱讀階層；本堂只處理這張卡片的內容呈現，不延伸到多頁、框架或版面排列。 需要的檔案是 examples/minimal.html、files/index.html、style.css、main.js。若尚未理解這些位置，先開啟 README 的最小實驗，再開始階段練習。
- 檔案位置：先找到
examples/minimal.html、files/index.html、style.css、main.js，再從本頁的最小實驗開始。 - 瀏覽器：開啟最小實驗與階段頁；每次修改後儲存並重新整理。
- DevTools：依本堂內容使用 Elements、Styles、Computed、Console 或 Network，記下第一個可觀察證據。
- 操作習慣：每次只修改一個檔案或一個責任，先預測、再操作、最後驗收。
先做最小實驗：先看見結果
這不是期末網站，而是一個可以直接看到本堂核心結果的最小實驗。先完成一次操作，再回到檔案和名詞卡對照。
- 入口：開啟
examples/minimal.html。 - 操作：先開啟
examples/minimal.html，從檔案底部找到 inline script；按一次主題按鈕，再切換 DevTools 的 390px viewport 並用 Tab 走到按鈕。 - 預期：服務卡片有清楚文字階層；按鈕能切換 Light／Dark，aria-pressed 會同步，刷新後會依 localStorage 或系統偏好保留主題，390px 沒有水平捲軸且 focus 清楚。
- 重設：清除該頁 localStorage 的 lesson06-theme 或在 Console 執行 localStorage.removeItem("lesson06-theme")，再重新整理；這份最小實驗只讀觀察，不要改成自己的答案。
學生練習流程
依序完成每一張卡；目前只聚焦一個步驟，先操作，再用可觀察證據確認結果。
-
1
最小實驗
先閱讀本頁的問題、檔案地圖、名詞卡與最小例子。 -
2
Step 2
自己回答互動問答 4 題，再展開解析。 -
3
最小實驗 2
開啟最小實驗，實際操作一次並記下證據。 -
4
Starter
把 Starter 複製到自己的工作資料夾，照 3 張微步驟卡逐一完成；每一步都要看到結果再繼續。 -
5
Checkpoint
前往 Checkpoint，只處理 1 個本堂核心缺口；先預測，再用指定證據驗收。 -
6
Solution
前往 Solution，先看逐檔差異與修改原因，再決定要不要把完整內容帶回自己的檔案。 -
7
變體驗收
完成情境變體與獨立挑戰，留下檔案位置、操作、結果與驗收證據，並閱讀下一堂銜接：下一堂會把已經可讀的內容放進可伸縮的版面排列；本堂不預先教排列工具。
檔案地圖：每個位置負責什麼？
先不要急著背檔名；請把檔案位置和責任連起來。你在階段頁會看到同一份檔案的可執行版本。
examples/minimal.htmlHTML 頁面：承載本堂「完成一張服務型商家卡片的字型、文字階層、色彩、背景與窄版可讀性」所需的內容與入口。files/index.htmlHTML 頁面：承載本堂「完成一張服務型商家卡片的字型、文字階層、色彩、背景與窄版可讀性」所需的內容與入口。style.cssCSS 樣式檔：放置本堂「完成一張服務型商家卡片的字型、文字階層、色彩、背景與窄版可讀性」相關的版面規則。main.jsJavaScript 腳本：放置本堂「完成一張服務型商家卡片的字型、文字階層、色彩、背景與窄版可讀性」相關的互動邏輯。
先學會這些詞
先從名詞、英文與白話意思開始；每次只展開一張名詞卡，再對照正式定義、範例與驗收證據。專業術語、語法、檔案路徑會使用不同樣式。第一次遇到術語時，先回到這裡，不要靠猜。
文字與字型
9 個詞瀏覽器browser 白話意思：把 HTML、CSS 與 JavaScript 檔案讀成可以看的網頁。 展開查看正式定義、範例與驗收證據
- 正式定義
- 解析文件、套用樣式、建立 DOM 並執行腳本的用戶端軟體。
- 什麼時候用
- 要預覽本堂檔案，或需要用畫面、DevTools、Console 驗收時。
- 最小範例
- Chrome 開啟 starter/files/index.html 後，會載入同一資料夾的 style.css 與 main.js。
- 可觀察證據
- 畫面、Elements、Computed、Console 與 Network 都是瀏覽器執行後的證據。
- 容易混淆
- 和編輯器混淆；編輯器修改來源檔，瀏覽器呈現執行結果。
檔案關係file relationship 白話意思：HTML 是入口，CSS 負責外觀，JavaScript 負責操作。 展開查看正式定義、範例與驗收證據
- 正式定義
- 由 HTML 透過
link與script引用外部資源，形成結構、呈現與行為的責任分工。 - 什麼時候用
- 要判斷應該修改哪個檔案，或畫面缺樣式、按鈕沒反應時。
- 最小範例
- <link rel="stylesheet" href="style.css"> 與 <script src="main.js" defer></script>。
- 可觀察證據
- Network 能看到兩個檔案請求；修改
style.css影響外觀，修改main.js影響按鈕操作。 - 容易混淆
- 和資料夾名稱混淆；關係描述誰引用誰，不是只看檔案放在哪裡。
selectorselector 白話意思：告訴 CSS 要替哪一個元素加樣式。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS 規則中用來匹配 HTML 元素的模式。
- 什麼時候用
- 要只修改服務卡片標題、段落或按鈕時。
- 最小範例
- .service-card h2 會選取 service-card 裡的 h2。
- 可觀察證據
- 在 Elements 點元素，Styles 會顯示命中的 selector。
- 容易混淆
- 和 property 混淆；selector 選對象，property 說明要改什麼。
propertyproperty 白話意思：CSS 要修改的外觀項目名稱。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS 宣告中表示可設定樣式特性的名稱。
- 什麼時候用
- 要修改字型、大小、顏色、背景或行高時。
- 最小範例
- line-height: 1.6 中的 line-height 是 property。
- 可觀察證據
- Styles 左側看到 property，Computed 看到它最後計算出的值。
- 容易混淆
- 和 value 混淆；
line-height是名稱，1.6是值。
valuevalue 白話意思：property 實際採用的設定內容。 展開查看正式定義、範例與驗收證據
- 正式定義
- CSS 宣告中賦予 property 的資料、單位或關鍵字。
- 什麼時候用
- 要指定字體大小、色碼、行高或顏色時。
- 最小範例
- font-size: 1.125rem 中的 1.125rem 是 value。
- 可觀察證據
- Computed 會顯示瀏覽器計算後的實際值。
- 容易混淆
- 和 property 混淆；先找左邊名稱，再讀右邊值。
font-familyfont-family 白話意思：文字要使用哪一組字型。 展開查看正式定義、範例與驗收證據
- 正式定義
- 指定文字繪製時優先嘗試的字型清單。
- 什麼時候用
- 要讓中文、英文與系統沒有同一字型時仍可讀取時。
- 最小範例
- font-family: system-ui, "Noto Sans TC", sans-serif;。
- 可觀察證據
- 在 Computed 讀到實際字型宣告，畫面可觀察字形與 fallback 是否合理。
- 容易混淆
- 和 font-size 混淆；font-family 是字型種類，font-size 是字體大小。
font-sizefont-size 白話意思：文字顯示多大。 展開查看正式定義、範例與驗收證據
- 正式定義
- 設定文字字體大小的 CSS property。
- 什麼時候用
- 要建立 h1、h2、段落與按鈕的視覺階層時。
- 最小範例
- .service-card h2 { font-size: clamp(1.5rem, 5vw, 2.25rem); }。
- 可觀察證據
- 選取標題後在 Computed 讀到 font-size，並在 390px 觀察是否仍能閱讀。
- 容易混淆
- 和 font-weight 混淆；大小不等於粗細。
font-weightfont-weight 白話意思：文字看起來有多粗。 展開查看正式定義、範例與驗收證據
- 正式定義
- 設定字體筆畫粗細的 CSS property。
- 什麼時候用
- 要讓標題、標籤與正文有層級差異時。
- 最小範例
- .service-card h2 { font-weight: 800; }。
- 可觀察證據
- Computed 顯示標題與段落不同的 font-weight。
- 容易混淆
- 和 font-size 混淆；粗細不會直接改變字體大小。
line-heightline-height 白話意思：同一段文字每一行之間保留多少垂直空間。 展開查看正式定義、範例與驗收證據
- 正式定義
- 設定行盒高度的 CSS property；無單位數值會依元素 font-size 計算。
- 什麼時候用
- 段落、長標題或窄版換行讓文字擠在一起時。
- 最小範例
- p { line-height: 1.6; }；CSS 基礎：字型、顏色與背景以一般段落至少 1.5 作為教學基準。
- 可觀察證據
- 在 Computed 讀取 line-height，並於 390px 觀察多行段落是否容易讀。
- 容易混淆
- 和 margin 混淆；line-height 是每行內部節奏，margin 是元素外部距離。
色彩與變數
7 個詞colorcolor 白話意思：文字和其他前景內容使用的顏色。 展開查看正式定義、範例與驗收證據
- 正式定義
- 設定元素前景色的 CSS property，通常影響文字與部分圖形。
- 什麼時候用
- 要讓標題、說明文字與連結符合品牌且能閱讀時。
- 最小範例
- .page-description { color: var(--muted); }。
- 可觀察證據
- 選取文字，在 Computed 讀取 color，並對照背景色計算對比。
- 容易混淆
- 和 background-color 混淆；color 是前景，background-color 是後景。
background-colorbackground-color 白話意思：元素盒子後面的底色。 展開查看正式定義、範例與驗收證據
- 正式定義
- 設定元素背景顏色的 CSS property。
- 什麼時候用
- 要區分頁面、卡片與按鈕區域，或檢查文字對比時。
- 最小範例
- .service-card { background-color: var(--surface); }。
- 可觀察證據
- Computed 讀取 background-color，畫面可看出卡片與頁面的層次。
- 容易混淆
- 和 color 混淆；先分辨正在讀文字色還是底色。
CSS custom propertyCSS custom property 白話意思：先替共用值取一個 CSS 名稱。 展開查看正式定義、範例與驗收證據
- 正式定義
- 以
--開頭宣告、可在樣式計算中被var()取用的 CSS 自訂屬性。 - 什麼時候用
- 品牌色、背景色或 focus 色需要在多個 selector 共用時。
- 最小範例
- :root { --brand: #176b87; }。
- 可觀察證據
- 修改一個 token 後多個使用
var(--brand)的元素同步變色。 - 容易混淆
- 和 JavaScript 變數混淆；它由 CSS 宣告，不能用
const取代。
var()var() function 白話意思：把 CSS custom property 的值拿來使用。 展開查看正式定義、範例與驗收證據
- 正式定義
- 讀取自訂屬性的 CSS 函式，可搭配 fallback value。
- 什麼時候用
- 已宣告 token 且要讓元件真正使用它時。
- 最小範例
- button { background-color: var(--brand); }。
- 可觀察證據
- 在 Styles 看到 var(--brand)，修改 :root 後按鈕的 Computed background-color 改變。
- 容易混淆
- 和只宣告 token 混淆；沒有 var() 使用，宣告本身不會改變元件。
remroot em 白話意思：以根元素字體大小為基準的尺寸單位。 展開查看正式定義、範例與驗收證據
- 正式定義
- 相對於文件根元素（通常是 html）font-size 的 CSS 長度單位。
- 什麼時候用
- 要讓間距與字體尺寸有一致、可縮放的基準時。
- 最小範例
- padding: 1rem; 會依 html 的 font-size 計算。
- 可觀察證據
- Computed 會把 rem 換算成實際像素值，改變根字體基準時可觀察差異。
- 容易混淆
- 和 px 混淆；px 是固定 CSS 像素，rem 會依根元素基準換算。
chcharacter unit 白話意思：用目前字型中「0」的寬度估算一行可以放多少字。 展開查看正式定義、範例與驗收證據
- 正式定義
- 相對於目前元素字型中零字元 advance measure 的 CSS 長度單位。
- 什麼時候用
- 要限制段落閱讀寬度，避免一行太長時。
- 最小範例
- .service-card p { max-width: 62ch; }。
- 可觀察證據
- 桌機上段落不會橫跨整個卡片，窄版仍會依可用空間換行。
- 容易混淆
- 和字數保證混淆；ch 是寬度估算，不保證每個語言字元寬度相同。
對比contrast ratio 白話意思：前景文字和背景之間有多容易分辨。 展開查看正式定義、範例與驗收證據
- 正式定義
- 依兩個顏色的相對亮度計算出的比值；一般文字本堂以 WCAG 4.5:1 作為檢查基準。
- 什麼時候用
- 要判斷段落、按鈕文字或 muted 文字是否讀得清楚時。
- 最小範例
- #8a98a8 在白底約 2.94:1，不足一般文字 4.5:1；#52657d 約 5.97:1。
- 可觀察證據
- 用實際文字色與背景色計算，並與畫面及 Computed 的 rgb 交叉對照。
- 容易混淆
- 和品牌偏好混淆；喜歡的顏色不代表在背景上有足夠對比。
版面與焦點
3 個詞viewportviewport 白話意思：瀏覽器目前拿來顯示頁面的可視範圍。 展開查看正式定義、範例與驗收證據
- 正式定義
- 使用者代理程式呈現文件內容的視窗區域；本堂用 390px 作為窄版檢查點。
- 什麼時候用
- 要檢查手機寬度、換行、水平捲軸與按鈕是否仍能操作時。
- 最小範例
- <meta name="viewport" content="width=device-width, initial-scale=1">。
- 可觀察證據
- DevTools 裝置模式切換到 390px，頁面沒有水平捲軸且 Tab 可走到按鈕。
- 容易混淆
- 和整個瀏覽器視窗混淆；viewport 是頁面內容可見的區域。
ComputedComputed styles 白話意思：瀏覽器最後真正算出並套用的 CSS 值。 展開查看正式定義、範例與驗收證據
- 正式定義
- DevTools 中顯示元素經過 cascade、繼承與單位換算後的最終樣式結果。
- 什麼時候用
- 規則看似寫了但畫面不同，或要確認 var() 最後變成什麼值時。
- 最小範例
- 選取 .service-card p，在 Computed 讀 color、background-color 與 line-height。
- 可觀察證據
- Computed 的實際 rgb、px 或數值能與畫面及 CSS 來源對照。
- 容易混淆
- 和 CSS 原始碼混淆；原始碼可能被覆蓋，Computed 才是目前結果。
focus-visible:focus-visible 白話意思：鍵盤目前走到哪個可操作元素的清楚標記。 展開查看正式定義、範例與驗收證據
- 正式定義
- 當瀏覽器判斷需要呈現焦點時套用的 CSS 偽類；本堂用於鍵盤 focus ring。
- 什麼時候用
- 不用滑鼠、只按 Tab 也要知道目前位置時。
- 最小範例
- button:focus-visible { outline: 3px solid var(--focus); }。
- 可觀察證據
- 按 Tab 到按鈕時看到清楚 outline，滑鼠點擊不會讓焦點樣式消失。
- 容易混淆
- 和
:hover混淆；hover 是指標經過，focus-visible 是鍵盤或其他操作焦點。
最小例子：先看懂，再複製
這段只保留本堂第一個微成果。先預測結果，再逐行讀；完整檔案請開啟下方最小實驗。
<link rel="stylesheet" href="style.css">
<p id="status" class="status" role="status">尚未執行 CSS 驗收。</p>
<button id="action" type="button">執行 CSS 驗收</button>
<script src="main.js" defer></script>Live Lab：逐段讀碼與驗證
每一步只回答五件事：為什麼做、改哪裡、會看到什麼、用什麼證據確認、卡住先查什麼。
-
Step 1
先確認三個檔案的責任
- 目的
- 讓初學者先知道 HTML 是入口、CSS 控制呈現、JavaScript 提供操作，避免一開始把問題歸錯檔案。
- 修改位置
starter/files/index.html、starter/files/style.css、starter/files/main.js
只在瀏覽器和檔案樹確認 link 的style.css與 script 的main.js，並用 Network 確認兩個資源成功。- 預期結果
- 頁面有服務卡片；Network 找到
style.css與main.js，且目前沒有先把 CSS 或 JavaScript 貼進 HTML。 - 驗收證據
- 檔案樹、Network 的檔名與 status 200、Elements 的 link／script。
- 卡住先查
- 只檢查目前開啟的 URL 是否是該階段的
files/index.html，以及 Network 是否各有style.css與main.js。
-
Step 2
一次只處理文字階層
- 目的
- 把 font-family、font-size、font-weight、line-height 分成可以個別觀察的 CSS property。
- 修改位置
starter/files/style.css的.service-cardh2 與.service-cardp
只加入服務卡片 h2 的大小／粗細／行高，以及段落至少 1.5 的行高與 62ch 最大寬度。- 預期結果
- 標題比段落突出，段落行距較舒服；Computed 能讀到指定的 font-size、font-weight 與 line-height。
- 驗收證據
- Elements 選取 h2／段落，Computed 的 font-family、font-size、font-weight、line-height 與 390px 換行結果。
- 卡住先查
- 只搜尋
style.css是否真的有.service-cardh2；若有，重新整理後再看 Computed，不先改其他 selector。
-
Step 3
讓 token 真的被使用
- 目的
- 區分「宣告 CSS custom property」與「用 var() 讀取它」兩個不同步驟。
- 修改位置
starter/files/style.css的 :root、body、button 與 .service-description
建立 --brand、--text、--muted、--surface、--page-bg、--focus，並把 body、按鈕、卡片與輔助文字改成 var()。- 預期結果
- 修改 --brand 後至少兩個元件同步改色；Styles 看得到 var()，Computed 顯示瀏覽器最後的 rgb。
- 驗收證據
style.css的 token 宣告與 var() 使用、Styles 命中規則、Computed 的 background-color／color。- 卡住先查
- 用搜尋分別找
--brand與var(--brand)；兩者都不存在時先只修正 button 的背景色。
-
Step 4
補上背景與鍵盤 focus
- 目的
- 讓卡片和頁面有層次，並把操作狀態交給鍵盤使用者也能看見。
- 修改位置
starter/files/style.css的.service-card與 button:focus-visible
使用 --surface 設定卡片背景，使用 --focus 設定 focus-visible outline；保留 outline，不要用 outline: none。- 預期結果
- 卡片和頁面背景有差異；只按 Tab 走到按鈕時，focus ring 清楚可見。
- 驗收證據
- Computed 的 background-color、鍵盤 Tab 順序與 focus-visible outline。
- 卡住先查
- 只按 Tab 一次到按鈕，查看是否有 focus ring；沒有時只搜尋
focus-visible，不要先改顏色。
-
Step 5
重現並修正低對比缺口
- 目的
- 把對比問題變成可重現的檢查，理解 token 的錯誤會傳到所有使用它的元素。
- 修改位置
checkpoint/files/style.css的 --muted 與 .service-description
先用 Computed 讀真正的文字色與背景色，再把 --muted 改成 #52657d，重新檢查對比；不要只改 --text。- 預期結果
- 修改後段落文字較清楚，Computed 的 color 已改變；Console 只提供輔助值，仍要以畫面、DevTools 與對比檢查交叉驗證。
- 驗收證據
- 修改前後的 Computed color、白底背景、對比計算紀錄與 390px 畫面。
- 卡住先查
- 只選 .service-description，讀 color 和 background-color；接著搜尋 var(--muted) 是否命中同一元素。
-
Step 6
核心完成後加入 Light／Dark 變體
- 目的
- 把主題切換放在核心文字與色彩驗收之後，練習 data-theme、aria-pressed、localStorage 與刷新後驗收。
- 修改位置
examples/minimal.html的 :root、[data-theme="dark"]、#theme-toggle 與 script
切換 document.documentElement.dataset.theme，更新 aria-pressed 與按鈕文字；用 localStorage 保存，讀取失敗時仍讓本次切換可用。- 預期結果
- Light／Dark 都能讀取，刷新後主題狀態依 localStorage 保留；Tab、390px、Console 零錯誤都通過。
- 驗收證據
- Elements 的 data-theme／aria-pressed、Application 的 localStorage、刷新前後畫面、390px 與 Tab。
- 卡住先查
- 只檢查按鈕是否存在、aria-pressed 是否跟著改變，再檢查 data-theme；不要同時重寫整段 script。
讀碼順序：先找入口，再找被引用的檔案，最後用畫面、DOM、Console、Network 或資料結果驗證。
互動問答
先回答目前這一題，再展開解析；完成後按下一題，讓每一次回答都回到檔案或瀏覽器完成驗證。
Q1概念理解 「瀏覽器（browser）」在本堂要解決什麼問題？ 本題線索：瀏覽器；回到名詞卡與 畫面、Elements、Computed、Console 與 Network 都是瀏覽器執行後的證據。 展開解析收合解析
白話解析：
把 HTML、CSS 與 JavaScript 檔案讀成可以看的網頁。 正式來說，解析文件、套用樣式、建立 DOM 並執行腳本的用戶端軟體。
對照位置：
回到名詞卡「瀏覽器」，再看 畫面、Elements、Computed、Console 與 Network 都是瀏覽器執行後的證據。
預期觀察：
你應該能用自己的話說出：要預覽本堂檔案，或需要用畫面、DevTools、Console 驗收時。
常見錯誤：
不要只回答「它是瀏覽器」；那是重複名詞，不是說明責任。
立即驗證：
開啟 examples/minimal.html，依序做「先開啟 examples/minimal.html，從檔案底部找到 inline script；按一次主題按鈕，再切換 DevTools 的 390px viewport 並用 Tab 走到按鈕。」並記下畫面或工具證據。
Q2程式碼閱讀
修改指定規則後，你預測畫面會看到什麼？
本題線索：starter/files/index.html、starter/files/style.css、starter/files/main.js；要修改：只在瀏覽器和檔案樹確認 link 的 style.css 與 script 的 main.js，並用 Network 確認兩個資源成功。；觀察：檔案樹、Network 的檔名與 status 200、Elements 的 link／script。
展開解析收合解析
白話解析：
先看檔案責任，再預測結果。這一步的目的：讓初學者先知道 HTML 是入口、CSS 控制呈現、JavaScript 提供操作，避免一開始把問題歸錯檔案。
對照位置：
對照 Live Lab Step 1，位置是 starter/files/index.html、starter/files/style.css、starter/files/main.js；範例內容：<link rel="stylesheet" href="style.css">
<p id="status" class="status" role="status">尚未執行 CSS 驗收。</p>
<button id="action" type="button">執行 CSS 驗收</button>
<script src="main.js" defer></script>
預期觀察：
頁面有服務卡片；Network 找到 style.css 與 main.js，且目前沒有先把 CSS 或 JavaScript 貼進 HTML。
常見錯誤：
如果只改了檔案但沒有結果，先不要重寫全部；只檢查目前開啟的 URL 是否是該階段的 files/index.html，以及 Network 是否各有 style.css 與 main.js。
立即驗證：
實際操作後檢查 檔案樹、Network 的檔名與 status 200、Elements 的 link／script。。
Q3概念比較
「瀏覽器」和「檔案關係」在本堂的責任有什麼不同？
本題線索：比較 瀏覽器 與 檔案關係；操作位置：starter/files/style.css 的 .service-card h2 與 .service-card p
展開解析收合解析
白話解析：
瀏覽器：把 HTML、CSS 與 JavaScript 檔案讀成可以看的網頁。；檔案關係：HTML 是入口，CSS 負責外觀，JavaScript 負責操作。
對照位置：
對照兩張名詞卡的正式定義：解析文件、套用樣式、建立 DOM 並執行腳本的用戶端軟體。／由 HTML 透過 link 與 script 引用外部資源，形成結構、呈現與行為的責任分工。
預期觀察：
你應該能指出兩者分別出現在哪個檔案或工具，以及哪一個結果會改變。
常見錯誤：
不要把「改變畫面」當成所有技術的責任；先說清楚誰負責結構、呈現、行為或驗收。
立即驗證：
在 starter/files/style.css 的 .service-card h2 與 .service-card p 做「只加入服務卡片 h2 的大小／粗細／行高，以及段落至少 1.5 的行高與 62ch 最大寬度。」，再用 Elements 選取 h2／段落，Computed 的 font-family、font-size、font-weight、line-height 與 390px 換行結果。 比較前後差異。
Q4除錯驗收
如果完成操作後結果不對，你會先從哪一個證據開始查？
本題線索：examples/minimal.html 的 :root、[data-theme="dark"]、#theme-toggle 與 script；第一個檢查位置：Elements 的 data-theme／aria-pressed、Application 的 localStorage、刷新前後畫面、390px 與 Tab。
展開解析收合解析
白話解析：
先描述症狀，再提出一個最小假設。本堂常見錯誤是：只改 body class，沒有同步 data-theme、aria-pressed 或刷新後狀態。
對照位置：
對照最後一段 Live Lab：examples/minimal.html 的 :root、[data-theme="dark"]、#theme-toggle 與 script；檢查方式：只檢查按鈕是否存在、aria-pressed 是否跟著改變，再檢查 data-theme；不要同時重寫整段 script。
預期觀察：
你要能指出一個具體位置，而不是一次修改很多檔案。
常見錯誤：
不要先清快取、重裝工具或複製 Solution；先查看第一個可觀察錯誤。
立即驗證：
重新操作並留下「症狀、證據、假設、單一修正、結果」五項紀錄。
常見誤解
- 看到畫面沒有變化，不代表程式沒執行；先確認檔案、路徑、元素與狀態證據。
- 能複製 Solution 不代表理解；請先說出修改哪個檔案、預期哪個結果、用什麼證據確認。
- 本堂只使用原生 HTML、CSS、JavaScript 與瀏覽器 DevTools；先完成一張服務卡片的文字、色彩、背景、對比與 focus，不加入框架、建置工具或多頁網站。
本堂任務與驗收
完成一張服務型商家卡片：標題與段落有可解釋的文字階層，顏色透過 CSS custom property 統一管理，背景與按鈕清楚可辨，390px viewport 能閱讀與操作。
- 能用 指定元素的 Computed
font-family/font-size/font-weight/line-height/color/background-color留下可重現證據。 - 能用 token 宣告與 var() 使用 留下可重現證據。
- 能用 一般文字至少 4.5:1 對比 留下可重現證據。
- 能用 390px viewport 無水平捲軸 留下可重現證據。
- 能用 Tab focus 清楚且 Console 無錯誤 留下可重現證據。
- Starter、Checkpoint、Solution 的入口都能開啟並知道三者差異。
- 遇到問題時能先寫出症狀，再檢查一個最小假設。