【CSS 筆記】CSS 建立 - part 2

歡迎你點入本篇文章，本系列網頁程式設計，主要紀錄我個人自學的軌跡，另外也作為日後個人複習用。若你喜歡本篇文章，歡迎在文章底下點一顆愛心，或是追蹤我的個人公開頁～

要建立 CSS，會有三種方式：

外部 CSS（External CSS）
內部 CSS（Internal CSS）
行內 CSS（Inline CSS）

外部 CSS（External CSS）

此為最常用、最推薦的方式，這種方式會把所有 CSS 寫在一個獨立的 .css 檔案中，再透過 <link> 標籤連結到 HTML 。

首先建立 styles.css：

/* styles.css */
h1 {
  color: steelblue;
  font-size: 32px;
}

p {
  color: gray;
}

然後在 HTML 的 <head> 加入連結：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Hello World</h1>
  <p>這段文字會變灰色。</p>
</body>
</html>

最終結果：

原本不加 CSS 的結果：

<link> 標籤的兩個屬性：

rel="stylesheet"：告訴瀏覽器該連結的文件是 CSS。
href="styles.css"：指定 CSS 檔案的路徑（可以是相對路徑或絕對路徑）。

優點：一份 CSS 可套用到整個網站的所有頁面，維護方便（改一個地方全站生效）。

缺點：多一個 HTTP 請求，但現代瀏覽器會做快取，實際上幾乎沒影響。

內部 CSS（Internal CSS）

直接把 CSS 寫在 HTML 檔案的 <head> 區塊裡，用 <style> 標籤包在裡面。

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: tomato;
      font-size: 32px;
    }

    p {
      color: gray;
    }
  </style>
</head>
<body>
  <h1>Hello World</h1>
  <p>這段文字會變灰色。</p>
</body>
</html>

結果：

優點：CSS 跟 HTML 在同一個檔案，不需要額外的 HTTP 請求，適合單頁網頁或快速原型製作。

缺點：CSS 無法跨頁面共用，如果網站有 10 頁，同樣的 CSS 要複製 10 份，很難維護。

行內 CSS（Inline CSS）

直接在 HTML 元素的 style 屬性上寫 CSS，只影響該元素。

<!DOCTYPE html>
<html>
<body>
  <h1 style="color: green; font-size: 24px;">這個標題是綠色的</h1>
  <p style="color: red; font-size: 14px;">這段文字是紅色的</p>
</body>
</html>

優點：優先權最高，會覆蓋 External 和 Internal 的同屬性設定，適合一次性的特殊樣式。

缺點：無法重複使用，HTML 會變得又長又亂，非常難維護。

三種方式比較

比較項目	External CSS	Internal CSS	Inline CSS
寫在哪裡	獨立的 `.css` 檔案	HTML `<head>` 的 `<style>`	HTML 元素的 `style=""` 屬性
影響範圍	整個網站所有頁面	同一頁面內所有元素	只有那一個元素
重複使用性	最高	同頁面內可重複用	不可重複用
優先權	最低	中	最高
適用情境	正式專案、多頁網站	單頁網頁、快速測試	緊急修改、電子郵件樣板