選修單元 B｜EBCH1：定義網頁風格（層疊樣式表 CSS）

0 本頁學習重點與學習路線

重點

理解層疊樣式表（CSS）與 HTML 的分工：HTML 負責內容與結構，CSS 負責外觀與版面。
能寫出基本的 CSS 規則集：選擇器 { 屬性: 值; }。
能在內部樣式表（<style>）中快速測試與調整外觀，並逐步過渡到外部樣式表（.css 檔）。
掌握三種最常用選擇器：元素、類別（class）、id，並懂得在合適情境使用。
理解層疊（Cascade）與優先次序（Specificity）：當規則衝突時，瀏覽器如何決定最終樣式。

導讀：本頁如何學得快又穩

CSS 的學習最有效的方法，是先用少量規則「即時看到變化」，建立直覺；然後再回到語法與概念，把直覺整理成可解釋、可遷移的知識。換言之，本章先安排「體驗與觀察」練習，讓你感受到 CSS 能帶來甚麼改變，再逐步拆解規則集、選擇器與層疊。

在初學階段，建議先使用內部樣式表（在同一個 HTML 檔內的 <style>...</style>），因為你能在同一個檔案內同時看到「結構」與「外觀」。當你開始製作多頁面網站、需要統一風格時，才逐步過渡到外部樣式表（獨立 .css 檔），以免過早分散注意力。

本頁每個練習都附有一個獨立的 HTML 模擬器。你可以在同一段落內修改程式碼、按「執行」檢查效果；若結果與預期不同，請先回到選擇器是否選中正確元素、屬性是否拼寫正確、以及是否被其他規則覆蓋這三個方向排查。

1 甚麼是層疊樣式表（CSS）？

重點

CSS 用來描述網頁的外觀與版面（顏色、字體、間距、排列方式等）。
同一份 HTML，加入不同的 CSS，可以呈現完全不同的視覺效果。
CSS 的基本單位是規則集：選擇器 + 多個「屬性：值」宣告。
學習時先掌握「看得見的效果」，再回到語法細節，會更容易建立穩固概念。

概念導讀：CSS 的角色與價值

若沒有 CSS，瀏覽器仍然會顯示 HTML，但外觀主要依賴瀏覽器預設樣式：字體、邊距、標題大小等都相對樸素，而不同瀏覽器的預設樣式亦可能不完全相同。當你加入 CSS 後，就能主動控制頁面的整體風格，令版面更一致、更易讀。

學習 CSS 的第一步，並不是立即背誦大量屬性，而是先理解「CSS 可以改變甚麼」。你可以先從顏色、字體、內外邊距等最直觀的效果開始，再逐步接觸排版（例如 Flexbox / Grid）。本頁的第一個練習就是以觀察為主：把一段 CSS 貼進 <style>，立即看到頁面變化。

當你能穩定地寫出規則集並產生預期效果後，下一步才是理解更深層的規則：例如「為甚麼某些樣式會被覆蓋」「同一元素同時有 class 與 id 時，哪個較重要」。這些問題都屬於層疊與優先次序的範圍，後面會以圖像與綜合練習示範。

示範：有 CSS vs 沒有 CSS

以下兩個畫面使用同一份 HTML。左邊不使用 CSS（只靠瀏覽器預設樣式）；右邊加入少量 CSS 後，文字、間距與按鈕會更清晰。

沒有 CSS（瀏覽器預設）

加入 CSS 後

練習 1：體驗與觀察（先用內部樣式表）

請按以下步驟操作：

在下方模擬器的 <style> 區域中，把「片段 A」整段複製並貼上，然後按「執行」。
觀察畫面變化後，再把「片段 B」貼在片段 A 後面，再按一次「執行」。
嘗試自行改動：例如把顏色改為其他色碼、把 padding 改大/改小，觀察外觀如何改變。

片段 A（基本美化）

/* 片段 A：基本美化（可直接整段貼上） */
body {
  font-family: "Noto Sans TC", sans-serif;
  line-height: 1.8;
  padding: 24px;
}

h1 {
  color: #1a237e;
  margin-bottom: 0.2rem;
}

a {
  display: inline-block;
  margin-top: 12px;
  background: #ffb74d;
  color: #4e342e;
  padding: 10px 14px;
  border-radius: 999px;
  text-decoration: none;
}

a:hover {
  background: #ffa726;
}

片段 B（清單卡片效果）

/* 片段 B：為清單加入「卡片」效果（可貼在片段 A 後面） */
ul {
  list-style: "✔  ";
  background: #ffffff;
  padding: 16px 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  max-width: 420px;
}

li {
  margin: 6px 0;
}

