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

我们首先来观察一下国内的一套开源CMS管理系统－PHPCMS的CSS文件部分定义：/* 通用容器 */.box{border:1px solid #c3d4e7;zoom:1; overflow:auto; padding-bottom:10px}.box h5,.box h6{background: 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-1{background-position: right -52px}.box h5.title-2,.box h6.title-2{background-position: right -100px}.box h5.title-2 span.tab{float: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；.box{border:1px solid?#c3d4e7;zoom:1; overflow:auto; padding-bottom:10px} 中的 padding-bottom:10px; 如果一个网站的模块比较多，每次的css都要声明这样的边距定义，这样就会增加了css的文件体积，而且多次出现等同数值的css定义，也会显得代码冗余。今天我们要讲的就是如何抽取CSS文件中散落在不同模块定义的边距、行高、宽度、浮动、字体大小等问题。在上期说的publics.css我们抽取了公共的东西（/?action-viewnews-itemid-534/?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;}.fl{float:left;}.fr{float:right;}.clr{clear: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