LESSON-04 · solution
這一頁不是直接複製答案；先逐檔看差異、修改原因與驗收證據，再把需要的改動帶回自己的資料夾。 這頁用 可觀察證據 和 anchor 指出下一個動作。
這一頁的結果：所有相關檔案可開啟或閱讀；沒有 TODO、CHECKPOINT 或 placeholder；能說明每個檔案為何改動
工作方式：先把這一階段複製到自己的工作資料夾，開啟 files/index.html，記下修改前的畫面、Elements、Styles、Computed、Network 與鍵盤 focus狀態。
會用到的檔案：index.html、style.css
本堂焦點：理解 selector、cascade 與規則套用順序
一次只做一張卡。完成後先重新整理入口，再留下證據，才進入下一張。
現在要做：先對照差異，再檢查 在 style.css 的「.brand」對照這項變更：.brand {
color: #155e75;
}
貼上位置：style.css 的 .brand 區塊
.brand {
color: #155e75;
}預期結果：只有品牌連結套用預期的品牌色，其他文字不會一起變色。
驗收證據：Elements 選取 .brand 後，Styles 命中 .brand；Computed 的 color 為 #155e75。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 style.css 的「.service-card」對照這項變更：.service-card {
background-color: #eaf5f8;
color: #17324d;
}
貼上位置：style.css 的 .service-card 區塊
.service-card {
background-color: #eaf5f8;
color: #17324d;
}預期結果：兩張服務卡都出現淡色背景與深色文字，頁面說明段落保持原本顏色。
驗收證據：Elements 可選到兩個 .service-card；Styles 命中同一條規則，Computed 可讀到 background-color 與 color。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 style.css 的「.button」對照這項變更：.button {
background-color: #176b87;
color: #ffffff;
text-decoration: none;
}
貼上位置：style.css 的 .button 區塊
.button {
background-color: #176b87;
color: #ffffff;
text-decoration: none;
}預期結果：CTA 具有品牌背景色與白色文字，其他一般連結不會被套用按鈕外觀。
驗收證據：Elements 選取 .button 後，Styles 命中 .button；Computed 的 background-color 為 #176b87。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
現在要做：先對照差異，再檢查 在 style.css 的「.button cascade 規則順序」對照這項變更：.button { background-color: #176b87; }
貼上位置：style.css 的 .button cascade 規則順序 區塊
.button { background-color: #176b87; }預期結果：修正後 .button 的 Computed background-color 回到 #176b87，且不需要 !important。
驗收證據：修正前 Styles 顯示前一條 background-color 被劃掉；修正後最後生效值為 #176b87。
常見錯誤：只複製完整答案，卻沒有先理解這一項差異的責任。
第一個檢查：只對照目前差異指定的檔案與 anchor。
完整檔案收在可展開的卡片中；先完成上方微步驟，再用這裡查閱與複製。檔案位置要和目前的相對路徑一致。
index.htmlHTML-only 入口：提供品牌、兩張服務卡、CTA 與可觀察的內容結構。style.css本堂 CSS：練習 class selector、property、value 與 cascade；沒有 JavaScript。index.htmlHTML-only 入口：提供品牌、兩張服務卡、CTA 與可觀察的內容結構。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
<!doctype html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS 基礎：選擇器與 Cascade</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="site-header">
<a class="brand" href="index.html">安心維護</a>
</header>
<main class="page-shell">
<p class="eyebrow">LESSON-04 · CSS 選擇器與 Cascade</p>
<h1>安心維護服務</h1>
<p class="page-description">用 class selector 讓每個區塊只負責自己的樣式。</p>
<section class="service-card" aria-labelledby="inspection-title">
<h2 id="inspection-title">到府檢查</h2>
<p>先找出空間中需要處理的問題，提供清楚的檢查建議。</p>
</section>
<section class="service-card" aria-labelledby="maintenance-title">
<h2 id="maintenance-title">定期維護</h2>
<p>依照固定週期整理與追蹤，讓日常使用保持穩定。</p>
</section>
<p><a class="button" href="#contact">開始諮詢</a></p>
<section id="contact" aria-labelledby="contact-title">
<h2 id="contact-title">聯絡方式</h2>
<p>CTA 只負責帶訪客前往下一個區塊，不會改變一般段落的樣式。</p>
</section>
</main>
</body>
</html>style.css本堂 CSS：練習 class selector、property、value 與 cascade；沒有 JavaScript。這段要貼在哪裡：先在自己的工作資料夾建立同名相對位置，再複製內容。
:root { font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans TC", sans-serif; color: #17324d; background: #f5f8fb; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; line-height: 1.7; }
.site-header { width: min(100% - 2rem, 760px); margin: 1rem auto 0; padding: .75rem 0; }
.page-shell { width: min(100% - 2rem, 760px); margin: 2rem auto; padding: 1rem 0 3rem; }
.eyebrow { color: #176b87; font-weight: 800; letter-spacing: .06em; }
.page-description { color: #52657d; }
.service-card { margin-top: 1rem; }
.button { display: inline-block; margin-top: 1rem; padding: .55rem .85rem; border-radius: 9px; font: inherit; }
a:focus-visible { outline: 3px solid #f1ab2c; outline-offset: 3px; }
@media (max-width: 560px) { .site-header { margin-top: .5rem; } .page-shell { margin-top: 1rem; padding-inline: .25rem; } }
.brand { color: #155e75; }
.service-card { background-color: #eaf5f8; color: #17324d; }
.button { background-color: #176b87; color: #ffffff; text-decoration: none; }Solution 對照完成後，回到 README 整理證據，並準備下一堂課的先備知識。