CSS PPT 1(A) — CSS 簡介 I 練習

學習目標

理解 HTML 與 CSS 的分工：HTML 管「結構／內容」，CSS 管「外觀／樣式」
知道 CSS 可以套用到哪些 HTML 標籤（文字、區塊、表格、表單等）
學會最基本的 CSS 語法：選擇器 { 屬性: 值; }
完成一個簡單的「HTML + CSS」頁面，並和最終版本比對

概念：HTML + CSS 的分工

在投影片中我們已經看到：

HTML (Content)：決定「要顯示什麼內容」—— 文字、圖片、表格、表單…
CSS (Style)：決定「內容要長什麼樣子」—— 顏色、字型、大小、位置、間距…

可以把 HTML 想成「骨架 + 文字」，CSS 則是「化妝 + 佈置房間」：同一個 HTML 結構，加上不同的 CSS，整個網站感覺會完全不一樣。

Step 1：只用 HTML，先建立一個最簡單頁面

概念：CSS 之前，HTML 只能「粗糙地」顯示內容

在投影片中老師提到：
「HTML can display some words without formatting」。
也就是說，即使不用 CSS，我們一樣可以顯示文字，但幾乎沒有排版、顏色與美感。

先建立一個只用 HTML 的檔案：Slides_CSS1_intro-basic.html（純練習用，之後會加 CSS）。

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <title>CSS 簡介一 — 純 HTML 版本</title>
</head>

<body>

  <h1>CSS 簡介一 — 純 HTML</h1>

  <h2>1. HTML 文字標籤</h2>
  <p>這是一般段落文字 (p)。</p>
  <p>這裡有 <strong>粗體文字</strong> 以及 <em>斜體文字</em>。</p>

  <h2>2. 區塊與列表 (DIV / OL / UL / LI)</h2>
  <div>這是一個 div 區塊（沒有特別樣式）。</div>

  <ol>
    <li>有序清單項目 1</li>
    <li>有序清單項目 2</li>
  </ol>

  <ul>
    <li>無序清單項目 A</li>
    <li>無序清單項目 B</li>
  </ul>

  <h2>3. 表格標籤 (TABLE / TH / TD)</h2>
  <table>
    <tr>
      <th>科目</th>
      <th>分數</th>
    </tr>
    <tr>
      <td>HTML</td>
      <td>90</td>
    </tr>
    <tr>
      <td>CSS</td>
      <td>95</td>
    </tr>
  </table>

  <h2>4. 表單標籤 (FORM / LABEL / INPUT)</h2>
  <form>
    <label>姓名：<input type="text"></label>
    <br><br>
    <label>電郵：<input type="email"></label>
    <br><br>
    <input type="submit" value="送出">
  </form>

</body>
</html>
      

執行效果：

可以看到所有內容都貼在一起，外觀很樸素，幾乎沒有顏色與間距，這就是「只用 HTML」的狀態。

Step 2：在同一檔案中，加上最基本的 CSS

概念：CSS 語法 & Selector（選擇器）

CSS 的基本語法是：

選擇器 {
  屬性: 值;
  另一個屬性: 另一個值;
}
        

這裡的「選擇器」可以直接是 HTML 標籤名稱，例如：

p { … } h1 { … } table { … } form { … }

代表「把所有這種標籤，一起套用這些樣式」。這也就是投影片中提到：
「對於前面提到的那些標籤，我們可以用 CSS 來指定其樣式」。

在 <head> 裡加入一個 <style> 區塊，寫入最基本的 CSS：

<head>
  <meta charset="UTF-8">
  <title>CSS 簡介一 — 加上基本 CSS</title>

  <style>
    /* 1. 整體頁面設定 */
    body {
      font-family: Arial, "微軟正黑體", sans-serif;
      line-height: 1.8;
      margin: 20px;
      background-color: #f5f5f5;
    }

    /* 2. 主標題 H1：讓它更明顯 */
    h1 {
      text-align: center;
      color: #333333;
      padding-bottom: 10px;
      border-bottom: 2px solid #667eea;
    }

    /* 3. 小標題 H2：加上顏色與間距 */
    h2 {
      color: #004aad;
      margin-top: 30px;
    }

    /* 4. 段落文字：稍微調整顏色與大小 */
    p {
      color: #444444;
      font-size: 15px;
    }
  </style>
</head>
      

執行效果：

整個頁面背景變成淡灰色（比較柔和）
主標題置中、下面有一條紫藍色底線
小標題變成藍色，和段落區隔更清楚
文字顏色不再是純黑，閱讀起來較舒服

Step 3：用 CSS 美化 DIV / OL / UL / LI

概念：一個 CSS 樣式，可以「重複使用」在很多元素上

