首页 > 代码库 > base.css

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

base.css