Task 1｜把 CSS 貼到 <style>，立即觀察效果

預覽

Check Point 1：小測

題目以 CSS 的角色、HTML 與 CSS 的分工、以及規則集概念為主。

2 內部樣式表、外部樣式表與第三方 CSS

重點

內部樣式表（<style>）適合單頁練習、示範或快速原型，方便把 HTML 與 CSS 放在同一檔案內對照。
外部樣式表（.css）適合多頁面網站：同一套風格可重用，維護更集中。
第三方 CSS（框架/樣式庫）可加快製作，但亦可能帶來檔案體積、覆蓋衝突、版本相容與維護風險。
當樣式「不生效」時，常見原因是：連結路徑錯誤、選擇器未選中、或被其他規則覆蓋。

概念導讀：內部、外部與第三方 CSS 的選擇

在學習初期，把 CSS 寫在 <style> 內（內部樣式表）會較直觀：你可以一邊看 HTML 結構，一邊改 CSS，特別適合課堂練習與示範。當你熟悉基本語法後，就需要學會外部樣式表，因為真正的網站通常不只一頁。

外部樣式表的核心價值在於重用與一致性：你只需在 style.css 改一次，就可以令所有連結到它的頁面同步更新。這不但節省時間，也能避免同一套風格在不同頁面「越改越不一致」。

至於第三方 CSS（框架/樣式庫），它能提供一套已設計好的按鈕、表單、格線系統等，讓你快速做出整齊的介面；但你亦需要留意檔案大小、覆蓋衝突、版本更新與授權條款等問題。以下用表格整理要點。

內部樣式表 vs 外部樣式表（比較）

項目	內部樣式表（<style>）	外部樣式表（.css 檔）
放置位置	同一份 HTML 檔內	獨立檔案，HTML 以 <link> 連結
適合情境	單頁練習、示範、快速原型	多頁面網站、需要一致風格與集中維護
主要優點	學習/閱讀方便（HTML 與 CSS 同頁對照）	可重用、易維護、同一套風格套用多頁
限制 / 注意	頁面一多會難管理；容易複製貼上造成不一致	需要管理檔案與路徑；初學者容易連結錯誤

第三方 CSS（框架 / 樣式庫）的好處與風險

好處	風險 / 限制
快速建立整齊一致的介面與元件（按鈕、表單、格線）	檔案可能較大，影響載入速度（尤其流動網絡）
提供響應式設計方案，減少手動調整	自訂樣式可能被框架覆蓋（需要理解其選擇器與優先次序）
減少重複造輪子，讓你把精力放在內容與功能	版本更新可能導致樣式變動；需留意相容性與維護成本
社群文件多，遇到問題較易找到例子	需留意授權與使用條款（尤其在公開作品/商用情境）

練習 2：親手完成一次外部樣式表的連結與套用

請在下方模擬器完成以下任務：

在 index.html 的 <head> 內加入：<link rel="stylesheet" href="style.css">
按「執行」，確認背景顏色、卡片陰影與按鈕樣式都有生效。
（自我檢查）把連結檔名故意改錯（例如 styles.css），再按「執行」，觀察樣式會否消失；然後改回正確。

Task 2｜外部樣式表：建立 style.css 並在 HTML 連結

預覽

Check Point 2：小測

題目以內部/外部樣式表的差異、連結方式與第三方 CSS 的取捨為主。

3 CSS 語法與規則集（Rule Set）

重點

CSS 規則集由選擇器與宣告區塊組成：selector { property: value; }。
一個宣告（declaration）由「屬性名稱」「冒號」「屬性值」「分號」組成：color: red;。
CSS 會忽略無效宣告（例如漏寫單位、拼錯屬性名），因此排錯要特別留意小細節。
先熟練最常用的屬性，再逐步擴展；不需要一開始記熟全部屬性。

規則集（Rule Set）是 CSS 最核心的單位：它把「要影響的對象」（選擇器）與「要套用的外觀」（多個宣告）綁在一起。

最常見形式是：

selector {
  property: value;
  property: value;
}

瀏覽器會逐行解析 CSS：

若宣告語法正確，就套用到符合選擇器的元素。
若宣告語法錯誤或屬性值無效，該宣告通常會被忽略，但不一定影響同一規則集內其他宣告。
同一元素若被多條規則命中，最終樣式由層疊與優先次序決定（第 5 節）。

因此排錯時，建議先檢查：大括號是否成對、每個宣告是否有冒號與分號、數值是否有單位（例如 px）。

同一個選擇器可以包含多個宣告，分別控制文字、間距與背景：

