探索 CSS 概念

  • 4 分鐘

CSS 結構

如果您想要 HTML 頁面在 h1 標籤之間顯示色彩為橘色的所有文字，您可以使用下列 CSS 程式碼。

h1 {
    color: orange;
}

使用上述以 (h1) 開頭的 CSS 程式碼，選取您想要設定樣式的 HTML。 範例中的 h1 稱為選取器。

請注意大括弧內的程式碼，color: orange;t 會宣已選取的 h1 標籤應有的樣式。 大括弧 { } 中的 CSS 程式碼，例如 color: orange; 為 宣告。

您的範例宣告包含屬性， color 其與值分隔，orange具有冒號 (:)，而設定的結尾會以分號標示 (;)。

注意

無需記住 CSS 中每個可用的屬性和值。 您可以參考許多網站。 此外， vscode.dev 或 Visual Studio Code 等工具提供了自動完成選項，可幫助指導您創建 CSS。

內嵌 CSS 檔案

新增樣式資訊的快速方法是使用 head 屬性將它放在 HTML 頁面的 style 標籤內。 此方法不會被視為最佳做法，但適合用於學習和測試。

下列範例會新增具有任何顯示灰色的 <style> 之樣式資訊的標籤 h1。 因為這是唯一的樣式，所以 HTML 的其餘部分會以瀏覽器的預設樣式顯示。

<!DOCTYPE html>
<html>
    <head>
        <!-- Here's the styling information -->
        <style>
            h1 {
                color: gray;
               }
        </style>
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>

在瀏覽器中檢視時，標籤中的 <h1> 「歡迎」文字會顯示灰色。

此螢幕擷取畫面為以灰色顯示標題 1 轉譯 HTML 頁面。

使用 CSS 將樣式套用至 HTML

當您將樣式新增至超文字標記語言 (HTML) 時，最好在不同的 CSS 檔案中執行樣式。 當多個 HTML 檔使用相同的 CSS 時，它們具有一致的外觀。 此外，更新一個 CSS 檔案比更新每個個別 HTML 檔案更容易。

若要參考 CSS 檔案，請使用 link 元素。

link 有兩個屬性，rel 和 href。 rel 用來識別您參考的資源類型，而 樣式表單的樣式表單。 href 用來識別 CSS 檔案的路徑。 如果您的 CSS 檔案所在的資料夾與 HTML 檔案相同，且具有 style.css 的名稱，您可以使用下列指令從您的頁面參考它：

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

現在您至少有兩個檔，一個 .html 檔和一個 .css 檔。 上述範例會有連結至 CSS 的 HTML 檔案。

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <h1>Welcome</h1>
        <p>This is my site</p>
    </body>
</html>