外部樣式表

Created: November-22, 2018

通過在每個 HTML 文件中放置 <link> 元素，可以將外部 CSS 樣式表應用於任意數量的 HTML 文件。

<link> 標籤的屬性 rel 必須設定為 stylesheet，href 屬性設定為樣式表的相對或絕對路徑。雖然使用相對 URL 路徑通常被認為是良好的做法，但也可以使用絕對路徑。在 HTML5 中，可以省略 type 屬性。

建議將 <link> 標記放在 HTML 檔案的 <head> 標記中，以便在樣式元素之前載入樣式。否則，使用者將看到一些無格式的內容。

例

你好，world.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Hello world!</h1>
        <p>I ♥ CSS</p>
    </body>
</html>

style.css 檔案

h1 {
    color: green;
    text-decoration: underline;
}
p {
    font-size: 25px;
    font-family: 'Trebuchet MS', sans-serif;
}

確保在 href 中包含 CSS 檔案的正確路徑。如果 CSS 檔案與 HTML 檔案位於同一資料夾中，則不需要路徑（如上例所示），但如果將其儲存在資料夾中，則將其指定為 href="foldername/style.css"。

<link rel="stylesheet" type="text/css" href="foldername/style.css">

外部樣式表被認為是處理 CSS 的最佳方式。這有一個非常簡單的原因：當你管理一個 100 頁的網站時，所有網站都由一個樣式表控制，並且你希望將連結顏色從藍色更改為綠色，這樣可以更容易地進行更改在你的 CSS 檔案中，讓所有 100 個頁面中的更改級聯，而不是進入 100 個單獨的頁面並進行相同的更改 100 次。同樣，如果你想徹底改變網站的外觀，你只需要更新這個檔案。

你可以根據需要在 HTML 頁面中載入任意數量的 CSS 檔案。

<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="override.css">

CSS 規則適用於一些基本規則，順序很重要。例如，如果你有一個 main.css 檔案，其中包含一些程式碼：

p.green { color: #00FF00; }

所有帶有 green 類的段落都將以淺綠色寫入，但你可以使用另一個 .css 檔案覆蓋它，只需將其包含在 main.css 之後即可。你可以使用以下程式碼的 override.css 跟隨 main.css，例如：

p.green { color: #006600; }

現在所有帶有綠色類的段落都將以深綠色而不是淺綠色寫入。

其他原則適用，例如’！important’規則，特異性和繼承。

當有人第一次訪問你的網站時，他們的瀏覽器會下載當前頁面的 HTML 以及連結的 CSS 檔案。然後當他們導航到另一個頁面時，他們的瀏覽器只需要下載該頁面的 HTML; CSS 檔案已快取，因此無需再次下載。由於瀏覽器快取外部樣式表，因此頁面載入速度更快。