base.css

CSS文件结构

CSS文件的书写可以用一定的结构来组织，来达到复用代码的目的。一般编写CSS样式规则，需要一些基础的模块，比如reset.css，它主要负责去减小浏览器的初始差异化规则。这个模块开源的比较广泛应用的有Yahoo的reset.css,还有normalize.css。这些现有资源拿来使用即可，但是使用之前应该认真地阅读一遍源码，看他们都做了哪些事情，还有一个比较基础的模块便是base.css,可以认为它负责一些高频次需要公共使用的样式规则，并且规则清晰，相对独立。下面是根据Yahoo的base.css改写的base.css,留文记录，仅供参考。

/* 文本排版 */
.f12{font-size:12px;}
.f13{font-size:13px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.f18{font-size:18px;}
.f20{font-size:20px;}
.fb{font-weight:bold;}
.fn{font-weight:normal;}
.t2{text-indent:2em;}
.lh120{line-height:120%}
.lh150{line-height:150%}
.lh180{line-height:180%}
.lh200{line-height:200%}
.unl,.unl a{text-decoration:underline;}
.no-unl,.no-unl a{text-decoration:none;}
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
.vt{vertical-align:top;}
.vm{vertical-align:middle;}
.vb{vertical-align:bottom;}

/* 位置 显示 */
.bc{margin-left:auto;margin-right:auto;}
.left,.fl{float:left;}
.right,.fr{float:right;}
.cb{clear:both;}
.cl{clear:left;}
.cr{clear:right;}
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
.clearfix { *zoom: 1; }
.pr,.rel{position:relative;}
.pa,.abs{position:absolute;}
.pa-r,.abs-r{position:absolute;right:0;}
.pa-b,.abs-b{position:absolute;bottom:0;}
.pa-rb,.abs-rb{position:absolute;right:0;bottom:0;}
.pf,.fix{position:fixed;}
.pf-r,.fix-r{position:fixed;right:0;}
.pf-b,.fix-b{position:fixed;bottom:0;}
.pf-rb,.fix-rb{position:fixed;right:0;bottom:0;}
.zoom{zoom:1}
.hidden{visibility:hidden;}
.none{display:none;}
.hand{cursor:pointer;}

/* 颜色 */
.red,.red a{color:#c00!important;text-decoration:none;}
.red a:hover{color:#c00!important;text-decoration:underline;}
.blue,.blue a{color:#2a52c7!important;text-decoration:none}
.blue a:hover{color:#2a52c7!important;text-decoration:underline}
.black,.black a{color:#000!important;text-decoration:none}
.black a:hover{color:#000!important;text-decoration:underline}

/* 尺寸 */
.w1{width:1px;}
.w2{width:2px;}
.w3{width:3px;}
.w4{width:4px;}
.w5{width:5px;}
.w6{width:6px;}
.w8{width:8px;}
.w7{width:7px;}
.w9{width:9px;}
.w10{width:10px;}
.w12{width:12px;}
.w14{width:14px;}
.w15{width:15px;}
.w16{width:16px;}
.w18{width:18px;}
.w20{width:20px;}
.w22{width:22px;}
.w24{width:24px;}
.w25{width:25px;}
.w26{width:26px;}
.w28{width:28px;}
.w30{width:30px;}
.w32{width:32px;}
.w35{width:35px;}
.w36{width:36px;}
.w40{width:40px;}
.w50{width:50px;}
.w60{width:60px;}
.w70{width:70px;}
.w80{width:80px;}
.w90{width:90px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w150{width:150px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w240{width:240px;}
.w250{width:250px;}
.w260{width:260px;}
.w280{width:280px;}
.w300{width:300px;}
.w320{width:320px;}
.w350{width:350px;}
.w360{width:360px;}
.w400{width:400px;}
.w500{width:500px;}
.w600{width:600px;}
.w700{width:700px;}
.w800{width:800px;}
.w{width:100%}
.h1{height:1px;}
.h2{height:2px;}
.h3{height:3px;}
.h4{height:4px;}
.h5{height:5px;}
.h6{height:6px;}
.h8{height:8px;}
.h7{height:7px;}
.h9{height:9px;}
.h10{height:10px;}
.h12{height:12px;}
.h14{height:14px;}
.h15{height:15px;}
.h16{height:16px;}
.h18{height:18px;}
.h20{height:20px;}
.h22{height:22px;}
.h24{height:24px;}
.h25{height:25px;}
.h26{height:26px;}
.h28{height:28px;}
.h30{height:30px;}
.h32{height:32px;}
.h35{height:35px;}
.h36{height:36px;}
.h40{height:40px;}
.h50{height:50px;}
.h60{height:60px;}
.h70{height:70px;}
.h80{height:80px;}
.h90{height:90px;}
.h100{height:100px;}
.h120{height:120px;}
.h140{height:140px;}
.h150{height:150px;}
.h160{height:160px;}
.h180{height:180px;}
.h200{height:200px;}
.h220{height:220px;}
.h240{height:240px;}
.h250{height:250px;}
.h260{height:260px;}
.h280{height:280px;}
.h300{height:300px;}
.h320{height:320px;}
.h350{height:350px;}
.h360{height:360px;}
.h400{height:400px;}
.h500{height:500px;}
.h600{height:600px;}
.h700{height:700px;}
.h800{height:800px;}
.h{height:100%}

/* Margin Padding */
.m1{margin:1px;}
.m2{margin:2px;}
.m3{margin:3px;}
.m4{margin:4px;}
.m5{margin:5px;}
.m6{margin:6px;}
.m7{margin:7px;}
.m8{margin:8px;}
.m9{margin:9px;}
.m10{margin:10px;}
.m12{margin:12px;}
.m14{margin:14px;}
.m15{margin:15px;}
.m16{margin:16px;}
.m18{margin:18px;}
.m20{margin:20px;}
.m22{margin:22px;}
.m24{margin:24px;}
.m25{margin:25px;}
.m26{margin:26px;}
.m28{margin:28px;}
.m30{margin:30px;}
.m32{margin:32px;}
.m35{margin:35px;}
.m36{margin:36px;}
.m40{margin:40px;}
.m50{margin:50px;}
.m60{margin:60px;}
.m70{margin:70px;}
.m80{margin:80px;}
.m90{margin:90px;}
.m100{margin:100px;}
.mt1{margin-top:1px;}
.mt2{margin-top:2px;}
.mt3{margin-top:3px;}
.mt4{margin-top:4px;}
.mt5{margin-top:5px;}
.mt6{margin-top:6px;}
.mt7{margin-top:7px;}
.mt8{margin-top:8px;}
.mt9{margin-top:9px;}
.mt10{margin-top:10px;}
.mt12{margin-top:12px;}
.mt14{margin-top:14px;}
.mt15{margin-top:15px;}
.mt16{margin-top:16px;}
.mt18{margin-top:18px;}
.mt20{margin-top:20px;}
.mt22{margin-top:22px;}
.mt24{margin-top:24px;}
.mt25{margin-top:25px;}
.mt26{margin-top:26px;}
.mt28{margin-top:28px;}
.mt30{margin-top:30px;}
.mt32{margin-top:32px;}
.mt35{margin-top:35px;}
.mt36{margin-top:36px;}
.mt40{margin-top:40px;}
.mt50{margin-top:50px;}
.mt60{margin-top:60px;}
.mt70{margin-top:70px;}
.mt80{margin-top:80px;}
.mt90{margin-top:90px;}
.mt100{margin-top:100px;}
.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb3{margin-bottom:3px;}
.mb4{margin-bottom:4px;}
.mb5{margin-bottom:5px;}
.mb6{margin-bottom:6px;}
.mb7{margin-bottom:7px;}
.mb8{margin-bottom:8px;}
.mb9{margin-bottom:9px;}
.mb10{margin-bottom:10px;}
.mb12{margin-bottom:12px;}
.mb14{margin-bottom:14px;}
.mb15{margin-bottom:15px;}
.mb16{margin-bottom:16px;}
.mb18{margin-bottom:18px;}
.mb20{margin-bottom:20px;}
.mb22{margin-bottom:22px;}
.mb24{margin-bottom:24px;}
.mb25{margin-bottom:25px;}
.mb26{margin-bottom:26px;}
.mb28{margin-bottom:28px;}
.mb30{margin-bottom:30px;}
.mb32{margin-bottom:32px;}
.mb35{margin-bottom:35px;}
.mb36{margin-bottom:36px;}
.mb40{margin-bottom:40px;}
.mb50{margin-bottom:50px;}
.mb60{margin-bottom:60px;}
.mb70{margin-bottom:70px;}
.mb80{margin-bottom:80px;}
.mb90{margin-bottom:90px;}
.mb100{margin-bottom:100px;}
.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml3{margin-left:3px;}
.ml4{margin-left:4px;}
.ml5{margin-left:5px;}
.ml6{margin-left:6px;}
.ml7{margin-left:7px;}
.ml8{margin-left:8px;}
.ml9{margin-left:9px;}
.ml10{margin-left:10px;}
.ml12{margin-left:12px;}
.ml14{margin-left:14px;}
.ml15{margin-left:15px;}
.ml16{margin-left:16px;}
.ml18{margin-left:18px;}
.ml20{margin-left:20px;}
.ml22{margin-left:22px;}
.ml24{margin-left:24px;}
.ml25{margin-left:25px;}
.ml26{margin-left:26px;}
.ml28{margin-left:28px;}
.ml30{margin-left:30px;}
.ml32{margin-left:32px;}
.ml35{margin-left:35px;}
.ml36{margin-left:36px;}
.ml40{margin-left:40px;}
.ml50{margin-left:50px;}
.ml60{margin-left:60px;}
.ml70{margin-left:70px;}
.ml80{margin-left:80px;}
.ml90{margin-left:90px;}
.ml100{margin-left:100px;}
.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr3{margin-right:3px;}
.mr4{margin-right:4px;}
.mr5{margin-right:5px;}
.mr6{margin-right:6px;}
.mr7{margin-right:7px;}
.mr8{margin-right:8px;}
.mr9{margin-right:9px;}
.mr10{margin-right:10px;}
.mr12{margin-right:12px;}
.mr14{margin-right:14px;}
.mr15{margin-right:15px;}
.mr16{margin-right:16px;}
.mr18{margin-right:18px;}
.mr20{margin-right:20px;}
.mr22{margin-right:22px;}
.mr24{margin-right:24px;}
.mr25{margin-right:25px;}
.mr26{margin-right:26px;}
.mr28{margin-right:28px;}
.mr30{margin-right:30px;}
.mr32{margin-right:32px;}
.mr35{margin-right:35px;}
.mr36{margin-right:36px;}
.mr40{margin-right:40px;}
.mr50{margin-right:50px;}
.mr60{margin-right:60px;}
.mr70{margin-right:70px;}
.mr80{margin-right:80px;}
.mr90{margin-right:90px;}
.mr100{margin-right:100px;}

.p1{padding:1px;}
.p2{padding:2px;}
.p3{padding:3px;}
.p4{padding:4px;}
.p5{padding:5px;}
.p6{padding:6px;}
.p7{padding:7px;}
.p8{padding:8px;}
.p9{padding:9px;}
.p10{padding:10px;}
.p12{padding:12px;}
.p14{padding:14px;}
.p15{padding:15px;}
.p16{padding:16px;}
.p18{padding:18px;}
.p20{padding:20px;}
.p22{padding:22px;}
.p24{padding:24px;}
.p25{padding:25px;}
.p26{padding:26px;}
.p28{padding:28px;}
.p30{padding:30px;}
.p32{padding:32px;}
.p35{padding:35px;}
.p36{padding:36px;}
.p40{padding:40px;}
.p50{padding:50px;}
.p60{padding:60px;}
.p70{padding:70px;}
.p80{padding:80px;}
.p90{padding:90px;}
.p100{padding:100px;}
.pt1{padding-top:1px;}
.pt2{padding-top:2px;}
.pt3{padding-top:3px;}
.pt4{padding-top:4px;}
.pt5{padding-top:5px;}
.pt6{padding-top:6px;}
.pt7{padding-top:7px;}
.pt8{padding-top:8px;}
.pt9{padding-top:9px;}
.pt10{padding-top:10px;}
.pt12{padding-top:12px;}
.pt14{padding-top:14px;}
.pt15{padding-top:15px;}
.pt16{padding-top:16px;}
.pt18{padding-top:18px;}
.pt20{padding-top:20px;}
.pt22{padding-top:22px;}
.pt24{padding-top:24px;}
.pt25{padding-top:25px;}
.pt26{padding-top:26px;}
.pt28{padding-top:28px;}
.pt30{padding-top:30px;}
.pt32{padding-top:32px;}
.pt35{padding-top:35px;}
.pt36{padding-top:36px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt100{padding-top:100px;}
.pb1{padding-bottom:1px;}
.pb2{padding-bottom:2px;}
.pb3{padding-bottom:3px;}
.pb4{padding-bottom:4px;}
.pb5{padding-bottom:5px;}
.pb6{padding-bottom:6px;}
.pb7{padding-bottom:7px;}
.pb8{padding-bottom:8px;}
.pb9{padding-bottom:9px;}
.pb10{padding-bottom:10px;}
.pb12{padding-bottom:12px;}
.pb14{padding-bottom:14px;}
.pb15{padding-bottom:15px;}
.pb16{padding-bottom:16px;}
.pb18{padding-bottom:18px;}
.pb20{padding-bottom:20px;}
.pb22{padding-bottom:22px;}
.pb24{padding-bottom:24px;}
.pb25{padding-bottom:25px;}
.pb26{padding-bottom:26px;}
.pb28{padding-bottom:28px;}
.pb30{padding-bottom:30px;}
.pb32{padding-bottom:32px;}
.pb35{padding-bottom:35px;}
.pb36{padding-bottom:36px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}
.pb70{padding-bottom:70px;}
.pb80{padding-bottom:80px;}
.pb90{padding-bottom:90px;}
.pb100{padding-bottom:100px;}
.pl1{padding-left:1px;}
.pl2{padding-left:2px;}
.pl3{padding-left:3px;}
.pl4{padding-left:4px;}
.pl5{padding-left:5px;}
.pl6{padding-left:6px;}
.pl7{padding-left:7px;}
.pl8{padding-left:8px;}
.pl9{padding-left:9px;}
.pl10{padding-left:10px;}
.pl12{padding-left:12px;}
.pl14{padding-left:14px;}
.pl15{padding-left:15px;}
.pl16{padding-left:16px;}
.pl18{padding-left:18px;}
.pl20{padding-left:20px;}
.pl22{padding-left:22px;}
.pl24{padding-left:24px;}
.pl25{padding-left:25px;}
.pl26{padding-left:26px;}
.pl28{padding-left:28px;}
.pl30{padding-left:30px;}
.pl32{padding-left:32px;}
.pl35{padding-left:35px;}
.pl36{padding-left:36px;}
.pl40{padding-left:40px;}
.pl50{padding-left:50px;}
.pl60{padding-left:60px;}
.pl70{padding-left:70px;}
.pl80{padding-left:80px;}
.pl90{padding-left:90px;}
.pl100{padding-left:100px;}
.pr1{padding-right:1px;}
.pr2{padding-right:2px;}
.pr3{padding-right:3px;}
.pr4{padding-right:4px;}
.pr5{padding-right:5px;}
.pr6{padding-right:6px;}
.pr7{padding-right:7px;}
.pr8{padding-right:8px;}
.pr9{padding-right:9px;}
.pr10{padding-right:10px;}
.pr12{padding-right:12px;}
.pr14{padding-right:14px;}
.pr15{padding-right:15px;}
.pr16{padding-right:16px;}
.pr18{padding-right:18px;}
.pr20{padding-right:20px;}
.pr22{padding-right:22px;}
.pr24{padding-right:24px;}
.pr25{padding-right:25px;}
.pr26{padding-right:26px;}
.pr28{padding-right:28px;}
.pr30{padding-right:30px;}
.pr32{padding-right:32px;}
.pr35{padding-right:35px;}
.pr36{padding-right:36px;}
.pr40{padding-right:40px;}
.pr50{padding-right:50px;}
.pr60{padding-right:60px;}
.pr70{padding-right:70px;}
.pr80{padding-right:80px;}
.pr90{padding-right:90px;}
.pr100{padding-right:100px;}