CSS 的使用方式

引用方式

CSS 可以透過以下三種方式引入到 HTML 文件中。

• 外部樣式表 (External Stylesheet): 將樣式定義在獨立的 .css 文件中，並通過 <link> 標籤引用。也就是由一個 CSS 樣式檔案來控制數個網頁的排版與美化。

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

• 內部樣式表 (Internal Stylesheet): 在 HTML 文件的 <style> 標籤中定義樣式。此方式就是將 CSS 樣式撰寫於該網頁檔案中，即只有該網頁內才可套用樣式，至於其他網頁則無法達成複用。

  <style>
  h1 {
     color: blue;
  }
  </style>

• 行內樣式 (Inline Style): 直接在 HTML 標籤中使用 style 屬性。概念有些類似於上述的內部樣式表，都是撰寫在單一網頁之中；其不同點為行內樣式表是針對某一個標籤來撰寫，其他相同的標籤並不會套用到該樣式。

  <h1 style="color: blue;">Hello, World!</h1>

適用時機

引用方式	類型
外部樣式表	專案、站台
內部樣式表	活動網頁、EDM
行內樣式	JavaScript 控制