CSS 的撰寫位置：外部樣式表、內部樣式與行內樣式

引用方式

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

外部樣式表 (External Stylesheet)：將樣式定義在獨立的 .css 文件中，並通過 <link> 標籤引用。也就是由一個 CSS 樣式檔案來控制數個網頁的排版與美化。
html
```
<link rel="stylesheet" href="./style/all.css">
```
1
內部樣式表 (Internal Stylesheet)：在 HTML 文件的 <style> 標籤中定義樣式。此方式就是將 CSS 樣式撰寫於該網頁檔案中，即只有該網頁內才可套用樣式，至於其他網頁則無法達成複用。
html
```
<style>
h1 {
   color: blue;
}
</style>
```
1
2
3
4
5
行內樣式 (Inline Style)：直接在 HTML 標籤中使用 style 屬性。概念有些類似於上述的內部樣式表，都是撰寫在單一網頁之中；其不同點為行內樣式表是針對某一個標籤來撰寫，其他相同的標籤並不會套用到該樣式。
html
```
<h1 style="color: blue;">Hello, World!</h1>
```
1

比較項目	外部樣式表	內部樣式表	行內樣式
可否跨頁共用	可	否	否
可否被快取	可	否	否
優先權	一般	一般	最高
可否寫偽類與媒體查詢	可	可	否

行內樣式除了難以維護，還有一個常被忽略的限制：它沒辦法寫 :hover 這類偽類，也不能寫媒體查詢，因為它沒有選取器可言。

<link> 與 <style> 都請放在檔頭 head 裡：

html

<head>
  <meta charset="UTF-8">
  <title>頁面標題</title>
  <link rel="stylesheet" href="./style/all.css">
</head>

瀏覽器要先取得樣式才能正確繪製畫面，樣式來得太晚，使用者會先看到沒有樣式的內容、再突然套上樣式。更完整的說明可參考在 HTML 引入 CSS。

小提醒

另一種引入方式 @import 也能載入樣式表，但它必須等前一份下載完才會開始下載，形成請求瀑布。想拆檔請改用多個 <link>，詳見引入外部的樣式檔。

三種寫法的優先權誰高？

行內樣式最高，因為它直接寫在元素上；外部與內部樣式表本身權重相同，實際結果由選取器權重與書寫順序決定，後載入的會覆蓋前面的。

外部樣式表為什麼是首選？

樣式集中在一處、多個頁面共用，瀏覽器還會把它快取起來，使用者瀏覽第二頁時不必重新下載。維護時也只要改一個檔案。

行內樣式什麼時候才適合用？

由程式即時計算出來的值，例如：拖曳後的座標、依資料算出的長度。這類值無法事先寫進樣式表，才適合放行內；其餘情況都應該寫在樣式表裡。

樣式表要放在哪個位置？

放在 head 裡。瀏覽器要先取得樣式才能正確繪製畫面，樣式來得太晚，使用者會先看到沒有樣式的內容再突然套上，也就是俗稱的畫面閃爍。