.card {
  background: #fff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

這會令所有 class 為 card 的元素呈現卡片效果。

速記（shorthand） vs 展開（longhand）

margin: 10px 20px; 是速記，一次設定多個方向。
margin-top、margin-right 等是展開，逐個方向設定。

速記較精簡，展開較易讀；實務上兩者都常用。

把 : 寫成 =，或漏寫分號 ;。
把需要單位的數值漏寫單位（例如 width: 300;）。
拼錯屬性名（例如 backgroud-color）。
把 CSS 註解寫成 //；CSS 應使用 /* ... */。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`font-family`	設定字體系列（例如：'Noto Sans TC', sans-serif）。
`font-size`	設定字體大小（例如：16px、1rem）。
`font-weight`	設定字重（例如：400、700、bold）。
`font-style`	設定字體樣式（normal / italic）。
`font-variant`	設定字體變體（例如 small-caps）。
`font-variant-ligatures`	控制連字（ligatures）的啟用方式。
`font-variant-caps`	控制大小寫變體（small-caps 等）。
`font-variant-numeric`	控制數字字形（等寬數字、分數等）。
`font-variant-east-asian`	控制東亞字形變體（例如全寬、直排）。
`font-stretch`	控制字體寬度（condensed / expanded）。
`font-size-adjust`	依字體 x-height 微調可讀性。
`font-kerning`	控制字距微調（kerning）。
`font-feature-settings`	以 OpenType feature code 控制字形特性。
`font-variation-settings`	設定可變字體（variable font）軸參數。
`font-optical-sizing`	讓可變字體按字號自動調整字形細節。
`font`	字體相關的速記屬性（一次設定多項 font-*）。
`line-height`	設定行高（提升閱讀或壓縮段落）。
`letter-spacing`	設定字母間距。
`word-spacing`	設定單字間距。
`text-align`	設定文字水平對齊（left/center/right/justify）。
`text-align-last`	設定最後一行的對齊方式。
`text-indent`	設定首行縮排。
`text-transform`	控制大小寫轉換（uppercase/lowercase/capitalize）。
`text-decoration`	文字裝飾速記（底線、刪除線等）。
`text-decoration-line`	指定裝飾線類型（underline/line-through 等）。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`text-decoration-style`	指定裝飾線樣式（solid/dotted/wavy）。
`text-decoration-color`	指定裝飾線顏色。
`text-decoration-thickness`	指定裝飾線粗細。
`text-underline-offset`	指定底線與文字的距離。
`text-underline-position`	指定底線位置（例如 under）。
`text-shadow`	文字陰影。
`text-overflow`	文字溢出時的呈現（ellipsis 等）。
`white-space`	控制空白與換行（nowrap/pre/pre-wrap）。
`word-break`	控制單字斷行規則。
`overflow-wrap`	長字串換行（break-word 等）。
`hyphens`	自動斷字（連字符）行為。
`direction`	文字方向（ltr/rtl）。
`unicode-bidi`	與雙向文字（Bidi）相關的處理方式。
`writing-mode`	書寫模式（橫排/直排）。
`text-orientation`	直排時文字方向（upright 等）。
`vertical-align`	行內/表格儲存格的垂直對齊。
`tab-size`	tab 字元顯示寬度。
`quotes`	引號字形設定（與 ::before/::after 搭配）。
`caret-color`	輸入插入點（caret）顏色。
`color`	文字顏色。
`opacity`	透明度（0 到 1）。
`background`	背景速記（顏色、圖片、位置等）。
`background-color`	背景顏色。
`background-image`	背景圖片（可用 url() 或 linear-gradient()）。
`background-position`	背景圖片位置（例如 center / 0 0）。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`background-position-x`	背景 x 方向位置。
`background-position-y`	背景 y 方向位置。
`background-size`	背景圖片尺寸（cover/contain/具體尺寸）。
`background-repeat`	背景重複方式（repeat/no-repeat）。
`background-attachment`	背景是否隨捲動（scroll/fixed）。
`background-origin`	背景定位基準（content-box/padding-box/border-box）。
`background-clip`	背景繪製範圍（可限制到 padding-box 等）。
`background-blend-mode`	多層背景的混合模式。
`mix-blend-mode`	元素與背景的混合模式。
`filter`	濾鏡效果（blur、grayscale 等）。
`backdrop-filter`	對元素背後內容套用濾鏡（需瀏覽器支援）。
`box-shadow`	盒模型陰影（可做浮起效果）。
`outline`	外框速記（不佔 box model 空間）。
`outline-color`	外框顏色。
`outline-style`	外框線樣式（solid/dotted 等）。
`outline-width`	外框線粗細。
`outline-offset`	外框與邊框之間距離。
`box-decoration-break`	多行/多欄時背景與邊框的斷行行為。
`visibility`	可見性（hidden 仍佔位）。
`width`	內容盒的寬度。
`min-width`	最小寬度。
`max-width`	最大寬度。
`height`	內容盒的高度。
`min-height`	最小高度。
`max-height`	最大高度。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`aspect-ratio`	元素長寬比例（常用於圖片/影片容器）。
`margin`	外邊距速記（上右下左）。
`margin-top`	上外邊距。
`margin-right`	右外邊距。
`margin-bottom`	下外邊距。
`margin-left`	左外邊距。
`padding`	內邊距速記（上右下左）。
`padding-top`	上內邊距。
`padding-right`	右內邊距。
`padding-bottom`	下內邊距。
`padding-left`	左內邊距。
`border`	邊框速記（寬度、樣式、顏色）。
`border-width`	邊框寬度。
`border-style`	邊框樣式（solid/dashed 等）。
`border-color`	邊框顏色。
`border-top`	上邊框速記。
`border-top-width`	上邊框寬度。
`border-top-style`	上邊框樣式。
`border-top-color`	上邊框顏色。
`border-right`	右邊框速記。
`border-right-width`	右邊框寬度。
`border-right-style`	右邊框樣式。
`border-right-color`	右邊框顏色。
`border-bottom`	下邊框速記。
`border-bottom-width`	下邊框寬度。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`border-bottom-style`	下邊框樣式。
`border-bottom-color`	下邊框顏色。
`border-left`	左邊框速記。
`border-left-width`	左邊框寬度。
`border-left-style`	左邊框樣式。
`border-left-color`	左邊框顏色。
`border-radius`	圓角半徑（一次設定四角）。
`border-top-left-radius`	左上圓角。
`border-top-right-radius`	右上圓角。
`border-bottom-left-radius`	左下圓角。
`border-bottom-right-radius`	右下圓角。
`border-image`	以圖片繪製邊框（速記）。
`border-image-source`	邊框圖片來源。
`border-image-slice`	邊框圖片切片方式。
`border-image-width`	邊框圖片寬度。
`border-image-outset`	邊框圖片向外延伸距離。
`border-image-repeat`	邊框圖片重複/拉伸方式。
`box-sizing`	盒模型計算方式（content-box / border-box）。
`display`	元素的顯示類型（block/inline/flex/grid 等）。
`position`	定位方式（static/relative/absolute/fixed/sticky）。
`top`	定位偏移：上。
`right`	定位偏移：右。
`bottom`	定位偏移：下。
`left`	定位偏移：左。
`inset`	top/right/bottom/left 的速記。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`z-index`	堆疊次序（需配合 position）。
`float`	浮動（舊式排版常見）。
`clear`	清除浮動的影響。
`overflow`	溢出處理（visible/hidden/auto/scroll）。
`overflow-x`	水平溢出處理。
`overflow-y`	垂直溢出處理。
`scroll-behavior`	捲動行為（smooth 等）。
`overflow-anchor`	控制捲動錨點（避免內容載入時跳動）。
`overscroll-behavior`	控制捲動到邊界時的行為（防止回彈/連帶捲動）。
`overscroll-behavior-x`	水平 overscroll 行為。
`overscroll-behavior-y`	垂直 overscroll 行為。
`scroll-snap-type`	捲動吸附類型（scroll snap）。
`scroll-snap-align`	吸附對齊位置（start/center/end）。
`scroll-snap-stop`	控制是否必須停在吸附點。
`scroll-padding`	捲動吸附時的內距速記。
`scroll-padding-top`	捲動吸附內距：上。
`scroll-padding-right`	捲動吸附內距：右。
`scroll-padding-bottom`	捲動吸附內距：下。
`scroll-padding-left`	捲動吸附內距：左。
`scroll-margin`	捲動吸附外距速記。
`scroll-margin-top`	捲動吸附外距：上。
`scroll-margin-right`	捲動吸附外距：右。
`scroll-margin-bottom`	捲動吸附外距：下。
`scroll-margin-left`	捲動吸附外距：左。
`object-fit`	替換元素（img/video）內容如何填滿容器。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`object-position`	替換元素內容在容器內的位置。
`cursor`	滑鼠指標樣式（pointer、not-allowed 等）。
`pointer-events`	控制元素是否接收滑鼠事件。
`user-select`	控制文字是否可被選取。
`resize`	是否允許使用者拖拉改變尺寸（textarea 常用）。
`isolation`	建立新的混合/堆疊環境（影響 blend）。
`contain`	效能優化：限制元素對外部布局/繪製的影響。
`content-visibility`	瀏覽器可跳過未顯示內容的渲染（效能）。
`will-change`	提示瀏覽器某些屬性即將改變（效能/動畫）。
`flex`	flex 速記（grow shrink basis）。
`flex-grow`	flex item 的伸展比例。
`flex-shrink`	flex item 的收縮比例。
`flex-basis`	flex item 的基準大小。
`flex-direction`	主軸方向（row/column）。
`flex-wrap`	是否換行（wrap/nowrap）。
`flex-flow`	flex-direction + flex-wrap 速記。
`justify-content`	主軸對齊方式（space-between 等）。
`align-items`	交叉軸對齊方式（stretch/center 等）。
`align-content`	多行內容在交叉軸的分配方式。
`align-self`	單一項目的交叉軸對齊（覆寫 align-items）。
`order`	排列順序（數值較小者先）。
`gap`	項目之間間距（grid/flex 通用）。
`row-gap`	行間距。
`column-gap`	列間距。
`grid`	grid 速記。

以下整理常見的 CSS 屬性（規則），作為查閱用。你不需要一次記熟全部；建議先掌握本章節的「20 個最常用屬性」，再按需要回來查。

CSS 規則（屬性）	用途（簡述）
`grid-template-columns`	定義欄（columns）的尺寸。
`grid-template-rows`	定義列（rows）的尺寸。
`grid-template-areas`	以命名區域方式定義版面。
`grid-template`	grid-template-* 的速記。
`grid-auto-columns`	自動產生欄的尺寸。
`grid-auto-rows`	自動產生列的尺寸。
`grid-auto-flow`	自動放置方向（row/column/dense）。
`grid-column`	grid item 所佔欄（start / end）速記。
`grid-column-start`	grid item 欄起點。
`grid-column-end`	grid item 欄終點。
`grid-row`	grid item 所佔列（start / end）速記。
`grid-row-start`	grid item 列起點。
`grid-row-end`	grid item 列終點。
`grid-area`	grid item 命名或指定區域（含 start/end）。
`justify-items`	grid 內項目在行內方向對齊。
`justify-self`	單一 grid item 行內方向對齊。
`place-items`	align-items + justify-items 速記。
`place-content`	align-content + justify-content 速記。
`place-self`	align-self + justify-self 速記。
`transition`	過渡效果速記（屬性、時間、曲線、延遲）。
`transition-property`	指定哪些屬性要做過渡。
`transition-duration`	過渡時間。
`transition-timing-function`	過渡速度曲線（ease、linear 等）。
`animation`	動畫速記（名稱、時間、曲線等）。
`transform`	變形（平移/旋轉/縮放/傾斜）。

概念導讀：規則集如何影響網頁外觀

CSS 的語法看似簡單，但最常見的問題往往出在細節：例如漏寫分號、把冒號寫錯、或把需要單位的數值漏寫單位。由於瀏覽器通常不會「報錯停下來」，它多數情況只會忽略該宣告，所以你會看到「某一行不生效，但其他行仍正常」。

初學者不需要一次記熟所有屬性。較有效的做法是先掌握最常用的一組屬性（例如字體、顏色、間距、盒模型與簡單排版），能獨立做出整齊一致的頁面後，再按需要擴展其他屬性。以下表格整理 20 個最常用的 CSS 屬性，並逐一說明用途與例子。

如需更完整的查閱表，可開啟本節上方的 Flashcard（已收錄 200 條常見 CSS 屬性作參考）。

（一）文字與排版

屬性	作用	例子	常見用途
`font-family`	設定字體系列	`font-family: "Noto Sans TC", sans-serif;`	統一全頁字體風格
`font-size`	設定字體大小	`font-size: 16px;`	調整可讀性（標題/段落）
`font-weight`	設定字重	`font-weight: 700;`	標題加粗、強調
`line-height`	設定行高	`line-height: 1.8;`	令段落更易讀
`text-align`	文字對齊	`text-align: center;`	置中標題或導覽列

（二）顏色、背景與層次

屬性	作用	例子	常見用途
`color`	文字顏色	`color: #37474f;`	設定文字主色、提示色
`background-color`	背景顏色	`background-color: #f5f7fb;`	區分區塊層次
`background-image`	背景圖片/漸層	`background-image: linear-gradient(...);`	做橫幅、卡片效果
`opacity`	透明度	`opacity: 0.8;`	淡化元素（注意會影響子元素）
`box-shadow`	陰影	`box-shadow: 0 4px 12px rgba(0,0,0,.12);`	做卡片「浮起」效果

（三）盒模型（間距與邊框）

屬性	作用	例子	常見用途
`width`	寬度	`width: 320px;`	設定區塊尺寸（配合 max-width 更常用）
`margin`	外邊距	`margin: 16px;`	元素與元素之間的距離
`padding`	內邊距	`padding: 16px 18px;`	內容與邊框之間的距離
`border`	邊框	`border: 1px solid #e0e0e0;`	做分隔線、卡片邊框
`border-radius`	圓角	`border-radius: 12px;`	令卡片/按鈕更柔和

（四）版面與互動（常用於卡片排版）

屬性	作用	例子	常見用途
`display`	顯示方式	`display: flex;`	進入 Flexbox 排版
`flex`	flex item 尺寸	`flex: 1 1 280px;`	令卡片可伸縮並自動換行
`gap`	間距	`gap: 16px;`	控制項目間距（grid/flex）
`justify-content`	主軸對齊	`justify-content: space-between;`	水平分佈（flex）
`transition`	過渡效果	`transition: transform 0.12s;`	hover 更自然

練習 3：運用規則集美化卡片

請在下方模擬器完成以下修改，並觀察每一步的視覺效果：

Task A｜自動換行與間距（.cards）

在 .cards 加入 display、gap，以及（如使用 Flexbox）flex-wrap，令卡片可自動換行並保持間距。

提示：display 可用 flex；flex-wrap 可用 wrap；gap 可由 12px／16px 起步。

顯示參考寫法

.cards{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Task B｜卡片外觀（.card）

在 .card 加入 background、padding、border-radius、box-shadow，令卡片更清晰。

提示：底色可用 #ffffff；內距可用 16px；圓角可用 12px；陰影可用 0 4px 12px rgba(0,0,0,0.12)。

顯示參考寫法

.card{
  background: #ffffff;
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

Task C｜標籤像徽章（.tag）

在 .tag 加入背景顏色與圓角，令標籤像「小徽章」。

提示：可加入 display: inline-block;、padding、border-radius: 999px;，再配合 background-color 與 color。

顯示參考寫法

.tag{
  display: inline-block;
  background-color: #e0f2fe;
  color: #075985;
  padding: 4px 10px;
  border-radius: 999px;
}

Task D（選做）｜滑過效果（:hover）

在 .card:hover 加入 transform／box-shadow，並在 .card 加入 transition，令滑過效果更自然。

提示：transform 可用 translateY(-4px)；transition 應寫在 .card（未滑過狀態）。

顯示參考寫法

.card{
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

Task 3｜美化卡片：修改指定規則集，對照效果

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>卡片美化練習</title>
  <style>
    /* 目標：運用不同規則集，把以下卡片做得「一致、清楚、好讀」 */

/* 全頁：字體與背景（已完成，可自行微調） */
    body {
      font-family: "Noto Sans TC", sans-serif;
      margin: 0;
      padding: 24px;
      background: #f5f7fb;
      color: #263238;
    }

/* ✅ Task A：令卡片排列成自動換行的多欄 */
    .cards {
      /* TODO：加入 display、gap、flex-wrap 等 */
    }

/* ✅ Task B：美化卡片外觀（背景、內距、圓角、陰影、寬度） */
    .card {
      /* TODO */
    }

/* ✅ Task C：美化小標籤（tag） */
    .tag {
      /* TODO */
    }

/* ✅ Task D（選做）：加入 hover 過渡 */
    .card:hover {
      /* TODO（例如：transform / box-shadow / border-color） */
    }
  </style>
</head>
<body>
  <h1>作品集</h1>

<div class="cards">
    <div class="card">
      <span class="tag">HTML</span>
      <h2>結構</h2>
      <p>用語意標籤描述內容，例如 header、main、footer。</p>
    </div>

<div class="card">
      <span class="tag">CSS</span>
      <h2>外觀</h2>
      <p>用規則集改變字體、顏色、間距與版面。</p>
    </div>

<div class="card">
      <span class="tag">互動</span>
      <h2>滑過效果</h2>
      <p>用 :hover 配合 transition 令互動更自然。</p>
    </div>

<div class="card">
      <span class="tag">版面</span>
      <h2>Flexbox</h2>
      <p>用 display:flex 令卡片自動排版與換行。</p>
    </div>
  </div>
</body>
</html>

預覽

Check Point 3：小測

題目以規則集語法、宣告寫法、盒模型與常見錯誤為主。

4 選擇器（Selector）

重點

選擇器決定「哪些元素」會被套用規則，是 CSS 規則集的起點。
最常用三種選擇器：元素選擇器、類別選擇器（class）、id 選擇器。
類別（class）適合重用；id 應盡量保持唯一，用於特定元素。
選擇器越精準，越能避免不必要的覆蓋與副作用。

概念導讀：選擇器如何「選中」元素

CSS 的核心不只是「有甚麼屬性」，而是「你能否把樣式準確套用到目標元素」。選擇器就是這個關鍵：它決定規則會影響誰。選擇器若寫得過於籠統，往往會出現連鎖反應：原本只想改某一段，結果整頁都變了。

最常用的三種選擇器是元素、class 與 id。元素選擇器適合設定全站共通的預設（例如段落行距）；class 適合用於一組可重用的風格（例如多張卡片同樣式）；id 則用於極少數「單一元素」的特別設定。以下表格總結它們的語法、用途與注意事項。

本節練習會讓你分別嘗試三種選擇器，並比較它們所產生的效果差異。完成後，你應能更有系統地選擇：何時用元素、何時用 class、何時才用 id。

三種最常用選擇器（表格整理）

選擇器種類	寫法	例子	適合用途	注意事項
元素選擇器	`元素名`	`p`	設定整體預設（段落行距、清單樣式等）	影響範圍大，容易誤傷其他位置
類別選擇器（class）	`.類別名`	`.card`	可重用風格（多張卡片、按鈕樣式）	class 名可同時用在多個元素上
id 選擇器	`#id`	`#main-title`	針對單一元素的特別設定	同一頁面 id 應保持唯一

練習 4：分別嘗試三種選擇器並比較效果

請在下方模擬器依序完成 Task 1 至 Task 3。每完成一個 Task 都按「執行」觀察效果，並思考：哪一種選擇器最適合該任務？

Task 4｜選擇器練習：元素 / class / id

預覽

Check Point 4：小測

題目以三大選擇器語法、選取範圍與常見誤解為主。

5 層疊（Cascade）與優先次序（Specificity）

重點

當多條規則同時影響同一元素，瀏覽器會以層疊機制決定最終樣式。
常見優先次序：id 通常高於 class，class 通常高於元素選擇器。
在優先次序相同的情況下，較後出現的規則會覆蓋較前出現的規則。
行內樣式（inline style）與 !important 會明顯改變覆蓋結果，需理解其影響並避免濫用。
排錯時要同時檢查：選擇器是否命中、是否被更高優先次序覆蓋、以及規則出現次序。

層疊（Cascade）是 CSS 的核心規則：當多條樣式規則同時適用於同一元素時，瀏覽器要決定最終採用哪一個值。

優先次序（Specificity）則是層疊其中一個重要因素：不同類型選擇器有不同「強度」。

判斷哪條規則生效時，可用以下順序思考（由最影響到較少影響）：

重要性：是否有 !important？（同為 important 時再比優先次序）
優先次序（Specificity）：id > class > 元素
出現次序：同優先次序時，較後者覆蓋較前者
繼承：部分屬性（例如字體、顏色）會由父元素繼承，除非被明確覆蓋

行內樣式（寫在 HTML 的 style="..."）通常具有很高的優先次序；而 !important 會把該宣告提升到更前的位置，因此應謹慎使用。

p { color: blue; }
.notice { color: orange; }
#msg { color: purple; }

若某段落同時有 class="notice" 與 id="msg"，它會以 #msg 的顏色為準，因為 id 優先次序較高。

行內樣式 vs !important

行內樣式：方便快速測試，但會令樣式分散，長遠不易維護。
!important：可強制覆蓋，但濫用會令排錯變得困難，亦會破壞原有層疊設計。

一般建議：優先透過「更精準的選擇器」與「合理的規則次序」解決覆蓋問題；只有在非常必要時才考慮 !important。

為了讓樣式生效而到處加 !important，結果令後續維護更困難。
嘗試用較弱的選擇器覆蓋較強的選擇器（例如用 p 覆蓋 #msg），不論次序如何都很難成功。
忘記「同優先次序才看次序」：不同優先次序時，次序不是最重要因素。

概念導讀：層疊與優先次序如何決定最終樣式

當你寫 CSS 寫到某個階段，最常遇到的不是「不知道有甚麼屬性」，而是「明明寫了，為甚麼不生效」。這通常不是瀏覽器故障，而是層疊規則的結果：你的規則可能沒有命中目標元素，或者被另一條更高優先次序的規則覆蓋。

理解層疊與優先次序後，你就能更有系統地排錯：先確認選擇器是否命中（例如 class/id 是否寫對）；再比較優先次序（id/class/元素、行內樣式、是否有 !important）；最後才看規則的出現次序（同優先次序下，較後者覆蓋較前者）。

以下圖像把兩個概念放在同一張圖中：左側是「樣式來源」的層疊，右側是「選擇器優先次序」。

練習 5：綜合練習（層疊、優先次序、行內樣式、!important）

請按以下步驟完成，並在每一步按「執行」觀察結果：

觀察：先不改任何東西，直接執行。四段文字的背景顏色分別是甚麼？（提示：最後一段有行內樣式）
類別選擇器（.notice）：把「我只有 class。」的背景顏色改為白色。
提示：背景顏色屬性為 background-color；白色可使用色名 white。
id 選擇器（#msg）：把「我同時有 id 與 class。」的背景顏色改為淡橙色（例如 #fff3e0），並觀察它如何覆蓋 .notice 的設定。
同一優先次序：程式碼中有兩條 .notice。把第二條 .notice 的背景顏色改成另一種顏色，再執行，觀察「較後者覆蓋較前者」。
行內樣式（Inline Style）：把最後一段的 style="background-color:..." 改成其他顏色（例如 #c8e6c9 → #ffccbc），觀察行內樣式的影響。
!important（慎用）：嘗試新增一條規則，把 p 的背景顏色強制設為白色，並在該宣告後加入 !important，觀察它是否能覆蓋其他規則（包括行內樣式）。
整理：把 !important 移除，改用更精準的選擇器（例如 #msg、.notice）達成目標，避免依賴 !important。

Task 5｜層疊與優先次序：一步步觀察覆蓋規則

<!doctype html>
<html lang="zh-Hant">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>層疊與優先次序練習</title>

h1{
      margin: 0 0 10px;
      color: #1a237e;
      font-size: 1.4rem;
    }

/* 共通外觀（不屬於比較重點） */
    p{
      padding: 12px 14px;
      border-radius: 12px;
      margin: 10px 0;
      border: 1px solid #dfe3ff;
    }

/* =====================================================
       下面開始：同一個屬性（background-color）在不同層級的比較
       ===================================================== */

/* （1）元素選擇器：優先次序較低 */
    p{
      background-color: #e3f2fd;
    }

/* （2）類別選擇器：優先次序高於元素選擇器
       TODO：為 .notice 加入 1 行宣告（按題目要求修改背景顏色）
    */
    .notice{
      /* TODO：在此加入 1 行宣告 */
    }

/* （3）id 選擇器：優先次序高於 class
       TODO：為 #msg 加入 1 行宣告（按題目要求修改背景顏色）
    */
    #msg{
      /* TODO：在此加入 1 行宣告 */
    }

/* （4）同一個選擇器出現兩次：較後者會覆蓋較前者（同優先次序，比次序）
       TODO：把這一條 .notice 改成另一種背景色，觀察哪一條生效
    */
    .notice{
      /* TODO：在此加入 1 行宣告 */
    }

/* （5）!important（慎用）
       TODO：自行新增一條規則，強制覆蓋 p 的背景顏色，並加上 !important
       提示：!important 要放在「值」之後、分號之前
    */
  </style>
</head>
<body>
  <h1>層疊與優先次序練習</h1>

<p id="msg" class="notice">我同時有 id 與 class。</p>

<p class="notice">我只有 class。</p>

<p>我只有元素。</p>

<p class="notice" style="background-color:#c8e6c9;">
    我有 class，而且我加了 <strong>行內樣式（inline style）</strong>。
  </p>
</body>
</html>

預覽

Check Point 5：小測

題目以層疊、優先次序、行內樣式與 !important 的影響為主。

6 CSS 應用題（20 題）：由淺入深

重點

每題只需編寫 CSS；HTML 已預先準備，你可專注在「選擇器＋宣告」上。
題目由「加入 1 行宣告」開始，逐步提升至需要寫 4–5 行宣告（更貼近真實排版）。
按「執行並測試」會自動彈出 HTML 模擬器（約佔畫面 8 成），並即時顯示批改結果與提示。
參考答案與解釋預設為隱藏；建議先自行嘗試，再打開對照。

導讀：如何使用「即時預覽＋自動批改」

以下 20 題只需要你編寫 CSS。每題下方都有一個 CSS 代碼輸入框，並已為你預留可直接填寫的空位。你可先按照題目提示，把需要的屬性與值逐行加入，完成後按「執行並測試」。

按下「執行並測試」後，系統會自動彈出 HTML 模擬器（約佔畫面 8 成），把你的 CSS 套用到題目提供的 HTML，並即時顯示批改結果。若未達到要求，批改區會列出未符合的項目，方便你針對性修改再測試。

每題都提供「參考答案與解釋」（預設收起）。建議你先嘗試自行完成，再打開對照，並留意解釋如何把「題目文字」翻譯成「選擇器＋宣告」。

20 題 CSS 應用題（附提示、參考答案與自動批改）

提示：題目由淺入深；前段多為 1–2 行宣告，後段會逐步增加到 4–5 行宣告。

（正在載入題目⋯）