CSS 樣式與 RWD 版型｜梅子的網際網路學習歷程

這個頁面帶你從零開始掌握 CSS：從文字、顏色、盒模型，到 Flexbox 與 media query，最後有兩個綜合作業，幫助你實作真正的 RWD 版面。

建議從上到下依序學習；也可以用目錄直接跳到想複習的主題。每一節都有小練習，最後還有綜合作業。

1. CSS 是什麼？與三種寫法
2. 選擇器：標籤、class、id
3. 文字與字型設定
4. 顏色與背景
5. 邊框、圓角與陰影
6. 盒模型：margin、padding、width、height
7. display：block / inline / inline-block
8. Flexbox：讓排版變簡單
9. RWD：media query 基本用法
10. 小專題：兩欄版型 + RWD
11. 綜合作業一：三欄卡片 + 手機一欄
12. 綜合作業二：完成教學網站首頁樣式

1. CSS 是什麼？與三種寫法

用來控制網頁外觀的樣式表，可以寫在行內、<style> 標籤裡，或獨立成 .css 檔。

<!-- 行內樣式（不推薦大量使用） -->
<p style="color:red;">紅色文字</p>

<!-- <head> 內的 <style> -->
<style>
  p { color: blue; }
</style>

<!-- 外部樣式檔 -->
<link rel="stylesheet" href="style.css">

小練習：建立 style.css，試著把 body 的背景色改成淡淡的淺灰色。

2. 選擇器：標籤、class、id

用選擇器決定哪些元素要套用哪些樣式。

/* 標籤選擇器 */
h1 { color: #1d4ed8; }

/* 類別選擇器（class） */
.highlight { background-color: #fef3c7; }

/* ID 選擇器 */
#main-title { font-size: 32px; }

小練習：為頁面中的某一段文字加上一個 class，例如 highlight，並讓它有漂亮的背景色。

3. 文字與字型設定

調整字體家族、大小、行距與字重，讓文字更容易閱讀。

body {
  font-family: "微軟正黑體", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

h1 {
  font-size: 32px;
  font-weight: 700;
}

small {
  font-size: 12px;
}

小練習：試著把整個網頁的字體改成你喜歡的字型，並觀察不同字重的效果。

4. 顏色與背景

可以用色碼、rgb、rgba 或關鍵字設定字色與背景色。

h1 {
  color: #dc2626;           /* 紅色標題 */
}

body {
  background-color: #f9fafb; /* 淺灰背景 */
}

.box {
  background: linear-gradient(135deg,#bfdbfe,#fecaca);
}

小練習：替你的頁面做一個有漸層背景色的區塊，裡面放一個標題與一小段文字。

5. 邊框、圓角與陰影

讓區塊看起來像卡片：加邊框、圓角、陰影。

.card {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(15,23,42,0.08);
  padding: 16px;
  background-color: #ffffff;
}

小練習：幫你的個人名片區塊套用 .card 樣式，讓它看起來像一張實體名片。

6. 盒模型：margin、padding、width、height

每個元素都是一個盒子：內容 + 內距 + 邊框 + 外距。

.box {
  width: 300px;
  padding: 16px;   /* 內容與邊框之間 */
  margin: 20px;    /* 元件與元件之間 */
  border: 1px solid #d1d5db;
}

小練習：建立兩個 .box 區塊，調整 padding 與 margin，感受版面變化。

7. display：block / inline / inline-block

決定元素如何在一行中排列，會不會自動換行。

h1 { display: block; }
span { display: inline; }

.button {
  display: inline-block;
  padding: 8px 12px;
  background: #4f46e5;
  color: white;
  border-radius: 999px;
}

小練習：用 a 標籤搭配 .button 樣式做出一個「前往首頁」的圓角按鈕。

8. Flexbox：讓排版變簡單

使用 display:flex 可以輕鬆做出水平對齊與分配空間的版面。

.row {
  display: flex;
  gap: 16px;
}

.col {
  flex: 1;
  padding: 12px;
  border-radius: 8px;
  background: #ffffff;
}

小練習：做一個左右兩欄的區塊：左邊放文字，右邊放圖片，使用 flex 完成。

9. RWD：media query 基本用法

根據螢幕寬度改變樣式，是響應式網頁設計的核心。

/* 桌機版 */
.card-row {
  display: flex;
}

/* 手機版：一欄顯示 */
@media (max-width: 768px) {
  .card-row {
    flex-direction: column;
  }
}

小練習：針對你的個人名片頁，在手機寬度時把版面改成一欄排版。

10. 小專題：兩欄版型 + RWD

綜合運用 Flexbox 與 media query，做出簡單的 RWD 版型。

<!-- HTML -->
<div class="layout">
  <aside class="sidebar">側邊欄內容</aside>
  <main class="content">主要內容</main>
</div>

/* CSS */
.layout { display: flex; gap: 16px; }
.sidebar { width: 260px; }
.content { flex: 1; }

@media (max-width: 768px) {
  .layout {
    flex-direction: column;
  }
  .sidebar { width: auto; }
}

小練習：把這個兩欄版型改成「上方導覽列 + 左側欄 + 右側內容」的簡易教學網站版。

11. 綜合作業一：三欄卡片 + 手機一欄

設計一個「課程列表」區塊，桌機版顯示三欄卡片，手機版自動變成一欄。

.course-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.course-card {
  padding: 16px;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 12px rgba(15,23,42,0.08);
}

@media (max-width: 768px) {
  .course-grid {
    grid-template-columns: 1fr;
  }
}

小練習：請學生自己決定每張卡片的標題與內容，例如「HTML 入門」、「CSS 入門」、「JS 入門」，並完成 RWD 效果。

12. 綜合作業二：完成教學網站首頁樣式

以你目前的 HTML 首頁為基礎，替整個頁面加上統一的配色、字體與 RWD 排版。

/* 建議：設定全站共用樣式 */
:root {
  --bg: #f3f4ff;
  --ink: #111827;
  --brand: #4f46e5;
}

body {
  background: var(--bg);
  color: var(--ink);
}

header {
  background: #111827;
  color: white;
}

/* 針對手機再加上調整 */
@media (max-width: 768px) {
  header nav {
    flex-direction: column;
  }
}

小練習：要求學生交出一個「可以在手機與桌機上都好看」的首頁，並簡短文字說明自己使用了哪些 CSS 技巧。