CSS 語法 (Syntax)

CSS 的語法是由「選擇器」和「宣告區塊」所組成：

選擇器 {
  屬性: 值;
  屬性: 值;
}

實際的範例：

h1 {
  color: blue;
  font-size: 24px;
}

選擇器 (Selector)

選擇器用來指定這段 CSS 樣式要套用到哪些 HTML 元素上。

上面範例中的 h1 就是選擇器，表示這段樣式會套用到所有的 <h1> 元素。

宣告區塊 (Declaration Block)

宣告區塊用大括弧 { } 包住，裡面包含一個或多個「宣告」。

宣告 (Declaration)

每一條宣告由「屬性」和「值」組成，中間用冒號 : 分隔，最後用分號 ; 結尾。

• 屬性 (Property)：你想要改變的樣式項目，例如 color（顏色）、font-size（字體大小）
• 值 (Value)：屬性的設定值，例如 blue、24px

h1 {
  color: blue; /* color 是屬性，blue 是值 */
  font-size: 24px; /* font-size 是屬性，24px 是值 */
}

多個選擇器

如果多個選擇器要套用相同的樣式，可以用逗號 , 分隔：

h1,
h2,
h3 {
  color: blue;
}

這等同於分開寫：

h1 {
  color: blue;
}
h2 {
  color: blue;
}
h3 {
  color: blue;
}

CSS 空白與換行

CSS 會忽略多餘的空白和換行，所以你可以用空白和換行來讓程式碼更容易閱讀。

以下兩種寫法是等效的：

h1 {
  color: blue;
  font-size: 24px;
}

h1 {
  color: blue;
  font-size: 24px;
}

但建議採用第二種寫法，每個宣告獨立一行，比較容易閱讀和維護。

CSS 大小寫

CSS 的屬性名稱和大部分的值都是不分大小寫的，但建議統一使用小寫。

不過要注意，CSS 選擇器中的 class 名稱和 id 名稱是區分大小寫的，因為它們對應到 HTML 中的 class 和 id 屬性。