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

《CSS无难事-如何模块化散落的边距、宽度、行高等属性定义》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、我们首先来观察一下国内的一套开源CMS管理系统－PHPCMS的CSS文件部分定义：/*通用容器*/.box{border:1pxsolid#c3d4e7;zoom:1;overflow:auto;padding-bottom:10px}.boxh5,.boxh6{background:url(../images/v9/title.png)no-repeatrighttop;color:#1e50a2;height:26px; margin-bottom:10px;line-height:26px;padding-left:10px;border-bottom:1pxsoli

2、d#dce7f3;position:relative}.boxh6{margin-bottom:0}.boxh5.title-1,.boxh6.title-1{background-position:right-52px}.boxh5.title-2,.boxh6.title-2{background-position:right-100px}.boxh5.title-2span.tab{float:right;padding-right:6px;color:#a4bcd6}.boxh5.title-2span.tabspan{color:#2064ae;cursor:ha

3、nd;!important;cursor:pointer}.boxa.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:010px;overflow:auto}/*滚动公告*/#announ{height:26px;line-height:24px;overflow:hidden;float:left;background:url(../

4、images/v9/icon.png)no-repeatleft-461px;padding-left:20px}类似上面的代码，散落在CSS中的边距、行高等定义，如滚动公告的padding-left:20px；.box{border:1pxsolid #c3d4e7;zoom:1;overflow:auto;padding-bottom:10px}中的padding-bottom:10px;如果一个网站的模块比较多，每次的css都要声明这样的边距定义，这样就会增加了css的文件体积，而且多次出现等同数值的css定义，也会显得代码冗余。今天我们要讲的就是如何抽取CSS文件中

5、散落在不同模块定义的边距、行高、宽度、浮动、字体大小等问题。在上期说的publics.css我们抽取了公共的东西（http://www.fendouzhai.com/?action-viewnews-itemid-534），现在我们再做一次抽取,文件定义如下：==========================base.css============================.color999{color:#999;}.clor666{color:#666;}.color690{color:#690;}.clor888{color:#888;}.bgWhite{bac

6、kground:#fff;}.ovfohden{overflow:hidden;}.center1{text-align:center;}.center2{margin:0auto;text-align:center;}.dpnone{display:none;}.fl{float:left;}.fr{float:right;}.clr{clear:both;}.wid980,.wid990,.wid1000{clear:both;margin:0auto;}.wid980{width:980px;}.wid990{width:990px;}.wid1000{width:1

7、000px;}.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{lin