單元 2：理解 CSS 的功能
歡迎來到網頁設計的世界！本章的主題是層疊樣式表（Cascading Style Sheets，簡稱 CSS）。
如果說 HTML 提供了網頁的結構和內容（文字、連結、圖片），那麼 CSS 就是讓網頁變得美觀、整潔且專業的「魔法」。你可以把 CSS 想像成網站的室內設計師。
剛開始接觸可能會覺得有點複雜，別擔心！我們會詳細拆解 CSS 的運作原理、為什麼它如此重要，以及讓你輕鬆為網頁設計樣式所需掌握的簡單規則。
1. 什麼是 CSS？為什麼我們需要它？
定義
CSS 代表層疊樣式表（Cascading Style Sheets）。它的主要功能是描述 HTML 元素在螢幕、紙張或其他媒體上的呈現方式。
關注點分離（為什麼它很重要？）
在現代網頁開發中，我們遵循關注點分離（Separation of Concerns）的原則。這意味著要將內容（HTML）與呈現/設計（CSS）分開。
- HTML：只專注於結構（例如：「這是一個標題」、「這是一個段落」、「這是一個按鈕」。）
- CSS：只專注於外觀（例如：「標題應該是藍色且置中」、「按鈕應該有綠色背景和圓角」。）
比喻：想像一下組裝汽車。HTML 是引擎、車架和底盤——這些構成了車子的基本結構。CSS 則是烤漆、舒適的座椅、合金輪圈和儀表板設計。沒有 CSS，車子雖然能開，但看起來就像一個無聊的金屬盒子！
重點摘要：CSS 控制了格式和佈局的各個方面，確保單個網頁或整個大型網站的風格保持一致。
2. CSS 規則的構造
CSS 規則是一組指令，告訴瀏覽器如何為特定的 HTML 元素設定樣式。每一條規則都遵循一個清晰的結構：
第 1 步：選擇器（Selector）
選擇器用於識別你想要設定樣式的 HTML 元素。
- 範例：如果你想改變所有段落文字的樣式，你的選擇器就是
p。 - 範例：如果你想改變所有一級標題的樣式，你的選擇器就是
h1。
第 2 步：宣告區塊（Declaration Block）
這部分用大括號 { } 包圍，並包含一或多個宣告（即具體的樣式指令）。
第 3 步：宣告（屬性與值）
每個宣告由一個屬性（Property）和一個值（Value）組成，中間用冒號 : 隔開。宣告必須以分號 ; 結尾。
宣告記憶小撇步：記住 PVC（Property: Value;）。
規則範例說明：
h1 { color: red; font-size: 24px; }
-
選擇器（
h1）：鎖定所有標題 1 元素。 -
屬性 1（
color）：改變文字顏色。 -
值 1（
red）：將文字設為紅色。 -
屬性 2（
font-size）：改變文字大小。 -
值 2（
24px）：將文字大小設為 24 像素。
常見錯誤：別忘了在每個宣告結尾加上分號 ;，否則區塊中的後續樣式規則可能會失效！
3. 應用 CSS 的方法（連結 HTML 與樣式）
將 CSS 納入 HTML 文件主要有三種方式。選擇哪種方式取決於你所建構網站的規模和複雜度。
3.1 外部樣式表（最佳實踐）
這是所有大型專案中最專業且最推薦的方法。
- 運作方式：所有的 CSS 程式碼都儲存在一個獨立的文件中（例如：styles.css）。
-
功能：HTML 文件透過放置在
<head>區塊內的<link>標籤連結到此外部文件。 -
程式碼：
<link rel="stylesheet" type="text/css" href="styles.css" /> - 優點：集中管理。你只需編輯一個 CSS 文件，就能同時改變成千上萬個網頁的樣式。當你需要更新網站外觀時，能節省大量時間。
3.2 內部（嵌入式）樣式
這種方法適用於某些頁面有獨特的樣式，而你不想為此建立一個完整的外部檔案。
-
運作方式：CSS 規則直接寫在 HTML 文件中，並包含在
<style>標籤內。 -
放置位置：
<style>標籤放置在 HTML 文件的<head>區塊內。 - 優點：樣式與內容結構分開（不同於行內樣式），但仍包含在單個檔案中。
3.3 行內樣式（盡量避免）
行內樣式將 CSS 直接應用於單個 HTML 元素。
-
運作方式：CSS 宣告作為
style屬性直接加入到 HTML 開始標籤內。 -
程式碼：
<p style="color: green; margin-left: 20px;">這個段落使用了行內樣式。</p> -
缺點：違反了關注點分離原則。如果你需要改變所有段落的樣式，你必須手動編輯每一個
<p>標籤，這非常耗時且容易出錯。除非迫不得已（例如某些電子郵件模板），否則應儘量避免使用。
快速複習：樣式優先級
對於專業且可擴展的開發工作，優先順序永遠是：
1. 外部樣式表（易於維護）
2. 內部樣式（特定頁面樣式）
3. 行內樣式（最後手段）
4. 層疊的重要性
CSS 中的「C」代表層疊（Cascading）。這是一個關鍵特性，決定了當多條樣式規則發生衝突時，哪一條規則會勝出。
比喻：想像一下，你同時收到三位經理針對同一項任務的指示。你該聽誰的？「層疊」就是為瀏覽器解決這個問題的機制。
理解衝突解決方案
當瀏覽器發現多條規則試圖為同一個元素設定樣式時（例如：外部樣式表說段落文字是藍色，但行內樣式卻說它是紅色），它會使用嚴格的層級體系來決定應用哪一條規則。
層疊順序的主要因素是特殊性（Specificity，即規則的詳盡程度）和來源位置（Source Location，樣式的來源）。
特殊性規則（基本層級）
一般來說，越接近實際 HTML 元素的樣式，被認為越具有「特殊性」，並會覆蓋離得較遠的樣式。
簡單的優先級順序（誰會勝出）如下：
- 行內樣式：始終獲勝，因為它們直接應用於該元素。（特殊性最高）
-
內部 / 嵌入式樣式：在當前 HTML 頁面
<head>區塊中定義的樣式。 - 外部樣式表：從獨立檔案連結進來的樣式。
- 瀏覽器預設樣式：如果你完全沒有套用 CSS，瀏覽器所使用的內建樣式。（特殊性最低）
你知道嗎？「層疊（Cascading）」一詞源於樣式表像瀑布一樣層層向下流動並繼承規則的概念，但更具體的規則（如行內樣式）擁有覆蓋繼承規則的權力。
為什麼層疊很有用？
層疊功能允許開發者先定義一個廣泛的「全域樣式」（透過外部樣式表），然後再輕鬆地進行小範圍的局部調整（透過內部或行內樣式），而無需重寫整個樣式表。它在保持控制力的同時，提供了極大的靈活性。
功能重點摘要
- 功能：CSS 管理外觀（格式、顏色、佈局）並確保關注點分離。
- 規則結構：選擇器鎖定元素，屬性定義功能（如 color），值定義設定（如 blue）。
- 最佳方法：使用外部樣式表以利於維護。
- 層疊：決定了衝突發生時哪條規則勝出。行內樣式總是會覆蓋外部或內部樣式。
請繼續多加練習定義規則並連結外部樣式表。掌握這些核心概念，會讓你的網頁開發過程順暢許多！