歡迎來到網頁設計：使用樣式表 (CSS)

你好，未來的網頁設計師！這一章將帶領你的網站從單調的黑白文件，變身為令人驚豔的專業網頁。
我們將超越基礎結構（HTML 內容層），專注於表現層 (Presentation Layer)，這層結構負責控制網頁上一切外觀顯示的效果。

為什麼這很重要？ 使用樣式表 (CSS) 能確保你的整個網站風格統一，不僅節省大量時間，未來修改起來也非常方便！這就像是為整棟建築物設定一個主色調，而不需要逐一粉刷旅館內的每一個房間，兩者效率天差地遠。

什麼是層疊樣式表 (CSS)？

CSS 代表 **Cascading Style Sheets**（層疊樣式表）。它們是用於描述 HTML 文件呈現方式（外觀與格式）的語言。

  • 目的： 將內容（網頁上顯示什麼，由 HTML 定義）與表現（外觀如何呈現，由 CSS 定義）區分開來。
  • 表現層： CSS 完全運作於網頁開發的表現層之中。
  • 一致性： 如果你需要將 50 個頁面中所有一級標題（<h1>）的字型大小進行修改，你只需要在 CSS 檔案中修改一行代碼，而不需要去修改 50 個獨立的 HTML 檔案。
快速類比：HTML 與 CSS

想像一個人的身體：
HTML 是骨骼與器官（結構與內容）。
CSS 是衣著、化妝與髮型（外觀與風格）。

樣式表的類型與層疊優先級

應用樣式的方法有多種，但在 IGCSE 中，我們主要關注兩種方法：外部（連結）樣式表與行內樣式屬性。

1. 連結式（外部）樣式表

這些是儲存為 **層疊樣式表格式**（副檔名為 .css）的獨立檔案。
它們包含了整個網站（或特定頁面）的所有樣式規則，並連結 (attached) 到 HTML 文件中。

  • 建立： 你必須將樣式**儲存為層疊樣式表格式**（例如：styles.css）。
  • 連結： 使用 <link> 標籤將其連結至 HTML 頁面的 <head> 部分。
  • 檔案路徑： 當連結外部樣式表時，必須使用相對路徑（例如："../styles/main.css"）。這是因為絕對路徑（例如以 C:/ 或 D:/ 開頭）在網站上傳至伺服器後會導致連結失效。

2. 行內樣式屬性

這是直接寫在特定 HTML 標籤內部的樣式，使用 style 屬性。
範例：<p style="color: blue;">這段文字是藍色的。</p>

樣式的層疊優先級 (Cascading)

「層疊」(Cascading) 一詞意味著 CSS 規則是向下流動的，且某些規則可以覆蓋其他規則。這就是**多個連結樣式表與行內樣式之間的優先級關係**。

當發生衝突時（例如兩個不同的規則同時嘗試設定同一個元素，如標題）：

  1. 行內樣式屬性權力最大。因為它們是直接應用於該元素的，所以會覆蓋其他所有設定。（就像最嚴格的主管。）
  2. 外部樣式表（連結式）次之。如果連結了多個外部樣式表，通常在 <head> 部分最後連結的那一個具有最高優先權。（後寫入的規則勝出。）

重點總結： 行內樣式通常只用於特定、單一的覆蓋需求，而外部樣式表則用於處理整體設計的一致性。

樣式、類別與標籤

CSS 允許你透過兩種主要方法來應用格式：直接指定 HTML 元素（樣式），或建立可重複使用的自定義屬性（類別）。

1. 定義一般樣式（標籤選擇器）

樣式 (Style) 會自動對應到特定 HTML 標籤的所有實例。

  • 你會**建立外部樣式以標籤化 (tag)** 網頁中的元素，包括 h1, h2, h3, p, li 等標籤。
  • 如果你定義了 h1 {color: red;}，頁面上每一個 <h1> 都會變為紅色。

2. 定義類別 (Classes)

類別 (Class)（定義時使用點號，例如 .warning）是一種自定義樣式，你可以將其應用於任何 HTML 元素（<h1>, <p>, <div> 等）。

  • 建立類別是為了實現可重複使用的非標準格式。
  • 要使用它，請在 HTML 標籤中使用 class 屬性。範例：<p class="warning">...</p>。
  • 你必須熟練於**將類別應用到網頁的元素中**。

