建立可理解的品牌色與間距變數
修改檔案:style.css
完成後看見:Computed 顯示卡片 padding 24px、按鈕背景 rgb(12, 118, 86),來源由 --space-card 與 --color-brand 控制
CHAPTER 11 · PRACTICE WORKSPACE
整理後、可追查覆蓋來源的作品集 CSS
TASK STATUS
修改檔案:style.css
完成後看見:Computed 顯示卡片 padding 24px、按鈕背景 rgb(12, 118, 86),來源由 --space-card 與 --color-brand 控制
修改檔案:style.css
完成後看見:卡片說明使用元件級顏色,#portfolio p 不再覆蓋,.legacy-note 仍維持獨立責任
修改檔案:index.html、style.css
完成後看見:舊 class 搜尋為 0,新 class 同時保留基本、hover 位移與 focus-visible 輪廓
WORKSPACE
已完成 TASK-03;請操作完整作品,逐項核對三項 Task 的可見結果。
CSS REPAIR LAB
這段文字應維持容易閱讀的品牌色。
查看證據重構只整理規則,不改變內容責任。
第 10 章 → 第 11 章
保留第 10 章的 CTA、focus 與 reduced-motion 行為;本章只整理變數、選取器範圍與 class 呼叫方,下一章再把整理後的作品帶到不同寬度。
CONTINUE
三項固定任務都已完成;下一步請改造需求、留下成果證據,不要停在照抄 Solution。