投影片的「為什麼使用 CSS？」中提到：

節省時間：同一套樣式可以重複用在很多地方，不用每行都寫 style。
易於維護：之後只要改 CSS，一次影響所有相同元素。
避免重複：不用在每個標籤上重複寫顏色／大小。

這一步會把列表與 DIV 區塊變得更有層次。

在同一個 <style> 裡繼續加上以下 CSS（可以接在前面的程式碼後面）：

    /* 5. DIV 區塊：模擬「卡片」效果 */
    div {
      background-color: #ffffff;
      border-left: 4px solid #007bff;
      padding: 10px 15px;
      margin: 10px 0;
      box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    }

    /* 6. 有序清單 OL／無序清單 UL：增加左右縮排 */
    ol, ul {
      margin-left: 30px;
    }

    /* 7. LI 清單項目：稍微加高行距 */
    li {
      margin: 4px 0;
    }
      

執行效果：

<div> 區塊變成帶陰影的小卡片，左側有藍色粗邊，內容更突出。
清單項目往右縮排，閱讀層次更清楚。
每個 <li> 之間留一點空隙，不再全部黏在一起。

Step 4：用 CSS 美化 TABLE / TH / TD

概念：CSS 讓表格「更像表格」

沒有 CSS 的表格，只是幾行字排在一起，看起來很「偽裝」。加上 CSS 之後，我們可以：

加上邊框（border）
控制間距（padding）
區分標題列與資料列的顏色

繼續在 <style> 內加入：

    /* 8. TABLE：讓整張表格更清楚 */
    table {
      border-collapse: collapse;           /* 合併邊框 */
      width: 60%;                          /* 表格寬度為頁面 60% */
      margin: 10px 0;
      background-color: #ffffff;
    }

    /* 9. 表頭與儲存格：加上邊框與內距 */
    th, td {
      border: 1px solid #cccccc;
      padding: 8px 12px;
      text-align: center;
    }

    /* 10. 表頭列：背景色與粗體 */
    th {
      background-color: #e6f0ff;
      font-weight: bold;
      color: #333333;
    }
      

執行效果：

整張表格有規則的格線，像 Excel 一樣清楚
表頭列背景變淡藍色，與資料列區分
每一格內容有適當的空白，較易閱讀

Step 5：用 CSS 美化 FORM / LABEL / INPUT

概念：讓表單更「友善」

投影片中提到，CSS 也可以用在「表單 (forms)」上，讓使用者輸入資料時感覺更舒服、更清楚。例如：

適當的間距，避免所有欄位擠在一起
統一的輸入框風格（邊框、圓角、背景色）
讓送出按鈕看起來像真正的「按鈕」

在同一個 <style> 裡繼續加入：

    /* 11. FORM 整體：加上一點背景與內距 */
    form {
      margin-top: 10px;
      padding: 15px;
      background-color: #ffffff;
      border-radius: 6px;
      box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

    /* 12. LABEL：每一行之間空一點距離 */
    label {
      display: inline-block;
      margin-bottom: 8px;
    }

    /* 13. INPUT：統一大小與邊框樣式 */
    input[type="text"],
    input[type="email"] {
      padding: 6px 8px;
      border: 1px solid #cccccc;
      border-radius: 4px;
      width: 220px;
    }

    /* 14. 送出按鈕：像真的按鈕一樣 */
    input[type="submit"] {
      padding: 8px 16px;
      background-color: #667eea;
      border: none;
      color: #ffffff;
      border-radius: 4px;
      cursor: pointer;
      margin-top: 8px;
    }

    input[type="submit"]:hover {
      background-color: #556cd6;
    }
      

執行效果：

整個表單區塊被白底卡片包起來，和其他內容區隔開
輸入框有統一的大小／圓角，看起來較專業
送出按鈕有顏色、圓角與 hover 效果

Step 6：總結 — 你剛剛完成了什麼？

本課重點回顧

知道 HTML 只能提供「基本結構」，CSS 才能讓畫面變好看、好讀
學會了最基本的 CSS 語法：選擇器 { 屬性: 值; }
把 CSS 套用在多種 HTML 標籤上：
<p> / <h1> / <h2> <div> <ol> / <ul> / <li> <table> / <th> / <td> <form> / <label> / <input>
體會到「一次寫好 CSS，可以重複套用在很多標籤」帶來的好處：省時、好維護、不易出錯

最終版本：exercise-done-CSS-1.html

依照以上 Step by Step，完成你自己的版本後，可以和老師提供的完成檔互相比對：

打開最終完成版：exercise-done-CSS-1.html

建議你在 VSCode 裡同時打開自己的檔案與 exercise-done-CSS-1.html，一行一行比較差異，這樣可以更快理解哪裡少寫、哪裡可以更好。