先記住最重要的一件事！⭐

CSS 不會創造內容！

HTML 有的元素，CSS 才能修飾。

這就像：你必須先有一件白色 T-shirt，才能在上面畫圖案。
如果連 T-shirt 都沒有，你要畫在哪裡呢？🤔

同樣的道理：

HTML 先創造元素 → CSS 再來美化它

🔗 HTML 與 CSS 的對應關係

🏗️

HTML（創造者）

負責「生出」網頁元素

➡️

🎨

CSS（美化者）

負責「打扮」這些元素

👇 看看實際的對應關係：

➡️

h1 { color: #E91E63; }

我是標題

➡️

p { background: #E8F5E9; }

我是段落

➡️

button { background: #FF9800; }

CSS 無法憑空創造東西！

如果你的 HTML 裡面沒有寫 <h1>，
那不管你在 CSS 寫多少 h1 { ... }，都不會有任何效果！

因為根本沒有 h1 可以讓 CSS 去打扮呀～ 😅

2

CSS 可以放在三個地方！

用生活來比喻 🏠

想像 CSS 就是「衣服」，HTML 就是「人」。
衣服可以放在三個地方：

1️⃣ 直接穿在身上（行內樣式）→ 方便但亂
2️⃣ 放在房間衣櫃（內部樣式）→ 自己用很OK
3️⃣ 放在外面衣帽間（外部樣式）→ 大家都能用

👕

行內樣式（Inline Style）

「直接穿在身上」

直接在 HTML 標籤上面寫 style="..."，
CSS 樣式直接「貼」在那個元素身上。

👍 優點

馬上看到效果
適合快速測試

👎 缺點

程式碼會很亂
每個標籤都要寫一遍
很難維護修改

index.html

<!-- 行內樣式：直接寫在標籤上 -->

<h1 style="color: red; font-size: 32px;">我是標題</h1>

<p style="background-color: yellow;">我是段落</p>

<!-- ⭐ 也可以用 class 搭配行內樣式 -->
<div class="card" style="border: 2px solid blue;">
    我是卡片
</div>
                  

🗄️

內部樣式（Internal Style）

「放在房間衣櫃」

在 HTML 的 <head> 裡面，用 <style> 標籤包起來，
所有 CSS 都寫在這個標籤裡面。

👍 優點

CSS 集中在一起，好管理
可以一次修改多個元素
適合單一頁面使用

👎 缺點

只有這一頁能用
其他頁面要重寫一次

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 內部樣式範例</title>

    <!-- 內部樣式：寫在 <style> 標籤裡 -->
    <style>
        /* 標籤選擇器 */
        body {
            font-family: "微軟正黑體", sans-serif;
            padding: 20px;
        }

        h1 {
            color: #E91E63;
            text-align: center;
        }

        /* ⭐ Class 選擇器：用「.」開頭 */
        .container {
            max-width: 800px;
            margin: 0 auto;
        }

        .highlight {
            background: #FFEB3B;
            padding: 5px 10px;
        }

        /* ⭐ ID 選擇器：用「#」開頭 */
        #main-title {
            font-size: 2em;
            border-bottom: 3px solid #E91E63;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 id="main-title">我是標題</h1>
        <p>這是<span class="highlight">重點文字</span>喔！</p>
    </div>
</body>
</html>
                  

📁

外部樣式（External Style）

「放在外面衣帽間」⭐推薦

把所有 CSS 寫在一個 獨立的 .css 檔案，
然後在 HTML 用 <link> 標籤把它「連結」進來。

👍 優點

多個頁面可以共用同一個 CSS
修改一次，全部頁面都改好
檔案分開，好維護
⭐ 專業網站都用這招！

👎 缺點

要多一個檔案
初學者可能覺得麻煩

📄 style.css（獨立的 CSS 檔案）

style.css

/* 這是獨立的 CSS 檔案 */

/* 標籤選擇器：選擇所有 h1 */
h1 {
    color: red;
    font-size: 32px;
}

/* 標籤選擇器：選擇所有 p */
p {
    background-color: yellow;
}

/* ⭐ Class 選擇器：用「.」開頭 */
.navigation {
    background: #333;
    padding: 10px;
}

.card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
}

.btn-primary {
    background: #007bff;
    color: white;
}

/* ⭐ ID 選擇器：用「#」開頭 */
#header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 20px;
}

#footer {
    text-align: center;
    margin-top: 50px;
}
                  

📄 index.html（用 link 連結 CSS）

index.html

