- 请使用简单的语法来链接样式表(type 属性不是必需的):
- 短规则可以压缩为一行,就像这样:
p.into {font-family: "Verdana"; font-size: 16em;}
- 长规则应该分为多行:
body { background-color: lightgrey; font-family: "Arial Black", Helvetica, sans-serif; font-size: 16em; color: black;}
开括号与选择器位于同一行在开括号之前用一个空格使用两个字符的缩进在每个属性与其值之间使用冒号加一个空格在每个逗号或分号之后使用空格在每个属性值对(包括最后一个)之后使用分号只在值包含空格时使用引号来包围值把闭括号放在新的一行,之前不用空格
注释:在逗号或分号之后添加空格,是所有书写类型的通用规则。
- 选择器、属性和值都使用小写
- 最后一个值也以分号结尾
body { background-color:lightgrey; font-family:"Arial Black", Helvetica, sans-serif; font-size:16em; color:black;}
- 省略值为0时的单位
p {margin:0 10px; background-position:50% 0;}
- 根据属性的重要性按顺序书写
只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。
显示属性 自身属性 文本属性和其他修饰display width fontvisibility height text-alignposition margin text-decorationfloat padding vertical-alignclear border white-spacelist-style overflow colortop min-width background
- 如果属性间存在关联性,则不要隔开写。
p {position:relative;height:20px; line-height:20px; padding:5px; color:#000;}
- 私有在前,标准在后
p { -webkit-box-shadow:0 0 0 #000; -moz-box-shadow:0 0 0 #000; box-shadow:0 0 0 #000;}
- 注释格式:/* 注释文字 */
对选择器的注释统一写在被注释对象的上一行,对属性及值的注释写于分号后。原则上每个系列的样式都需要有一个注释,言简意赅的表明名称、用途、注意事项等。短注释应该在单行中书写,并在 之前增加一个空格: 长注释,跨越多行,应该通过 在独立的行中书写:
- 选择器顺序
从大到小(以选择器的范围为准)从低到高(以等级上的高低为准)从先到后(以结构上的先后为准)从父到子(以结构上的嵌套为准)/* 从大到小 */.m-list p{margin:0;padding:0;}.m-list p.part{margin:1px;padding:1px;}/* 从低到高 */.m-logo a{color:#f00;}.m-logo a:hover{color:#fff;}/* 从先到后 */.g-hd{height:60px;}.g-bd{height:60px;}.g-ft{height:60px;}/* 从父到子 */.m-list{width:300px;}.m-list .itm{float:left;}