(转)优化你的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更加简洁、明了。 百度的CSS代码就让人很恼火的说！
看了你这个~
恩
觉得是不错！
谢谢啦~:T: css调用不到家
看不大明白
回去慢慢研究去
嘿嘿~~ 给大家看一个经典的
写的比较规范
命名也比较规范
我自己改了些地方
用在自己的博客上了
body {color:#FECE00}
a:link,a:visited {text-decoration:none;color:#FECE00;}
a:hover {text-decoration:none;color:#FECE00;}
/*回复引用样式*/
blockquote {border:1px solid #5F7276;border-left:3px solid #5F7276; background:#393939}
blockquote h5{ border-bottom:1px dashed #5F7276;color:#5F7276;background:#333}
blockquote p {color:#999;background:#393939}
blockquote .author {color:#fff}
blockquote .time {color:#FFAB00}
/*通用*/
/*---弹出窗口---*/
/*分页样式*/
.COMMON_Page_div{padding:16px 0 10px 0 }
.COMMON_Page_Item_Total_li{background:#9c5f17;border: 1px solid #031114; color:#FFAB00;}
.COMMON_Page_Item_Cur_li{background:#ff6600;border: none; color:#fff;}
.COMMON_Page_Item_Normal_li,.COMMON_Page_Item_Next_li{background:#031114;border:1px solid #031114;}
/*---主区域---*/
#container_div {background:#120c00;}
#pagehead_div { margin:0 auto;background: url() repeat-x; width:100%;height:207px;}
#pagemain_div { margin:0 auto;padding:0 8px 0 8px}
#pagefoot_div {margin:0 auto;padding:8px;text-align:center; font-size:11px}
/*--头部--*/
#pagehead_Inner_div{ margin:0; padding:0;background:#000000 url([img]http://www.i170.com/attachment/att_3/TOYSMAN/_823079F4-EE62-45E6-B783-462F78189DDB.jpg[/img]) right repeat-x;height:207px; border-bottom:8px solid #000; background-position:0px -200px; }
#head_part1_div {float: left;width:76%;margin:0;padding:26px 0 100px 22px}
#head_part1_div h1 a:link,#head_part1_div h1 a:visited {font-size:18px;color:#000; font-weight:bolder; }
#head_part1_div h1 a:hover {color:#000;font-weight:bolder;}
#head_part1_div h2 {padding:7px 0 0 5px;font-size:12px;font-weight:normal;color:#000;}
#head_part2_div {float:right; width:40px; text-align:right;margin:0;padding:0 28px 0 0;}
#head_Cate_div {clear:both;margin:0;padding:0 0 0 20px; text-align:left;}
#head_Cate_div ul {margin:0;padding:0 0 0 4px;list-style:none}
#head_Cate_div li {float:left;display:inline;margin:0 2px 0 0;padding:16px 20px 4px 12px;letter-spacing:1px}
#head_Cate_div li a:link,#head_Cate_div li a:visited {color:#FFAB00; font-weight:bolder; }
#head_Cate_div li a:hover{color:#FECE00}
#head_Cate_div .ARTICLE_Cate_Item_Active_li a:link,#head_Cate_div .ARTICLE_Cate_Item_Active_li a:visited {color:#FFAB00;}
#head_Cate_div .ARTICLE_Cate_Item_Active_li {background:url() no-repeat right top;color: #FFF027;}
#head_Cate_div .ARTICLE_Cate_Item_Normal_li {cursor:pointer}
/*-内容-*/
#pagemain_Inner_div {margin:0}
#content_div {float:left;margin:0;padding:8px 0 0 12px;overflow:hidden;width:75%;border-right:#5f4000 solid 1px}
#content_Inner_div {margin:0;padding:0 24px 0 12px;}
/*--侧栏通用--*/
#sidebar_div {float:right;width:22%;overflow:hidden;}
#sidebar_Inner_div {padding:0 12px 0 12px;}
.SB_Module_div {clear:both;text-align:left;padding:0 0 20px 0}
.SB_Module_div h3{font-size:14px;padding:4px 0 6px 24px;color:#FECE00; background:#000 url() no-repeat;border-left:5px solid #5f4000; }
.SB_Module_div ul {margin:0;padding:4px 8px 2px 0}
.SB_Module_div li {margin:0;padding:4px 0 4px 0;list-style:none; border-bottom:1px solid #5f4000;color:#FFAB00}
.SB_Module_div li a:link,.SB_Module_div li a:visited {text-decoration:none;color:#FFF027}
.SB_Module_div li a:hover {color:#FECE00}
.SB_Module_foot_div {padding:0;}
#sb_Other_div ul {margin:0;list-style:none; font-size:12px;text-align:center;padding:10px 0 30px 0}
#sb_Other_read_li {padding-left:27px}
#sb_NewComments_div li {height: 20px; overflow: hidden;}
/*用户信息*/
#sb_BaseInfo_div {font-size:12px;text-align:center}
#sb_Logo_div {margin:0; padding:4px 0}
#sb_Logo_div img{ border: solid 4px #FFAB00;padding:2px 2px; background:#031114}
#sb_BaseInfo_Nick_div {padding:0 0 5px 0}
#sb_BaseInfo_Intro_div {margin:0;padding:4px 0 10px 12px;text-align:left}
/*标签*/
#articles_Labels_div {padding:4px 0 4px 0;font-size:12px;border:1px solid #5f4000; background:#000}
#articles_Labels_div h4 {display:none}
#articles_Labels_div ul {margin:0;padding:0 0 0 16px;}
#articles_Labels_div li {display:inline;padding:0 5px}
#articles_Labels_div a ,#articles_Labels_div a:link ,#articles_StarList_div a,#articles_StarList_div a:link {color:#FFF027}
#articles_Labels_div a:hover,#articles_StarList_div a:hover{color:#FECE00}
/*推荐文章*/
#articles_StarList_div {margin:8px 0 0 0;border:#000 solid 1px; background:#000 url() no-repeat right center;font-size:12px;background-position:-120px -230px;}
#articles_StarList_div h4 {padding:4px 0 2px 28px;font-weight:bold;font-size:12px;color:#FECE00;}
#articles_StarList_div ul {margin:0; padding:8px 0 4px 42px;}
#articles_StarList_div li {list-style:square inside;color:#FECE00; padding:2px 0 2px 0;background: no-repeat center left}
#articles_StarList_Switch_a {font-size:12px}
#articles_StarList_Area_div ul {list-style:none;margin:0 !important}
/*搜索*/
#articles_Search_div {float:left; padding:0 0 0 2px; margin:0; font-size:12px; width:320px; }
#articles_Search_Key_text {margin:0;padding:1px 0 1px 0;height:16px; width:200px;background: url([img]http://www.i170.com/attachment/att_1/blue_o_yang/_F789821C-E5A5-47F3-ADCF-24A91DAA12BD.jpg[/img]);border:solid #000 1px; color:#FECE00}
#articles_Search_Go_button { margin:0;border:solid #000 1px;background:#031114 repeat-y center;color:#FECE00;padding:1px 0 3px 0; font-weight:bold;height:21px;}
/*展开.列表*/
#articles_ListBar_div { margin:0;clear:both;padding:8px 0 5px 0;}
#articles_List_div h3{font-size:12px; color:#339900 }
#articles_ListType_div {float:right; width:120px;}
#articles_ListType_div ul {padding:0; font-size:12px;margin:0;list-style:none;}
#articles_ListType_div li {display: inline; width:30px; padding:0 5px 0 0}
#articles_ListType_0_a {padding-left:16px;background:url(/Homepage/images/hp_ListE.gif) no-repeat 0 0}
#articles_ListType_1_a {padding-left:13px;background:url(/Homepage/images/hp_ListL.gif) no-repeat 0 0}
.ARTICLE_Inner_Title_div {padding:10px 0 5px 25px;width:60%;float:left;font-size:12px}
.ARTICLE_Inner_Attrib_div{padding:10px 0 5px 5px;width:30%;float:right;font-size:12px}
/*文章*/
#articles_ListE_div{ clear:both;padding:0 10px 0 0}
#articles_ListE_div .ARTICLE_Row_div{ margin:0 0 10px 0;padding:10px 10px 4px 0;}
.ARTICLE_Title_div {font-size:14px; padding:4px 0 2px 26px; background:url([img]http://www.i170.com/attachment/att_1/blue_o_yang/s__B45C8811-AB16-4081-A516-0B3CD2B1D9EE.gif[/img]) no-repeat 0 0}
.ARTICLE_Title_div .ARTICLE_Title_a{display:block; width:100%;}
#articles_ListE_div .ARTICLE_Title_a:link,#articles_ListE_div .ARTICLE_Title_a:visited{font-weight:bold;color:#FFF027}
#articles_ListE_div .ARTICLE_Title_a:hover{color:#919172;font-weight:bold}
.ARTICLE_Content_div { margin:10px 0 8px 10px; padding:0;}
.ARTICLE_Content_ViewWhole_div {font-weight:bold;}
.ARTICLE_Attrib_div {color:#FFAB00;text-align:right; border-top:1px dashed #5f4000}
/*单篇文章*/
##articleView_Title_div{ margin:0 10px 0 10px }
#articleView_Top_Edit_div{ color:#FFF027}
#articleView_div {padding:0 10px 4px 10px;font-size:14px; }
#articleView_Attrib_div{ margin:0 10px 0 10px;padding:5px 4px 0 4px}
/*评论*/
#articleView_Comments_div h4{padding:10px 0 4px 8px; font-size:14px; color:#FFAB00;border-bottom:1px solid #FECE00;}
.ARTICLEVIEW_Comment_Row_Title_Main_span a:link, .ARTICLEVIEW_Comment_Row_Title_Main_span a:visited, .ARTICLEVIEW_Comment_Row_Title_Main_span a:active {font-weight:bolder}
.ARTICLEVIEW_Comment_Row_Content_div {background:#002728}
/*发表评论*/
#articleView_PostComment_div h4{padding:10px 0 4px 8px; font-size:14px; color:#FFAB00;}
#ForbidComment_div {width:148px;border:1px solid #990101;color:#990000}
#articleView_Comm0_Post_Validate_div .COMMON_Pre_label{ color:#fff}
#articleView_Comm0_0_Edit_Switch_a{border:#505050 solid 1px; background:url([img]http://www.i170.com/attachment/att_1/blue_o_yang/_F789821C-E5A5-47F3-ADCF-24A91DAA12BD.jpg[/img]) right center;}
/*附件*/
.COMMON_Att_List_ul li{width:200px}
.COMMON_SubjStr_span{ color:#FECE00}
/*关于*/
#about_Resume_div{padding:10px 10px 10px 10px;}
/*--底部--*/
#pagefoot_Inner_div a{padding:0}
给大家
页:
[1]