HTML 加入 CSS 的三種方法：外部樣式表、內部樣式表、行內樣式怎麼選

HTML 負責網頁的內容和結構，CSS 負責外觀：顏色、字型、間距、版面。CSS 寫好之後，要「接上」HTML 才會生效，方法有三種：

1. 外部樣式表：CSS 寫在獨立的 .css 檔案，用 <link> 載入（最推薦）
2. 內部樣式表：CSS 寫在 HTML 裡的 <style> 標籤中
3. 行內樣式：CSS 直接寫在標籤的 style 屬性裡

下面用同一組樣式，示範三種寫法。

方法一：外部樣式表（最推薦）

先建立一個 style.css 檔案：

body {
  font-size: 16px;
}

h1 {
  color: red;
}

p {
  margin: 0 5px 5px 20px;
}

再到 HTML 的 <head> 裡用 <link> 載入它：

<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
  <meta charset="UTF-8">
  <title>我的網頁</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>標題</h1>
  <p>內文</p>
</body>
</html>

href 是 CSS 檔案的位置，可以寫相對路徑（例如 css/style.css），也可以寫完整網址。以前的教學常寫 type="text/css"，HTML5 已經不需要了。

為什麼最推薦這種方法：

• 一個檔案管所有頁面：網站有幾十頁，都載入同一個 style.css，要改顏色只要改一個地方。
• 瀏覽器會快取：第一次載入後會存起來，換到其他頁面不用重新下載，網站比較快。
• 內容和外觀分開：HTML 只放內容，改版時比較不會改錯。

也可以指定樣式表的用途，例如只在列印時套用：

<link rel="stylesheet" href="print.css" media="print">

方法二：內部樣式表

這篇文章舊版介紹的就是這一種：把 CSS 寫在 <head> 裡的 <style> 標籤中。

<head>
  <style>
    body { font-size: 16px; }
    h1 { color: red; }
    p { margin: 0 5px 5px 20px; }
  </style>
</head>

• 適合：只有一頁的網頁、活動頁，或自己練習測試的時候。
• 缺點：只對這一頁有效。好幾頁都要用同樣的樣式時，每頁都要複製一份，修改時很容易漏改。

順便說明 margin: 0 5px 5px 20px 這種寫四個值的寫法：順序是上、右、下、左（從上面開始順時針）。另外，舊範例的內文字級是 12px，在現在的螢幕上偏小，內文建議 16px 左右。

方法三：行內樣式

直接寫在標籤的 style 屬性裡：

<p style="color: #c00; font-weight: bold;">重要提醒：本週六公休</p>

• 適合：只有一個地方需要特別處理；製作電子報（EDM）的 HTML，因為部分郵件軟體對 <style> 的支援不完整；或是由 JavaScript 動態改變樣式。
• 缺點：樣式跟內容混在一起，同樣的樣式要到處重複寫。而且它的優先順序很高，之後想用 CSS 檔案改掉它會很麻煩。

三種同時存在時，誰說了算？

同一個元素被好幾條規則設定時，瀏覽器大致依照這個順序決定：

1. 加了 !important 的規則最優先（能不用就不用，用多了會很難維護）。
2. 行內樣式：寫在 style 屬性裡的，會蓋過樣式表裡的設定。
3. 選擇器越精確越優先：ID（#header）勝過 class（.title），class 勝過標籤名稱（h1），跟寫在哪個檔案無關。
4. 一樣精確時，寫在後面的蓋掉前面的：所以 <style> 放在 <link> 後面，就是 <style> 優先；反過來也一樣。

改了 CSS 卻沒反應時，按 F12 打開開發者工具，點選那個元素，右邊會列出所有套用的規則，被劃掉的就是被別的規則蓋過去了。

為什麼不建議用 @import？

CSS 檔案裡也可以用 @import url("other.css"); 再載入另一個 CSS 檔案。但瀏覽器要先下載第一個檔案、讀到 @import 之後才會去下載第二個，一個等一個，會拖慢網頁顯示。需要多個 CSS 檔案時，在 HTML 裡寫多個 <link> 比較好。

在 WordPress 加入 CSS

WordPress 網站不建議直接改主題的 header.php 加上 <link>，主題一更新，改過的地方就會被蓋掉。依需求選一種方法：

• 少量修改：到後台「外觀 → 自訂 → 附加的 CSS」，貼上 CSS 可以即時預覽，儲存後全站生效。區塊主題（沒有「自訂」選單的主題）則在「外觀 → 編輯器 → 樣式」的選單裡找「附加的 CSS」。
• 大量修改：寫在子主題（Child Theme）的 style.css。
• 載入獨立的 CSS 檔案：在子主題的 functions.php 用 wp_enqueue_style 載入：

add_action( 'wp_enqueue_scripts', function () {
    $file = get_stylesheet_directory() . '/custom.css';
    wp_enqueue_style(
        'my-custom',
        get_stylesheet_directory_uri() . '/custom.css',
        array(),
        file_exists( $file ) ? filemtime( $file ) : null
    );
} );

filemtime 會用檔案的修改時間當作版本號，CSS 改過之後，訪客的瀏覽器就會自動抓新版本，不會一直卡在舊的快取。

要注意：「附加的 CSS」是跟著主題存的，換主題之後不會帶過去，換之前記得先把內容複製下來備份。

延伸閱讀

• 好用的 CSS 語法技巧：半透明、圓角、陰影、字型等 15 個常用寫法
• RWD 響應式網頁怎麼做？viewport 語法與 CSS 基本寫法完整教學
• WordPress functions.php 實用程式碼整理：10 個常用又安全的小技巧

CSS 放在對的地方，之後改版、換主題才不會牽一髮動全身。正威網路行銷是 25 年經驗的基隆網頁設計工作室，提供客製化網頁設計與網站維護託管，也服務台北與全台客戶，歡迎來聊聊。