CSS 引用方式

在 HTML 中加入 CSS 有三種方式：

外部樣式表 (External Stylesheet)：將 CSS 寫在獨立的 .css 檔案中
內部樣式表 (Internal Stylesheet)：將 CSS 寫在 HTML 的 <style> 標籤中
行內樣式 (Inline Style)：將 CSS 直接寫在 HTML 元素的 style 屬性中

外部樣式表 (External Stylesheet)

這是最常用也是最推薦的方式。將 CSS 程式碼寫在獨立的 .css 檔案中，然後在 HTML 的 <head> 中用 <link> 標籤引用。

例如，建立一個 style.css 檔案：

h1 {
  color: blue;
}

p {
  font-size: 16px;
}

然後在 HTML 中引用：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>標題</h1>
  <p>段落文字</p>
</body>
</html>

<link> 標籤的屬性說明：

rel="stylesheet"：表示這是一個樣式表檔案
href="style.css"：指定 CSS 檔案的路徑

使用外部樣式表的優點：

CSS 和 HTML 分離，程式碼更容易維護
同一個 CSS 檔案可以被多個 HTML 頁面共用
瀏覽器會快取 CSS 檔案，加快網頁載入速度

內部樣式表 (Internal Stylesheet)

將 CSS 寫在 HTML 文件的 <style> 標籤中，<style> 標籤通常放在 <head> 裡面。

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
    p {
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>標題</h1>
  <p>段落文字</p>
</body>
</html>

內部樣式表適合用在單一頁面需要特殊樣式的情況，但如果有多個頁面需要相同的樣式，還是建議使用外部樣式表。

行內樣式 (Inline Style)

直接在 HTML 元素的 style 屬性中撰寫 CSS：

<h1 style="color: blue; font-size: 24px;">標題</h1>
<p style="font-size: 16px;">段落文字</p>

行內樣式的優先級最高，會覆蓋外部和內部樣式表的設定。但這種寫法會讓 HTML 和 CSS 混在一起，不容易維護，一般不建議大量使用。

三種方式的優先級

當同一個元素被多種方式設定樣式時，優先級順序為：

行內樣式（優先級最高）
內部樣式表 / 外部樣式表（看誰後載入）
瀏覽器預設樣式（優先級最低）

<head>
  <link rel="stylesheet" href="style.css">  <!-- 假設設定 h1 { color: red; } -->
  <style>
    h1 { color: green; }
  </style>
</head>
<body>
  <h1 style="color: blue;">這個標題會是藍色</h1>
</body>

在這個例子中，<h1> 的顏色會是藍色，因為行內樣式的優先級最高。

最佳實踐

優先使用外部樣式表：方便維護和重複使用
避免使用行內樣式：除非有特殊需求
內部樣式表：適合用於單一頁面的特殊樣式，或是快速測試