CSS代码优化

1.增加代码重用率

body{ margin: 0px; padding: 0px; } 
#header{ padding: 10px; background-color: #ffbf00; }
#header h1{ font-size: 25px; color: #ffffff; }
#nav{ float: left; padding: 10px; background-color: #6a6a58; height: 500px; font-size: 14px; }
#nav a{ color: #ffffff; }
#content{ background-color: #eeeeee; height: 500px; padding: 10px; font-size:14px; }
#content ul{ margin:0px; }

可以将属性值相等的合并，优化后

*{ margin: 0px; padding: 0px; }
#header,#nav,#content{ padding: 10px; }
#header，a{ color: #fff; }
#header h1{ font-size: 25px; }
#header{ background-color:#ffbf00; }
#nav,#content{ height: 500px; font-size: 14px; }
#nav{ float: left; background-color: #6a6a58; }
#content{ background-color: #eee; color:#000; }

2.使用样式经行覆盖

.ls1,.ls2,.ls3{ font-size:12px; list-style:none; 200px; padding:10px; background-color:#eeeeee; } 
.ls1{ border:1px solid #4b4ed5; }
.ls2{ border:1px solid #ac4bd5; }
.ls3{ border:1px solid #82d54b; }

优化后如下：

.ls1,.ls2,.ls3{ font-size:12px; list-style:none; 200px; padding:10px; background-color:#eeeeee; border:1px solid #4b4ed5; } 
.ls2{ border:1px solid #ac4bd5; }
.ls3{ border:1px solid #82d54b; }