优化你的CSS代码~!
最近看过许多网友制作的SKIN的CSS文件，发现其中有着许多冗余的代码。下面我来跟大家介绍一下，如何清除这些冗余的代码，让你的CSS文件更加简洁。
一、margin、padding属性
参照相关资料我们可以知道，margin和padding代表的意思分别是外部边距和内部填充距离，在许多网友的CSS中，关于这两个属性的冗余代码是出现得最多的。比如：margin:0px，大家可以查看一下自己的CSS文件中，是否许多的margin:0px，其中有的是不需要的，你可以尝试删除它，当然也并不是所有的margin:0px都没有用，相同，padding:0px也一样。
另外，margin和padding中各项属性的顺序是：上右下左，你只要记住是顺时针方向就好了。我们再看看这两段代码：
margin:0px 0px 0px 10px；
margin-left:10px；
其实他们的作用是一样的，下面的则是一种缩写，使用缩写我们可以减少CSS代码，并使阅读起来更为方便。（padding也相同。）
二、!important;属性
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。IE是不支持这个语法的，而其他的浏览器都支持，通过这一点，我们可以得知，设置了优先权的代码是不会被IE执行的。所以我们可以important的后面添加CSS样式，使其可以区别于IE和FireFox等浏览器。
上次在看Miles的CSS代码时，我看到了这样一句：
height:50px !important;height:50px;
这里就是多余的了，我们可以这样写：height:50px就够了，这个错误在我刚开始制作CSS时也曾出现过。
三、text-align、font样式
这两个样式的作用我就不说了，但是这两个样式在许多网友的CSS中也存在许多冗余。下面我来举例说明一下，层的定义如下：
<div id="main">
<div id="body1">
<div id="content1">
</div>
</div>
<div id="body2">
</div>
<div>
CSS文件如下（错误示例）：
#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
#body1{width:500px;text-algin:center;font-size:12px;color:#FF0000;}
#content{text-algin:left;font-size:12px;color:#000000;}
#body2{text-algin:left;font-size:12px;color:#000000;}
大家可以从上面的代码中轻易地看出，有许多的冗余代码，现在我们来书写正确的代码：
#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
#body1{text-algin:center;color:#FF0000;}
#content{width:300px;text-algin:left;color:#000000;}
#body2{}
以上就是正确的代码，由于大家在制作SKIN时，对PJBLOG的DIV结构没搞清楚，才会出现这种错误。
四、display:none的使用
display:none的作用就是使被定义的层不显示。我们再来看看这段代码：
#blogTitle{font-size:0px;margin:10px 3px 3px 40px;height:20px;color:#FFC1E6;display:none}
大家有没有觉得这有些多余呢，是的，既然设置了不显示，为何还要保留那些不必要的样式呢？出现这种情况我就知道，这个SKIN是改自某人的。
五、还是margin和padding
我还是通过例子来给大家说明，层的定义同上，以下是CSS的定义（错误示例）：
#main{margin:5px 0px 5px 0px;}
#body1{margin:12px 0px 10px 0px;}
#content{margin:8px 0px 2px 0px;}
#body2{margin:10px 0px 15px 0px;}
现在我们再来书写正确的样式：
#main{}
#body1{margin-top:17px ;}
#content{margin:8px 0px 2px 0px;}
#body2{margin:20px 0px ;}
这里需要大家制作一下示例才能了解，首先#main{margin:5px 0px 5px 0px;}是没有必要的，他无非定义的就是整个页面的上、下外边距。（在一定场合下却需要这样书写）我们同样可以通过定义#body1的上边距和#body2的下边距来设置，所以才有了#body1{margin-top:17px ;}和#body2{margin:20px 0px ;}（这里定义的是#body2的上下边距为20px，左右边距为0px，也是缩写的一种方式。）
同样的道理，于是我们可以省略了#body1的下边距，在#content层在定义上边距，另外大家还需要先弄清楚层的嵌套关系，否则就会出错。
好了，写到这里我也该去睡了，以上就是这些时间查看大家的CSS文件获得的经验，希望对大家书写CSS的时候有所帮助，制作出来的SKIN更加简洁、明了。
**本文为个人原创文章，转贴请注明出处 番茄'sBlog
11月 11th, 2005 at 08:47:01
不错，受教育了[lol]
11月 11th, 2005 at 16:42:20
你写的CSS教程真是太及时了，我这几天确实也很为PADDING和MARGING着急。谢谢你了，支持。
11月 11th, 2005 at 17:03:08
相关文章：
用!important解决IE和Mozilla的布局差别：
http://www.w3cn.org/article/tips/2004/91.html
11月 11th, 2005 at 17:19:37
#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
#body1{text-algin:center;color:#FF0000;}
#content{width:300px;text-algin:left;color:#000000;}
#body2{}
哪些是可以省略参数的？是不是父级已经定义，而子级又同父级一样就不用重复定义了,只定义不同的参数就可以了？
11月 11th, 2005 at 17:51:52
正确~
按道理#main{width:500px;text-algin:left;font-size:12px;color:#000000;}
中的 text-algin:left 和color:#000000 也是可以不需要定义的，因为页面默认就是左对齐，黑色字体，为了方便起见我们给予了定义。
#body1 是嵌套在 #main 中的，当#body1 中有的样式与 #main 一样时，就不需要再次定义了(指的是 font 、text-algin样式的属性 )。
所以#body2 中就省略了定义，而 #content 是嵌套在#body1 中的，他们的文本对齐方式是不一样的，则需要重新定义~~
11月 25th, 2005 at 13:40:41
感謝您，我有轉貼，也有註明出處喔….^^[YoDylan
12月 4th, 2005 at 12:53:13
站长的Blog的引用功能还有问题哦~
我的引用显示在”评论”中,但链接错误~
(注:我是在MSN Blog上用的引用)
实际地址:http://spaces.msn.com/members/oegg/Blog/cns!1pUvPYQUVejpB7uzfOT-EejA!185.entry
05月 13th, 2006 at 10:36:01
blog主确实强，写的文章我都能一口气读完，这样的好文章应多一点！谢谢
06月 11th, 2006 at 09:32:49
楼主实在谢谢了
07月 6th, 2006 at 22:11:55
我不懂代码，所以我做皮肤时常是这么做的，把别人的各个皮肤文件拷下来，然后修改图片，如是是html代码，就好一点，我还多少能看懂一点，如是果CSS代码，就不行啦，最多能改点颜色代码。[ng]
08月 6th, 2006 at 15:56:03
谢谢楼主了
08月 9th, 2006 at 13:14:06
跪谢blog主，thx
08月 17th, 2006 at 22:10:47
楼主..写得不错呀.我来给你加油……望继续这种精神…..呵呵
08月 21st, 2006 at 00:58:55
感谢楼主,写的真的是很清楚,对我帮助很大
08月 21st, 2006 at 15:00:07
不错，谢谢了，我也能看懂，太好了，谢谢了
08月 24th, 2006 at 09:44:32
谢谢 楼主的教程
08月 28th, 2006 at 15:01:29
多谢!辛苦了!
09月 9th, 2006 at 10:07:02
果然高手
09月 19th, 2006 at 15:18:59
看了你写的教程，我照着弄了一个框架，基本上实现了，但是我对中间的pagebody下包括的两个sidebar和mainbody两再没有加clear的前提下，sidebar和mainbody不能顶对其排列，这是怎么回事啊？
10月 10th, 2006 at 02:07:59
番茄's blog ,不得不说你写的非常好.难得这么有耐心.你的文章让我受益非浅.非常感谢你!!
看完这篇文章可以算是入门了.我还在学习中.以后还会关注你的博客的.Good Luck!
10月 10th, 2006 at 13:07:30
[b]写得真好
通俗易懂，内容简捷，再接再厉，写更多的文章支持中国的IT事业，敬礼！！！！
10月 24th, 2006 at 14:41:51
楼主辛苦了,谢谢!!!
11月 1st, 2006 at 17:57:34
不错，受益非浅。
11月 11th, 2006 at 22:44:54
通俗易懂，写得太好了！辛苦了
11月 23rd, 2006 at 22:14:27
狂顶楼主，写得太好了
让我对CSS有了重新的认识
01月 22nd, 2007 at 10:17:00
谢谢了
01月 31st, 2007 at 15:21:10
谢谢楼主，真的很好
01月 31st, 2007 at 16:15:58
写得不错.
一看就懂了哈.
02月 7th, 2007 at 15:57:53
太好啦,我会继续关注您的文章!
02月 21st, 2007 at 17:36:56
写得真好，支持。
03月 1st, 2007 at 14:16:45
关于 五、还是margin和padding
我觉得不是错误
有些情况就是需要这么写的
03月 14th, 2007 at 16:13:34
二、!important;属性
!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权。IE是不支持这个语法的，而其他的浏览器都支持，通过这一点，我们可以得知，设置了优先权的代码是不会被IE执行的。所以我们可以important的后面添加CSS样式，使其可以区别于IE和FireFox等浏览器。
谁说IE不支持!important。
03月 23rd, 2007 at 19:46:38
已认真拜读过了，谢谢楼主辛苦创作，
向楼主之精神致敬！！
04月 6th, 2007 at 10:31:24
受益非浅~~~
谢谢~~~~~~
04月 8th, 2007 at 14:33:45
[em_25]谢谢你~上帝会保佑你的,阿咪托佛~
04月 18th, 2007 at 14:42:51
明显需要支持一下！
04月 20th, 2007 at 12:07:07
唔错。学到左Ｄ野!多谢!
04月 20th, 2007 at 16:41:11
写的蛮好的啊，希望下次还能够看到如此精彩的教程
05月 8th, 2007 at 16:13:36
太感谢了楼主!!!!!
05月 11th, 2007 at 11:19:42
好厉害！
05月 20th, 2007 at 15:28:48
写的好
06月 2nd, 2007 at 16:35:19
我看不懂，但是看到大家的留言，我能感觉它真的不错。先顶下下，再去仔细磨磨[em_08]