CSS 語法構成：選取器、屬性與值的撰寫規則
CSS 由多組規則組成。每個規則由 選取器 (Selector)、屬性 (Property) 和 值 (Property value) 所組成:
例如：以下規則將所有 <h1> 標籤的文字顏色設定為藍色，字體大小設定為 24px：
css
h1 {
color: blue;
font-size: 24px;
}| 名稱 | 說明 |
|---|---|
| 選取器 | 要套用樣式的對象，見 選取器介紹 |
| 宣告區塊 | 大括號包起來的整段內容 |
| 屬性 | 要改變的樣式項目，見 屬性介紹 |
| 值 | 這個屬性要設成什麼，見 色彩 與 單位 |
小提醒
- 一個規則中，可以由多組屬性、值來完成，每個值的結尾務必加上半行字
;，以避免發生語法錯誤。 - 呈上述，規則中最後一組屬性、值的結尾可以不加上半行字
;，但在開發過程中，常有添加新屬性、值的狀況發生，因此，建議還是加上去比較好。 - 若有多個選取器共用同一個規則時(群組化)，可在每個選取器的前面保留一個
空白較好閱讀。 - 值的前面保留一個
空白較好閱讀。 - 建議每組屬性、值都以單行來表示，較好維護與閱讀。
- 建議屬性的開始位置不要與選取器相同，至少保留兩個
空白或一個tab。 - 在 VS Code 中，可在 CSS 文件中進行
按滑鼠右鍵/格式化文件來整理原始碼。
群組選取器
多個選取器共用同一組樣式時，用逗號分隔：
css
h1,
h2,
h3 {
font-weight: 700;
line-height: 1.3;
}小提醒
群組中只要有一個選取器語法錯誤，整條規則都會被瀏覽器丟棄。混用新舊語法時要特別留意。
寫錯了會怎樣
CSS 遇到看不懂的宣告會直接跳過那一行，其餘照常套用：
css
p {
color: red;
colour: blue; /* 拼錯，這一行被忽略 */
font-size: 16px;
}好處是新語法可以安全地與舊語法並存；壞處是打錯字時沒有任何錯誤訊息，只會靜靜地沒有效果。找不到原因時，用瀏覽器開發者工具檢查該屬性有沒有被畫上刪除線。
註解
CSS 只有一種註解寫法，可以跨越多行：
css
/* 全站共用的按鈕樣式 */
.btn {
padding: 8px 16px;
}
/*
多行註解
也是同一種寫法
*/它與 HTML 註解 一樣不會顯示在畫面上，但同樣會留在原始碼裡，別寫入敏感資訊。
常見問題
最後一組屬性的分號可以省略嗎？
語法上可以，但建議一律加上。日後在後面追加新屬性時，很容易忘了替原本的最後一行補分號，整條規則就會失效。
寫錯一個屬性，整條規則都會失效嗎？
不會。CSS 會跳過看不懂的那一行，其餘照常套用。這個特性讓新語法可以安全地與舊語法並存，但也代表打錯字時不會有錯誤訊息，只會靜靜地沒有效果。
CSS 有單行註解嗎？
沒有。CSS 只有 /* ... */ 一種註解寫法，中間可以跨越多行。
多個選取器共用一組樣式怎麼寫？
用逗號分隔選取器就是群組化，它們會共用同一組宣告。注意群組中若有一個選取器語法錯誤，整條規則都會被瀏覽器丟棄。
