CSS无难事-如何模块化散落的边距、宽度、行高等属性定义.doc

我们首先来观察一下国内的一套开源CMS管理系统PHPCMS的CSS文件部分定义：/* 通用容器 */.boxborder:1px solid #c3d4e7;zoom:1; overflow:auto; padding-bottom:10px.box h5,.box h6background: url(./images/v9/title.png) no-repeat right top;color:#1e50a2; height:26px;margin-bottom:10px; line-height:26px; padding-left:10px;border-bottom:1px solid #dce7f3; position:relative.box h6 margin-bottom:0.box h5.title-1,.box h6.title-1background-position: right -52px.box h5.title-2,.box h6.title-2background-position: right -100px.box h5.title-2 span.tabfloat:right; padding-right:6px; color:#a4bcd6.box h5.title-2 span.tab span color:#2064ae;cursor: hand;!important;cursor: pointer.box a.more font-size:12px; font-family:宋体; margin-right:8px; font-weight:normal;position:absolute;top:0; *top:1px;_top:1px; right:0.box .content padding:0 10px; overflow:auto/* 滚动公告 */#announ height:26px; line-height:24px; overflow:hidden; float:left;background: url(./images/v9/icon.png) no-repeat left -461px; padding-left:20px类似上面的代码，散落在CSS中的边距、行高等定义，如滚动公告的 padding-left:20px；.boxborder:1px solid#c3d4e7;zoom:1; overflow:auto; padding-bottom:10px 中的 padding-bottom:10px; 如果一个网站的模块比较多，每次的css都要声明这样的边距定义，这样就会增加了css的文件体积，而且多次出现等同数值的css定义，也会显得代码冗余。今天我们要讲的就是如何抽取CSS文件中散落在不同模块定义的边距、行高、宽度、浮动、字体大小等问题。在上期说的publics.css我们抽取了公共的东西（/?action-viewnews-itemid-534），现在我们再做一次抽取,文件定义如下：= base.css =.color999 color:#999;.clor666 color:#666;.color690 color:#690;.clor888 color:#888;.bgWhite background:#fff;.ovfohden overflow:hidden;.center1 text-align:center;.center2 margin:0 auto; text-align:center;.dpnone display:none;.flfloat:left;.frfloat:right;.clrclear:both;.wid980, .wid990, .wid1000 clear:both; margin:0 auto;.wid980 width:980px;.wid990 width:990px; .wid1000 width:1000px;.wid225 width:225px;.wid700 width:700px;.wid715 width:715px;.wid720 width:720px;.hg275 height:275px;.hg70 height:70px;.font12 font-size:12px;.font12b font-size:12px; font-weight:bold;.line20 line-height:20px;.line21 line-height:21px;.line22 line-height:22px;.line23 line-height:23px;.line24 line-height:24px;.line25 line-height:25px;.line30 line-height:30px;.imt10 margin-top:-10px;.imt20 margin-top:-20px;.radiusTborder-top-right-radius:5px; border-top-left-radius:5px;.radiusB border-bottom-left-radius:5px; border-bottom-right-radius:5px;.radius3 -moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;.radius5 -moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;.r10border-radius:10px;.rt3border-radius:3px 3px 0 0;.rt5border-radius:5px 5px 0 0;.rt10border-radius:10px 10px 0 0;.rb3border-radius:0 0 3px 3px;.rb5border-radius:0 0 5px 5px;.rb10border-radius:0 0 10px 10px;.rl3border-radius:3px 0 0 3px;.rl5border-radius:5px 0 0 5px;.rl10border-radius:10px 0 0 10px;.rr3border-radius:0 3px 3px 0;.rr5border-radius:0 5px 5px 0;.rr10border-radius:0 10px 10px 0;.mt0margin-top:0!important;.mt5margin-top:5px!important;.mt6margin-top:6px!important;.mt8margin-top:8px!important;.mt9margin-top:9px!important;.mt10margin-top:10px!important;.mt15margin-top:15px!important;.mt20margin-top:20px!important;.mt25margin-top:25px!important;.mt30margin-top:30px!important;.mt35margin-top:35px!important;.mt40margin-top:40px!important;.mt45margin-top:45px!important;.mt50margin-top:50px!important;.mr0margin-right:0!important;.mr1margin-right:1px!important;.mr2margin-right:2px!important;.mr3margin-right:3px!important;.mr4margin-right:4px!important;.mr5margin-right:5px!important;.mr10margin-right:10px!important;.mr15margin-right:15px!important;.mr20margin-right:20px!important;.mr25margin-right:25px!important;.mr30margin-right:30px!important;.mr35margin-right:35px!important;.mr40margin-right:40px!important;.mb0margin-bottom:0!important;.mb5margin-bottom:5px!important;.mb10margin-bottom:10px!important;.mb15margin-bottom:15px!important;.mb20margin-bottom:20px!important;.mb25margin-bottom:25px!important;.mb30margin-bottom:30px!important;.mb35margin-bottom:35px!important;.mb40margin-bottom:40px!important;.ml0margin-left:0!important;.ml3margin-left:3px!important;.ml4margin-left:4px!important;.ml5margin-left:5px!important;.ml10margin-left:10px!important;.ml11margin-left:11px!important;.ml12margin-left:12px!important;.ml13margin-left:13px!important;.ml14margin-left:14px!important;.ml15margin-left:15px!important;.ml16margin-left:16px!important;.ml17margin-left:17px!important;.ml18margin-left:18px!important;.ml20margin-left:20px!important;.ml25margin-left:25px!important;.ml30margin-left:30px!important;.ml35margin-left:35px!important;.ml40margin-left:40px!important;.pt0padding-top:0!important;.pt1padding-top:1px!important;.pt2padding-top:2px!important;.pt3padding-top:3px!important;.pt4padding-top:4px!important;.pt5padding-top:5px!important;.pt6padding-top:6px!important;.pt7padding-top:7px!important;.pt8padding-top:8px!important;.pt10padding-top:10px!important;.pt11padding-top:11px!important;.pt12padding-top:12px!important;.pt15padding-top:15px!important;.pt16padding-top:16px!important;.pt17padding-top:17px!important;.pt18padding-top:18px!important;.pt20padding-top:20px!important;.pt25padding-top:25px!important;.pt30padding-top:30px!important;.pt40padding-top:40px!important;.pr0padding-right:0!important;.pr5padding-right:5px!important;.pr10padding-right:10px!important;.pr15padding-right:15px!important;.pr20padding-right:20px!important;.pr25padding-right:25px!important;.pr30padding-right:30px!important;.pr35padding-right:35px!important;.pr40padding-right:40px!important;.pr50padding-right:50px!important;.pr60padding-right:60px!important;.pr70padding-right:70px!important;.pb0padding-bottom:0!important;.pb5padding-bottom:5px!important;.pb10padding-bottom:10px!important;.pb15padding-bottom:15px!important;.pb20padding-bottom:20px!important;.pb25padding-bottom:25px!important;.pb30padding-bottom:30px!important;.pb35padding-bottom:35px!important;.pb40padding-bottom:40px!important;.pl0padding-left:0!important;.pl2padding-left:2px!important;.pl3padding-left:3px!important;.pl4padding-left:4px!important;.pl5padding-left:5px!important;.pl8padding-left:8px!important;.pl10padding-left:10px!important;.pl11padding-left:11px!important;.pl12padding-left:12px!important;.pl13padding-left:13px!important;.pl14padding-left:14px!important;.pl15padding-left:15px!important;.pl16padding-left:16px!important;.pl17padding-left:17px!important;.pl18padding-left:18px!important;.pl20padding-left:20px!important;.pl25padding-left:25px!important;.pl30padding-left:30px!important;.pl35padding-left:35px!important