CSS語法規範與程式碼風格

1. 語法規範

CSS規則又兩個主要的部分構成：選擇器+一條或多條宣告。

• 選擇器：用於指定CSS樣式的HTML標籤，花括號內的是設定的具體樣式
• 屬性與屬性值以鍵值對的形式出現
• 屬性與屬性值之間用“:"分開
• 鍵值對之間用“;”分開

2. 程式碼風格

2.1 展開格式

h5 {
    color: red;
    font-size: 16px;
}

2.2 樣式大小寫

採取小寫。

2.3 空格規範

• 屬性值前面，冒號後面，保留一個空格
• 選擇器和花括號中間保留一個空格

2.4 命名規範

當選擇器裡是類名時，且類名由多個單片語成，則各個單詞之間用“_”分隔。

style_red {
    color: red;
}

2.5 書寫規範

當使用並集選擇器時，各個元素豎著寫。

div,
p,
span {
    color: red;
}

3. 屬性的書寫順序

1. 佈局定位屬性
   • display、position、float、clear、visibility、overflow
   • display第一個寫
2. 自身屬性
   • width、height、margin、padding、border、background
3. 文字屬性
   • color、font、text-decoration、text-align、vertical-align、white-space、break-word
4. 其它屬性（CSS3）
   • content、cursor、border-radius、box-shadow、text-shadow、background: linear-gradient...