CSS 入門教學：5 步驟替你的網頁換上顏色與版面

上一篇我們用 HTML 做出了第一個網頁，但打開一看：白底黑字、排版樸素，好像少了點什麼。這時候就輪到 CSS 登場了。有了它，你可以替網頁換上顏色、調整字型、安排間距，讓網頁從「能看」變成「好看」。

本文延續上一篇〈HTML 入門教學〉的 myweb 資料夾與 index.html，同樣只用「記事本」與瀏覽器，用 5 個步驟帶你學會 CSS 的基本用法。如果你還沒做出 index.html，建議先看完上一篇再回來。文中的圖片為示意圖，不是實際畫面。

先搞懂：CSS 是什麼？

CSS（Cascading Style Sheets，階層式樣式表）是專門負責網頁「外觀」的語言。HTML 決定網頁有什麼內容，CSS 則決定這些內容長什麼樣子。把兩者分開有一個大好處：想換整個網站的風格時，只要改 CSS，不必動到每一頁的內容。

一條 CSS 規則長什麼樣子？

CSS 是由一條一條的「規則」組成。每條規則都在回答三個問題：要改誰？改哪個項目？改成什麼？

圖 1　選擇器、屬性、值（示意圖）

要注意的細節有三個：屬性與值之間用冒號連接、每一行結尾要加分號、整組設定用大括號包起來。

步驟一：建立 CSS 檔案並連結到網頁

1. 開啟記事本，按「檔案」→「另存新檔」。
2. 存到 myweb 資料夾，檔名輸入 style.css，「存檔類型」選「所有檔案」，「編碼」選 UTF-8。
3. 用記事本開啟 index.html，在 <head> 與 </head> 之間加入一行：

<link rel="stylesheet" href="style.css">

這行的意思是：「請把同一個資料夾裡的 style.css 當成這個網頁的樣式表。」以後所有外觀設定，都寫在 style.css 裡，index.html 只管內容。

步驟二：改變文字的顏色與字型

打開 style.css，輸入以下內容並存檔：

body {
  font-family: "Microsoft JhengHei", sans-serif;
  font-size: 18px;
  color: #333333;
}

h1 {
  color: #1f6feb;
}

切到瀏覽器按 F5 重新整理，標題應該變成藍色了。逐行來看：

• font-family：字型。可以寫好幾個，瀏覽器會從前面開始找，找不到就用下一個。
• font-size：字體大小，px 是像素。
• color：文字顏色。可以寫英文名稱（如 blue），也可以寫「#」開頭的色碼（如 #1f6feb）。

小提醒：色碼不用背。在網路上搜尋「色碼表」或「color picker」，挑好顏色後複製色碼貼進去就行了。

步驟三：設定背景色與對齊方式

繼續在 style.css 後面加入：

body {
  background-color: #f5f8ff;
}

h1 {
  text-align: center;
}

• background-color：背景顏色。
• text-align：文字對齊，可填 left（靠左）、center（置中）、right（靠右）。

你可能注意到，body 與 h1 都出現了第二次。這是可以的：同一個選擇器的規則可以分開寫，瀏覽器會把它們合併。不過為了好維護，通常建議把同一個選擇器的設定整理在一起。

步驟四：認識「盒子模型」，調整間距與框線

在 CSS 的世界裡，每個 HTML 元素都像一個「盒子」。學會這個觀念，你就懂了網頁排版的一半。盒子由內到外有四層：

圖 2　由內而外：內容 → 內距 → 框線 → 外距（示意圖）

• content（內容）：文字或圖片本身。
• padding（內距）：內容與框線之間的空間。
• border（框線）：盒子的邊框。
• margin（外距）：盒子與其他元素之間的距離。

簡單的記法：padding 是「盒子裡面」的留白，margin 是「盒子外面」的留白。現在在 style.css 加入：

body {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

p {
  line-height: 1.8;
}

img {
  border: 3px solid #1f6feb;
  border-radius: 8px;
}

• max-width: 700px：限制內容最寬 700 像素，避免文字在大螢幕上拉得太長，不好閱讀。
• margin: 0 auto：上下外距為 0，左右自動平分，內容就會置中。
• padding: 20px：四周留 20 像素的內距。
• line-height: 1.8：行高為字體的 1.8 倍，行距變寬，閱讀比較舒服。
• border：依序寫「粗細、樣式、顏色」；border-radius 則是圓角。

步驟五：用 class 替特定元素設計樣式

到目前為止，我們都是用標籤名稱當選擇器，例如 h1、p，這會影響網頁中「所有」同類型的元素。如果只想改其中某一段呢？這時就要幫它取個名字，也就是 class（類別）。

先在 index.html 把某一個段落改成：

<p class="note">這是一則重點提醒！</p>

再到 style.css 加入：

.note {
  background-color: #fff4cc;
  border-left: 6px solid #f5a623;
  padding: 10px 14px;
}

注意 class 的選擇器要在名稱前面加一個句點。這樣只有掛上 class="note" 的元素會套用這組樣式，其他段落不受影響。同一個 class 可以用在很多個元素上，需要「提醒框」的地方，都加上 class="note" 即可。

存檔後回到瀏覽器按 F5，你的網頁已經有了置中的版面、柔和的背景色、藍色標題，以及醒目的提醒框：

圖 3　套用 CSS 前後的比較（示意圖）

常用 CSS 屬性整理

屬性	功能	範例
color	文字顏色	color: #333333;
background-color	背景顏色	background-color: #f5f8ff;
font-size	字體大小	font-size: 18px;
text-align	文字對齊	text-align: center;
margin	外距	margin: 0 auto;
padding	內距	padding: 20px;
border	框線	border: 1px solid #ccc;
line-height	行高	line-height: 1.8;

新手常見問題

• 樣式完全沒有效果：檢查 <link> 的檔名是否與 style.css 完全一致，且兩個檔案放在同一個資料夾。
• 只有部分規則有效：檢查是否漏了分號，或大括號沒有成對。一個小錯誤，可能讓後面的規則一起失效。
• 改了沒變化：確認 style.css 有存檔，瀏覽器可以試試按 Ctrl＋F5 強制重新整理。
• class 沒有套用：CSS 裡的選擇器要有句點（.note），HTML 裡則不用（class="note"）。

小練習：替「自我介紹」換上新衣

1. 把背景色改成你喜歡的顏色。
2. 讓 h1 置中，並換成喜歡的文字顏色。
3. 讓內容最寬 700 像素並置中。
4. 替圖片加上框線與圓角。
5. 設計一個自己的 class，例如 .highlight，用在你想強調的句子上。

結語

CSS 的核心觀念是：用「選擇器」找到元素，再用「屬性：值」改變它的外觀。今天你學會了顏色、字型、對齊、盒子模型與 class，已經足以替自己的網頁化妝。下一步，可以學習 HTML 的表格與表單，讓網頁能呈現資料、蒐集訪客的意見。