注释:在逗号或分号之后添加空格,是所有书写类型的通用规则。
选择器、属性和值都使用小写最后一个值也以分号结尾 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 font visibility height text-align position margin text-decoration float padding vertical-align clear border white-space list-style overflow color top 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; } 注释格式:/* 注释文字 */ 对选择器的注释统一写在被注释对象的上一行,对属性及值的注释写于分号后。 原则上每个系列的样式都需要有一个注释,言简意赅的表明名称、用途、注意事项等。 短注释应该在单行中书写,并在 <!-- 之后增加一个空格,在 --> 之前增加一个空格: <!-- This is a comment --> 长注释,跨越多行,应该通过 <!-- 和 --> 在独立的行中书写: <!-- This is a comment This is a comment --> 选择器顺序 从大到小(以选择器的范围为准) 从低到高(以等级上的高低为准) 从先到后(以结构上的先后为准) 从父到子(以结构上的嵌套为准) /* 从大到小 */ .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;}转载于:https://www.cnblogs.com/YeChing/p/6247227.html
