第 5 章

CSS 基本排版

光靠 HTML，網頁看起來就是一堆黑白文字。CSS 就是讓網頁「有設計感」的關鍵。這章我們要學 CSS 的基本語法、常用屬性，以及最重要的 Flexbox 排版方式。

📌 本章重點

CSS 的三種引入方式
選擇器（selector）的使用
顏色、字型、字體大小
盒子模型（Box Model）
Flexbox 基礎排版
響應式設計（RWD）入門

📖 教學說明

CSS 的三種引入方式

HTML/CSS

<!-- 方式一：外部 CSS 檔案（推薦！）-->
<link rel="stylesheet" href="style.css">

<!-- 方式二：<style> 標籤寫在 <head> 裡 -->
<style>
  body { background-color: #f0f0f0; }
</style>

<!-- 方式三：行內樣式（不建議大量使用）-->
<p style="color: red;">這段文字是紅色的</p>

CSS 基本語法

每一條 CSS 規則的結構是：選擇器 { 屬性: 值; }

CSS

/* 選 h1 標籤，字體顏色設為深藍色 */
h1 {
  color: #1e3a8a;
  font-size: 2rem;
}

/* 選 .card class，設定背景與圓角 */
.card {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
}

/* 選 #main id */
#main {
  max-width: 1200px;
  margin: 0 auto;
}

常用顏色與字型屬性

CSS

body {
  /* 顏色 */
  color: #333;                /* 文字顏色 */
  background-color: #f8f9fa; /* 背景顏色 */

  /* 字型 */
  font-family: 'Arial', sans-serif;
  font-size: 16px;
  font-weight: 400;    /* 400=正常，700=粗體 */
  line-height: 1.6;   /* 行高，影響閱讀舒適度 */
  text-align: left;   /* center / right / justify */
}

Box Model（盒子模型）

每個 HTML 元素都像一個盒子，由四個部分組成：

content：實際的內容（文字、圖片）
padding：內容與邊框之間的內距
border：邊框
margin：元素與外部的外距

CSS

.box {
  width: 200px;
  height: 100px;

  padding: 20px;          /* 四邊相同 */
  padding-top: 10px;     /* 單獨設定上 */

  border: 2px solid #ccc;  /* 粗細 樣式 顏色 */

  margin: 10px auto;     /* 上下 10px，左右自動居中 */

  /* 推薦加上這個，讓 padding 不影響總寬度 */
  box-sizing: border-box;
}

Flexbox 排版

Flexbox 是現代網頁排版最常用的技術，可以輕鬆做到水平並排、置中對齊。

CSS

/* 在父元素加上 display: flex */
.container {
  display: flex;
  flex-direction: row;        /* 橫向排列（預設）*/
  justify-content: center;   /* 主軸對齊：center / space-between */
  align-items: center;       /* 交叉軸對齊（垂直置中）*/
  gap: 16px;                  /* 子元素之間的間距 */
  flex-wrap: wrap;            /* 超出範圍自動換行 */
}

/* 子元素 */
.item {
  flex: 1; /* 自動分配剩餘空間 */
}

響應式設計（RWD）入門

用 @media 讓網頁在不同螢幕大小有不同的樣式：

CSS

/* 桌機版（預設樣式） */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 手機版（螢幕寬度小於 768px 時套用）*/
@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr; /* 改成一欄 */
  }
}

💻 完整範例：美化後的自我介紹

CSS

/* style.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f1f5f9;
  color: #1e293b;
  line-height: 1.7;
}

.profile {
  max-width: 600px;
  margin: 40px auto;
  background: white;
  border-radius: 12px;
  padding: 40px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center;
}

.profile img {
  border-radius: 50%;
  border: 4px solid #4f46e5;
}

h1 {
  font-size: 1.8rem;
  margin: 16px 0 8px;
  color: #1e293b;
}

.btn {
  display: inline-block;
  background: #4f46e5;
  color: white;
  padding: 10px 24px;
  border-radius: 6px;
  text-decoration: none;
  margin-top: 16px;
}

⚠️ 常見錯誤

✗

忘記加 box-sizing: border-box

預設情況下，padding 和 border 會讓元素比你設定的 width 還要寬。加上 box-sizing: border-box 可以讓寬度計算更直觀。

✗

CSS 不生效

最常見的原因：拼字錯誤（colour 而不是 color）、忘記分號、或 CSS 檔案路徑不正確。

✗

margin: auto 沒有置中

margin: 0 auto 要能置中，元素必須是區塊元素且有明確的 width 設定。

✏️ 小練習

🎯 動手試試看

練習 1

在上一章的 HTML 檔案旁邊建立 style.css，在 HTML 裡用 <link> 引入，然後把網頁背景顏色改成你喜歡的顏色。

練習 2

用 Flexbox 讓你的三個興趣清單項目橫向並排顯示，並加上適當的間距。

練習 3

加上 @media (max-width: 600px) 規則，讓手機版的字體大小比桌機版小一點（例如 14px vs 16px）。

🎉

本章完成！

你的網頁現在有樣式了！下一章我們要讓它「動起來」，學習 JavaScript 基本互動。