CSS 的套用方式

在 HTML 中可以利用三種方式來套用 CSS 樣式 :

行內樣式

直接在 HTML 的標籤終將 CSS 的樣式設定在 Style 屬性裡，此方式雖然相當直覺，缺點是一旦要修改就必須回到原始設定的標籤中調整屬性的設定。遇到大量的修改時會出事。

<!-- 行內樣式 - 將 h1 的文字設定成紅色 -->
<h1 style="color: #FF0000">標題一文字</h1>

內部樣式表載入

在 HTML 文件中的 <head> 檔頭元素裡，將 CSS 的語法設定在 <style> 元素之中，此處所定義的 CSS 樣式就僅提供該網頁使用。

<head>
    <!-- 內部樣式表載入 - 將 h1 的文字設定成紅色 -->
    <style>
        h1 {
            color: #FF0000;
        }
    </style>
</head>
<body>
<!-- 行內樣式 - 將 h1 的文字設定成紅色 -->
<h1>標題一文字</h1>
</body>

外部樣式檔載入

將所有的 CSS 樣式單獨寫在一個外部檔案中，格式為「.css」。若要套用這些 CSS 樣式時只要在 HTML 中載入這個外部檔案即可，後續維護只要修改一個檔案即可，較推薦。

  1. 使用 <link> 元素 :

    <head>
    <link rel="stylesheet" href="CSS樣式檔的路徑">
</head>

  2. 使用 @import :

    <head>
    <style>
        @import url(style.css);
    </style>
</head>

CSS 基本語法

CSS 樣式的語法是由 選擇器 與 宣告 所組成，其中宣告包含了 屬性 與 值，基本格式如下 :

選擇器 是用來指定 CSS 的樣式要套用到 HTML 的那些位置上。

宣告 是用來設定選擇器所指定的元素該套用何種樣式。CSS 的樣式宣告是位於「{...}」大括號之間，每一個宣告都是由屬性與值所組成，其中以「:」分開。