CSS 簡介（Introduction）
CSS（Cascading Style Sheets，層疊樣式表） 負責網頁的外觀：顏色、字型、間距、排版與動畫。HTML 決定「有哪些內容」，CSS 決定「看起來如何」。
這份教材依學習順序編排：先搞懂選擇器與盒模型，再進入現代佈局（Flex / Grid），最後才是動畫、變數與函式。跟著章節實作，就能獨立完成常見頁面樣式。
學完這份教材你會什麼
- 用選擇器精準指定元素，並理解層疊與優先權
- 用盒模型控制寬高、邊距、邊框與陰影
- 用 Flex 與 Grid 排出導覽列、卡片牆與整頁版面
- 處理字型、顏色、背景與響應式設計
- 做出 hover 過渡、keyframes 動畫與主題變數
建議學習路徑
八個核心觀念
基本語法與選擇器
規則由 選擇器 + 屬性 + 值 組成。先掌握元素、class、id、後代與群組選擇器，再學屬性選擇器與偽類。
盒模型（Box Model）
每個元素都是盒子：content、padding、border、margin。實務上幾乎一律使用 box-sizing: border-box。
排版與佈局（Layout）
文字環繞圖片還會用到 float；元件對齊用 Flex；整頁或畫廊用 Grid。position 負責脫離文件流的定位。
文字與字體
font-family、font-size、font-weight、line-height 決定可讀性；text-align 與 text-decoration 處理對齊與裝飾。
顏色與背景
color / background-color 負責平面色；background-image、漸層與 background-size 負責層次。
偽類與偽元素（Pseudo）
:hover、:focus 描述狀態；::before、::after 在不改 HTML 的情況下加入裝飾。
響應式設計（Responsive）
用相對單位、flex / grid 與 @media（必要時加上 container query）讓同一套樣式適應手機與桌機。
動畫與過渡（Animation）
狀態變化用 transition；需要多關鍵幀或自動播放時用 @keyframes + animation。
學習建議
邊看邊改
CSS 最適合「改一行立刻看結果」。建議用瀏覽器開發者工具（F12）即時調整，再把確定的寫法抄回檔案。
最小練習
用一個標題、一段文字、一張圖片和兩個按鈕，做出置中卡片：圓角、陰影、hover 變色。這會用到盒模型、Flex、顏色與過渡。
下一步
從 網頁結構：HTML、CSS、JavaScript 開始，確認樣式表怎麼接到 HTML。