CSS 基礎入門教學：小白必讀指南

CSS 就像網頁的化妝師，它決定了 HTML 元素的顏色、大小、位置與外觀。本指南將一步步帶您了解 CSS 最核心的語法和概念。

1. CSS 語法：屬性與值的配對遊戲

CSS 樣式由一個個「規則集」組成，每個規則集都包含**選擇器**和**宣告區塊**。

/* 這是 CSS 規則集的格式 */
選擇器 {                     /* <-- 選擇器：告訴瀏覽器要選誰 */
    屬性: 值;                 /* <-- 宣告：這是核心的樣式設定 */
    屬性2: 值2;                /* <-- 一個宣告區塊內可以有多個宣告 */
}

**選擇器 (Selector)：** 決定了 CSS 規則應用於哪個 HTML 元素 (例如：p, .card, #logo)。
**宣告區塊 (Declaration Block)：** 用大括號 {} 包住，包含所有的樣式設定。
**宣告 (Declaration)：** 每一行樣式設定 (例如 color: red;)。
**屬性 (Property)：** 您想改變的外觀特徵 (例如 color, font-size)。
**值 (Value)：** 您想將該特徵改變成的樣子 (例如 red, 16px)。
**分號 (Semicolon)：** **非常重要！** 每個宣告 (屬性:值) 之後都必須加上分號 ; 來分隔。

2. CSS 三大核心選擇器：如何精準定位元素

這是 CSS 的基礎。學會這三種，您就能選中網頁上 99% 的元素。

① 元素選擇器 (Element Selector)

**寫法：** 直接寫出 HTML 標籤名稱，不需任何符號。

**用途：** 應用於**所有**該類型的元素。適合設定全站的共同樣式 (如所有段落的基礎字體)。

✨ 元素選擇器範例與說明：

**非語義化標籤：** div, span, p, a, img, ul, li。
**標題標籤：** h1, h2, h3... (用於設定不同層級標題的共同字體或邊距)。
**表單標籤：** input, button (用於統一樣式所有按鈕或輸入框)。
**語義化標籤：** (它們也是元素!) header, nav, section, article, footer, main。

/* CSS: 選擇所有 <button> 標籤，設定統一的背景色和圓角 */
button { 
    background-color: #f9f9f9; 
    border-radius: 4px;
}

/* CSS: 選擇所有 <footer> 標籤，設定統一的版權區樣式 */
footer { 
    text-align: center;
    padding: 20px;
    background-color: #333;
    color: white;
}

② Class 選擇器 (.class) (最常用!)

**寫法：** 在名稱前加上**點號** . (例如：.card, .button-primary)。

**用途：** 應用於所有 class="..." 屬性中包含該名稱的元素。一個元素可以有多個 Class，實現樣式**重用和組合**。

/* CSS: 選取 class="selector-box" 的元素 */
.selector-box { border-left: 5px solid blue; } 

/* HTML: 這個元素會被選中 */
<div class="selector-box">...</div>

③ ID 選擇器 (#id)

**寫法：** 在名稱前加上**井號** # (例如：#logo, #main-nav)。

**用途：** 應用於 **id 屬性** 匹配的元素。**規則：** 每個 ID 名稱在整個 HTML 文件中只能出現**一次**，用於選取獨一無二的元素。

/* CSS: 選取 id="unique-element" 的元素 */
#unique-element { background-color: yellow; }

3. 網頁美容術：常用樣式屬性

這些是您開始美化網頁時最常使用的幾個屬性。

/* -------------------------------------- */
/* 顏色與背景 (Color & Background) */
/* -------------------------------------- */
color: #ff0000;              /* 文字顏色 (用顏色名稱、HEX碼、RGB都可以) */
background-color: #333333;   /* 元素背景顏色 */
opacity: 0.8;                /* 元素透明度 (0.0 完全透明, 1.0 完全不透明) */

/* -------------------------------------- */
/* 字體與排版 (Typography) */
/* -------------------------------------- */
font-size: 20px;             /* 文字大小 (px: 像素, rem: 相對大小) */
font-weight: bold;           /* 字重 (bold, normal, 或 100~900 的數字) */
font-family: Arial, sans-serif; /* 字體家族 (若第一個字體不存在，則使用第二個) */
text-align: center;          /* 文字水平對齊 (left, center, right) */
line-height: 1.5;            /* 行高 (行與行之間的間距) */

4. 核心排版基石：巨細靡遺的盒模型 (Box Model)

網頁上的每個元素都是一個矩形盒子。理解這四個層次是精準控制排版的關鍵。

這是盒子的**內容區** (Content)

我們在這裡設定了 width: 80%;

**內邊距 (Padding) - 20px 空間：** 內容區與邊框之間的緩衝區域。 Padding 影響盒子的大小，並帶有元素的背景色。

**邊框 (Border) - 5px 線條：** 內邊距外圍的線條，是內容區的實際邊界。我們在這裡設定了 border: 5px solid...

**外邊距 (Margin) - 30px 空間：** 整個盒子與**外部其他元素**之間的隔離空間。 Margin 不帶有背景色。我們在這裡設定了 margin: 30px auto;

.box-model-example {
    /* 四大層次對應的 CSS 屬性 */
    width: 80%;           /* 1. 內容區大小 */
    padding: 20px;        /* 2. 內邊距 (在 Border 內側) */
    border: 5px solid #065f46; /* 3. 邊框 (在 Padding 外側) */
    margin: 30px auto;    /* 4. 外邊距 (在 Border 外側，用來推開其他元素) */
}

**💡 小提醒：** 元素的實際總寬度 = Margin (左) + Border (左) + Padding (左) + **Width** + Padding (右) + Border (右) + Margin (右)。

5. 進階排版：響應式設計 (RWD) 與媒體查詢

響應式設計 (Responsive Web Design, RWD) 確保您的網頁在不同裝置（如手機、平板、電腦）上都能有最佳的顯示效果。

✨ 核心工具：媒體查詢 (@media)

媒體查詢是 CSS 的一個「條件判斷式」。它允許您設定條件（例如螢幕寬度、裝置類型），只有當條件符合時，才會應用大括號 `{}` 內部的樣式。

大螢幕時：我是**藍色**，字體較大！（請拖動瀏覽器邊緣，將寬度縮小到 640px 以下，查看變化）

/* CSS 範例：根據螢幕寬度改變顏色和大小 */

/* 預設樣式 (適用於所有螢幕，或大於 640px 的螢幕) */
.rwd-example-box {
    background-color: #3b82f6; /* 藍色 */
    font-size: 1.25rem;
}

/* 媒體查詢：當螢幕寬度 **小於或等於 640 像素** 時，啟用以下樣式 */
@media screen and (max-width: 640px) {
    .rwd-example-box {
        background-color: #ef4444; /* 變為醒目的紅色 */
        font-size: 1rem;            /* 字體變小 */
        border: 3px dashed white;   /* 新增虛線邊框 */
    }
}

**💡 小提醒：** 為了確保 RWD 正確運作，HTML 文件的 <head> 中**必須**包含以下 viewport 設定（本檔案已包含）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">