Chapter 05

CSS 基礎與畫面設計

CSS 負責網頁視覺。你會使用顏色、字體、間距、邊框與版面，讓內容變得清楚好讀。

核心觀念

CSS 透過選擇器找到 HTML 元素，再套用樣式。每個元素都像一個盒子，包含內容、內距、邊框與外距。

Box Model (盒模型) 重點

初學者最常遇到的排版問題都來自「Box Model」。請記住這個口訣：「內容是核心，Padding 往內擠，Border 是邊界，Margin 往外推。」

• Content (內容)：文字或圖片的實際大小。
• Padding (內距)：內容到邊框的距離（會改變元素的整體大小）。
• Border (邊框)：元素的實際邊界。
• Margin (外距)：與其他元素之間的距離（不屬於元素內部）。

建議在 CSS 最開頭加上 * { box-sizing: border-box; }，這能讓寬高計算包含 Padding 和 Border，大幅減少排版破版的機會。

常用 CSS

• color、background、font-size、line-height
• margin、padding、border、border-radius
• display: flex、display: grid

Prompt 範例

請只修改 style.css，將這個學習筆記頁設計成清爽的卡片式版面。使用白色背景、淡灰區塊、淺藍紫色調、8px 圓角，並加入手機版一欄排列。

範例檔案

本章範例在 examples/ch05-css-cards/。