css樣式命名參考
阿新 • • 發佈：2019-02-20
(1)顏色:使用顏色的名稱或者16進位制程式碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字型大小,直接使用"font+字型大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項::
1.一律小寫;
2.儘量用英文;
3.不加中槓和下劃線;
4.儘量不縮寫，除非一看就明白的單詞.
推薦的 CSS 書寫順序
//顯示屬性
display
list-style
position
float
clear
//自身屬性
width
height
margin
padding
border
background
//文字屬性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字型大小,直接使用"font+字型大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項::
1.一律小寫;
2.儘量用英文;
3.不加中槓和下劃線;
4.儘量不縮寫，除非一看就明白的單詞.
推薦的 CSS 書寫順序
//顯示屬性
display
list-style
position
float
clear
//自身屬性
width
height
margin
padding
border
background
//文字屬性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content