<!DOCTYPE html>
<html>
<head>
    <title>我的網頁</title>
    <!-- 外部樣式：用 link 連結外面的 CSS 檔案 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <!-- ⭐ 用 id="..." 對應 CSS 的 #header -->
    <div id="header">
        <h1>我是標題</h1>
    </div>

    <!-- ⭐ 用 class="..." 對應 CSS 的 .navigation -->
    <nav class="navigation">
        <a href="#">首頁</a>
        <a href="#">關於</a>
    </nav>

    <!-- ⭐ class 可以重複使用在多個元素 -->
    <div class="card">
        <p>這是第一張卡片</p>
        <button class="btn-primary">點我</button>
    </div>

    <div class="card">
        <p>這是第二張卡片</p>
        <button class="btn-primary">點我</button>
    </div>

    <div id="footer">
        <p>© 2024 版權所有</p>
    </div>
</body>
</html>
                  

3

三種方法比一比

方法	寫在哪裡	可以共用嗎？	好維護嗎？	推薦指數
👕 行內樣式	標籤上 style="..."	✗ 不行	✗ 很難	⭐
🗄️ 內部樣式	<head> 裡的 <style>	✗ 不行	✓ 還可以	⭐⭐
📁 外部樣式	獨立的 .css 檔案	✓ 可以！	✓ 超好！	⭐⭐⭐

4

什麼時候用哪一種？

給小朋友的建議

🧪

快速測試、練習用 → 行內樣式

想要馬上看到效果，用 style="..." 最快！

📄

只有一個頁面 → 內部樣式

作業或簡單網頁，用 <style> 就很夠用！

🌐

做真正的網站 → 外部樣式

有很多頁面時，用 .css 檔案才專業！

完整範例：三種方法都用看看！

三種方法示範.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS 三種連接方式</title>

    <!-- 方法二：內部樣式 -->
    <style>
        /* 這裡的 CSS 會套用到整個頁面 */
        body {
            font-family: "微軟正黑體", sans-serif;
            padding: 20px;
        }

        h2 {
            color: #4CAF50;
        }

        /* Class 選擇器範例 */
        .highlight {
            background: #FFEB3B;
            padding: 5px 10px;
        }

        /* ID 選擇器範例 */
        #main-content {
            max-width: 800px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <!-- 方法一：行內樣式 -->
    <h1 style="color: #E91E63; text-align: center;">
        我是用行內樣式的標題
    </h1>

    <div id="main-content">
        <!-- 這個 h2 會套用內部樣式的綠色 -->
        <h2>我是用內部樣式的標題</h2>

        <p>這是一般的段落文字。</p>

        <p>這段有<span class="highlight">高亮文字</span>喔！</p>

        <!-- 行內樣式也可以用在任何標籤 -->
        <p style="background: #FFF3E0; padding: 15px; border-radius: 10px;">
            這個段落有特別的背景色！
        </p>
    </div>

</body>
</html>
              

⭐

CSS 選擇器對照表

三種常用選擇器

在 CSS 中，選擇器決定了「你要修飾哪個 HTML 元素」。以下是三種最常用的選擇器：

選擇器類型	CSS 寫法	HTML 對應	特點
標籤選擇器	`h1 { }` `p { }` `div { }`	`<h1>` `<p>` `<div>`	選擇所有該標籤
Class 選擇器（用 . 開頭）	`.card { }` `.navigation { }` `.btn-primary { }`	`<div class="card">` `<nav class="navigation">` `<button class="btn-primary">`	可重複使用，一個元素可以有多個 class
ID 選擇器（用 # 開頭）	`#header { }` `#footer { }` `#main-content { }`	`<div id="header">` `<footer id="footer">` `<main id="main-content">`	每頁只能用一次，具有唯一性

💡 選擇器使用建議

📌 標籤選擇器：適合設定「全站統一」的基本樣式，例如所有 h1 的字體大小

📌 Class 選擇器：最常用！適合「可重複使用」的樣式，例如卡片、按鈕、導覽列

📌 ID 選擇器：適合「獨一無二」的元素，例如頁首、頁尾、主要內容區

選擇器範例.css

/* ========== 標籤選擇器 ========== */
body {
    font-family: "微軟正黑體", sans-serif;
}

h1 {
    font-size: 2em;
}

/* ========== Class 選擇器（用 . 開頭）========== */
.navigation {
    background: #333;
    padding: 15px;
}

.card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-primary {
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

/* ========== ID 選擇器（用 # 開頭）========== */
#header {
    background: linear-gradient(135deg, #667eea, #764ba2);
    padding: 30px;
    color: white;
}

#footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 20px;
}

#main-content {
    max-width: 1200px;
    margin: 0 auto;
}
            

今天學到的重點

CSS 不會創造內容！HTML 有的元素，CSS 才能修飾。
HTML 和 CSS 是對應關係：HTML 先創造元素 → CSS 再美化它
CSS 可以放在三個地方：行內、內部、外部
行內樣式：寫在標籤上 style="..."，適合快速測試
內部樣式：寫在 <head> 的 <style> 標籤裡，適合單一頁面
外部樣式：獨立 .css 檔案用 <link> 連結，適合多頁網站 ⭐推薦
選擇器：標籤（h1）、Class（.card）、ID（#header）
專業的網站開發，幾乎都用外部樣式！