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