在 HTML 引入 CSS：外部樣式表、內部樣式與行內樣式
CSS 負責網頁的外觀，而要讓它作用在 HTML 上，共有三種寫法：<link> 外部樣式表、<style> 內部樣式與元素上的 style 行內樣式。以下先看最常用的兩種，更完整的比較可參考 CSS 的撰寫位置。
連結外部樣式
外部樣式表是將 CSS 放在一個獨立的 .css 文件中，然後通過 HTML 文件的 <link> 標籤進行引用。
html
<link rel="stylesheet" href="./style/all.css">這是實務上最主要的做法：樣式集中在一處、多個頁面可以共用，而且瀏覽器會快取這份檔案，使用者瀏覽第二頁時不必重新下載。
| 屬性 | 說明 |
|---|---|
rel="stylesheet" | 告訴瀏覽器這是一份樣式表，不可省略 |
href | 樣式表的路徑 |
media | 指定套用的情境，例如：print 只在列印時生效 |
內部樣式
將樣式撰寫在該網頁中（單一網頁），也就是說其他網頁無法使用該樣式表。
html
<style>
/* CSS */
</style>適合只有這一頁會用到的特例，或是需要優先繪製的關鍵樣式。缺點是無法被其他頁面共用，也不會被單獨快取。
行內樣式
直接把樣式寫在 元素的 style 屬性 上：
html
<p style="color: red;">紅色文字</p>它的優先權最高、也最難維護，樣式與結構混在一起會讓後續改版變得困難。除非是由 JavaScript 動態計算出來的值，否則不建議使用。
三種方式的比較
| 方式 | 可否共用 | 可否快取 | 建議用途 |
|---|---|---|---|
| 外部樣式表 | 可 | 可 | 日常開發的主力 |
| 內部樣式 | 否 | 否 | 單頁特例、關鍵樣式 |
| 行內樣式 | 否 | 否 | 程式動態產生的值 |
小提醒
<link> 請放在 <head> 裡。瀏覽器要先取得樣式才能正確繪製畫面，樣式來得太晚會出現先看到無樣式內容、再突然套上樣式的閃爍。
常見問題
三種引入 CSS 的方式該用哪一種？
日常開發請用外部樣式表，它能被多個頁面共用，也能被瀏覽器快取。內部樣式適合單一頁面的特例或需要立即生效的關鍵樣式，行內樣式則盡量只留給由程式動態計算的值。
樣式為什麼要放在 head 裡？
瀏覽器要先取得樣式才能正確繪製畫面。樣式寫在後面時，使用者可能先看到沒有樣式的內容，再突然套上樣式，也就是俗稱的畫面閃爍。
同一個屬性被寫了很多次，哪一個會贏？
在權重相同的前提下，行內樣式的優先權高於樣式表中的規則，而樣式表內則是後面寫的覆蓋前面寫的。因此外部樣式表的引入順序會直接影響最終結果。
可以用 @import 引入其他樣式表嗎？
可以，但不建議。用 @import 串接的樣式表要等前一份下載完才會開始下載，形成請求瀑布拖慢載入。改成多個 <link> 標籤，瀏覽器就能平行下載。