樣式與類別的區別： 樣式（標籤選擇器）會自動對應到特定類型的所有元素（例如，所有 <p> 標籤）。而類別是一個自定義、可重複使用的名稱，僅在 HTML 中明確呼叫時才會生效。

你必須掌握的核心 CSS 屬性

你需要能夠針對以下幾個關鍵領域**建立一般外部樣式與行內樣式屬性**：

1. 字型屬性

這些屬性控制文字的外觀。你必須能夠**指定字型屬性**，包括：

  • 字型家族 (Font Family)： 具體的字型類型（例如：Arial, 'Times New Roman', Sans-serif）。
  • 大小 (Size)： 以點 (pt) 或像素 (px) 為單位。
  • 顏色 (Colour)： 使用顏色名稱（red）或十六進制代碼（#FF0000）。
  • 對齊 (Alignment)： 左對齊、右對齊、置中、左右對齊 (fully justified)。
  • 樣式增強 (Enhancement)： 設定文字為粗體、斜體或加上底線（雖然底線通常透過文字裝飾屬性 text-decoration 來完成，但你必須理解此概念）。

2. 背景屬性

這些屬性控制內容背後的外觀。

  • 背景顏色 (Background Colour)： 設定元素（如標題或整個頁面主體）後方的顏色。
  • 背景圖像 (Background Images)： 設定元素後方的背景圖片。

3. 表格屬性

表格（包括 table, table row, table header 與 table data 元素）需要非常具體的樣式設定才能顯得專業且易於閱讀。

你必須能夠定義以下屬性：

  • 大小： 設定寬度與高度（使用像素或百分比）。
  • 背景顏色： 為單元格或整個表格填色。
  • 對齊：
    - 水平對齊： 左、右、中。
    - 垂直對齊： 頂部、中部、底部。
  • 間距與內距 (Spacing and Padding)：
    - Padding (內距)： 單元格內部的空間，即內容與單元格邊框之間的距離。
    - Spacing (間距)： 相鄰單元格之間的距離。
  • 邊框 (Borders)：
    - 顏色與粗細。
    - 可見/隱藏： 允許你顯示或隱藏網格線。
    - 合併 (Collapsed)： 讓表格邊框看起來整潔的標準技巧（將相鄰單元格的邊框合併為單一線條）。
✅ 常見錯誤警示！(Padding vs. Spacing)

學生常會搞混表格中的內距與間距。
Padding (內距) 是將內容推離單元格的內側邊緣。
Spacing (間距) 是將單元格彼此推開（就像表格單元格的外邊距）。

使用樣式表檔案

在實務操作中，你通常會收到一個樣式表檔案，或是需要自行建立一個。

1. 儲存樣式表

確保你的樣式檔案已正確儲存為 **層疊樣式表格式**（.css 副檔名）。這會告訴網頁瀏覽器該檔案包含的是表現規則，而非 HTML 內容。

2. 使用相對檔案路徑

正如前面所討論的，當你將 **外部樣式表連結** 到 HTML 檔案時，必須使用 **相對檔案路徑**。

  • 為什麼？ 相對路徑描述的是 CSS 檔案相對於 HTML 檔案的位置（例如：「往上進入一個資料夾，再進入 'styles' 資料夾」）。這能確保無論網站託管在哪裡，連結都能正常運作。

3. 註解

在外部樣式表中**加入註解**是一個良好的習慣。

  • 註解用來解釋程式碼區段的功能。這對你或其他未來可能編輯該檔案的開發者非常有幫助。
    範例：/* 這一段格式化所有的主標題標籤 */
  • 註解會被網頁瀏覽器忽略；它們不會顯示在網頁上。

💪 樣式表重點總結

1. CSS (表現層) 負責處理格式與樣式。
2. 優先級：行內樣式會覆蓋外部樣式。
3. 樣式 vs. 類別：樣式對應所有特定標籤 (h1, p)。類別是自定義、可重複使用的名稱 (.special)。
4. 基本屬性：掌握字型控制、背景顏色/圖片，以及所有特定的表格屬性（邊框：合併、內距、間距、對齊）。
5. 檔案管理：請務必使用 **相對檔案路徑** 並存為 **.css** 格式。