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;}