让css样式变得高效整洁

1.公用元素的默认值重设
不一样的浏览器他元素默认的属性值也有所不一样,这时候很多人一个一个针对性的来重置。那样会出现大量的重复工作。那么把一些元素默认值重置,来实现浏览器的兼容.
比如:
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ th, td, /* table elements 表格元素 */ img/* img elements 图片元素 */{  border:medium none;  margin: 0;  padding: 0; 

/** 重置列表元素 **/
ul{ list-style: none; } 
/** 重置超链接元素 **/
a { text-decoration: none; color:#fff;}  a:hover { text-decoration: underline; color:#000; } 
/** 重置图片元素 **/
img{ border:2px;} 
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
具体还要根据项目的需求做出适当的修改,来达到各浏览器的兼容性。

2.有意义的命名
一些无意的命名和自以为是的命名,让项目组的其他人员看了都会有发癫的。
就像下面这种命名:
.aaaa1{width:210px;} .aadd2{width:220px};
我估计一般人应该不会在项目里这样来命名class的。
还有最好不要使用元素的特性来命名class和id如(颜色,位置,大小等等)。
如:
<h2>我是 <span class="red">标题</span></h2>
如果要把原先设置为红色的所有字体改成蓝色 那么修改以后的样式就会变成:.red{color:bule;},是不是让人看上去很是别扭! 当然还有另外一种情况,一些固定的样式,定义后就不会修改的了那我们就不用去担心这种情况了。

3.样式代码缩写
CSS代码缩写不仅可以精简代码量还可以提高代码书写速度。在CSS里面有很多可以缩写的属性,包括margin,padding,border,font,background和颜色值等,如果您掌握了代码缩写,原本一长串的代码:

p{ 
    font-family:Arial, Helvetica, sans-serif; 
    font-size: 1.2em; 
    line-height: 1.4em; 
    padding-top:10px; 
    padding-bottom:10px; 
padding-left:5px; 
padding-right:5px;
}
就可以简化为:
p{ 
   font: 1.2em/1.4em Arial, Helvetica, sans-serif; 
   padding: 10px 5px; 
}
还有你可以合并多个CSS选择器为一个,前提是要他们有共同的样式。这样不但代码简洁且可为你节省时间和文件空间。
如:
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left } 
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left } 
h4{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left }

可以合并为
h2,h3, h4{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; float:left }
如果页面中父元素的多个子元素使用一样的样式,那么就可以把一样的样式定义在父元素上,让子元素继承父元素的CSS样式。这样既方便维护你的代码,且可减少代码量。



已被查看 5397
点击这里给我发消息点击这里给我发消息