CSS网页设计技巧十则

WEBJX.COM不要说你看不懂，只是你不愿意看。）
　　IthoughtI'dsharesomeofmyhabitswhenitestodogCSSworkandletmewarnyou,someofwhatIhavetosayisprobablyalittlecontroversial.Butwhat'slifewithoutlivgitontheedge.(Yeah,IliveanexcitglifewhenCSSisconsidered'theedge'.)
pxforfontsizes-用px作为字体大小的单位
　　Sacrilege,Iknow.ThereareperfectlygoodwaystogetconsistentfontsizgandIreallyshouldusethembutInterExploreristheonlybrowserthatIcanthkofthatdoesn'tresizetext.IfthemajorityofyouraudienceusesIE,thenbenicetothemanddon'tusepixels.Otherwise,IfigurewithIE7supportgit,pixelsarethenewems.
　　Whenusgpixelsizes,Ialsogettobespargmyusage.Ispecifyitonthebodyandanyheadersthatneedit.Inheritanceislessofanissue(howmanysiteshaveyouseenlistitemsexplicablysmallerthantherestofthecontentlikeitwaslessimportant).
CSSdeclarationsononele-CSS声明写在一行
　　I'vealwaysputmyentiredeclarationononele.Here'sanexampletoexplawhatImean:
h2{font-size:18px;border:1pxsolidblue;color:#000;background-color:#FFF;}
h2{
font-size:18px;
border:1pxsolidblue;
color:#000;
background-color:#FFF;　/.jb51./
}
　　Thesecondonemaylookprettierbutitsuredoesn'thelpmefdanythg.Whenlookgforsomethgastylesheet,themostimportantthgistheruleset(that'sthepartbeforethe{and}).I'mlookgforanelement,anidoraclass.Havgeverythgononelemakesscanngthedocumentmuchquickerasyousimplyseemoreonapage.OnceI'vefoundtherulesetIwaslookgfor,fdthepropertyIwantisusuallystraightforwardenoughastherearerarelythatmany.
BlockgtheStyles-代码分块
　　Ibreakdownmystylesheettothreeseparateblocks.Thefirstisstraightelementdeclarations.Changethebody,somelksstyles,someheaderstyles,resetmargsandpaddgonforms,andsoon.ThisisusuallyasmallblockasIonlyliketoredefewhatIneedto.Noglobalmargandpaddgresetforme.Iclearthebodyandformandmaybeadjustparagraphifthedesignreallyneedsit.Otherwise,letthebrowserhandleit.Ifdthemoreyoutrytooverridewhatthebrowserdoes,themorestylesyouhaveut,whichsimplyaddstothetimetotrackdownbugsandmatathecode.
　　Afterelementdeclarations,Ihavemyclassdeclarations;thgslikeclassesforanerrormessageoracalloutwouldgohear.Iusuallyonlyhaveacoupleofthese.
　　Fally,themeat.Istartbydeclargmymacontaersandthenanystylesforelementswiththosecontaersaredented.Ataquickglance,Icanseehowmypageisbrokendownandmakesiteasiertoknowwheretolookforthgs.I'llalsodeclarecontaerseveniftheydon'thaveanyrules.
#content{float:left;}
#contentp{...}
#sidebar{float:left;}
#sidebarp{...}
#footer{clear:both;}
#sidebarp{...}　/.jb51./
BrowserSupport-浏览器兼容
　　Supportonlythelatestbrowsers.ThatmeansdroppgsupportforIE5andIE5.5.Lotsoftimeandefforttobesavedhere.NoboxmodelhacksneededforIE6.Infact,supportgjustthemostrecentversionsofbrowsers,Iendupusgveryfewhacks.AlongwithusgveryfewhacksmeansIcanavoidshovellgdifferentstylesheetstoseparatebrowsers.Ihaveonesheet,andthat'sit.AnyhacksIdousearenormallymentedassuch.Similartotheuseofpixelmeasurements,youhavetoconsideryouraudiencebeforedroppgbrowsersupport.
　　ThebiggestthgformeisstilltriggerghasLayoutIEtodofloatcontamentandI'vebeenusgzoom:1forthat.Ilikeitbecauseit'snocuousandshouldn'tmesswithanythgelse.
ContagFloats-“包含”式浮动
　　Ijusttouchedonfloatcontamentsolet'sexpandonthat.Mycurrentapproachtocontagfloatsisusgoverflow:hidden(withpossiblyzoom:1forInterExplorer).Nocleargdivoruseof:after.Onlyworryaboutcontagyourfloatsifyouhaveabackgroundyouaretrygtosetonyourcontaer.Theoverflowshouldbesetonthecontaer.
　　Keepmdthatthecontentwiththecontaershouldbedesignedtostaywiththecontaer.Anythgtoobigandit'llgetclipped.Shiftgthgsusgnegativemargsoutsidethecontaerwillalsogetclipped.
UnderstandOverflow-理解与使用溢出
　　OverflowisusuallywherepeoplegetbitbyIE.Ifyou'vegottwofloatedelementsandthecontentfromtheleftcontaeroverflowsthen,IE,thecontaergrowsandevitablypushestherightcontaerbelowit.Thisisusuallyasignthatyou'vemessedupyourmargs,widths,orpaddgononeofthesecontaersbutFirefox(etal)won'trevealthis.Usgsomethglikeoverflow:hiddenoroverflow:scrollonacontaercanhelppreventIEfromallowgthecontentushthewidthofthecontaerbutyou'rebetterofftrygtofixtheissuethedesign.
AllowBlockElementstoFillTheirSpaceNaturally-允许块元素的空白
　　Myruleofthumbis,ifIsetawidth,Idon'tsetmargorpaddg.Likewise,ifI'msettgamargorpaddg,Idon'tsetawidth.Dealgwiththeboxmodelcanbesuchapa,especiallyifyou'redealgwithpercentages.Therefore,Isetthewidthonthecontaersandthensetmargandpaddgontheelementswiththem.Everythgusuallyturnsoutswimmgly.
UseCSSShorthand-使用CSS属性缩写
　　ThismightseemlikebeatgadeadhorsebutIstillseepeopledogreallyverbosestatementswherethey'resettgmarg-,marg-right,marg-bottomandmarg-left.Mygeneralruleofthumbis,youcanusethelongformonlyifyou'resettgoneside.Onceyouhavetosetmorethanoneside,it'lltakelessbytestouseshorthand.
　　Inshorthand,rememberthatthepropertiesstartattheandworkclockwise.marg:rightbottomleft;It'salsohandytoknowtheshorterformsifyouhaveequalvaluesforandbottomorleftandright.
marg:5px10px20px;/left/rightbottom_.jb51./
marg:10px20px;//bottomleft/right/
marg:0;/allsides/
　　Forborder,ifyouonlyhavetosetmorethanonesidedifferentlythenusetwodeclarations.Thefirsttosetallsides,andthenasecondtochangethevaluesforoneoftheproperties.
/1pxblueborderontheleftandbottom_.jb51./
border:1pxsolidblue;border-width:001px1px;
AvoidUnnecessarySelectors-避免多余的选择器
　　Justspecifythemimumnumberofselectorsnecessaryforthestyle.Ifyoufdyourselfdogulli{...}ortabletrtd{...}thenyou'rebegmoreverbosethanyouneed.LI'swillevitablybeUL's(okay,IsupposetheycouldfdthemselvesOL's,whichcase,bemorespecificforthosestyles)andaTDwillevitablybeaTRandaTABLE.
　　OrputtgtheelementnamefrontofanIDselector(Example:div#navigation).Iusedtodothisbecauseit'dhelpme"remember"whichelementtheIDison.Asitturnsout,Itendtousesimilarclassnamesfromprojectrojectandtheyevitablyappearonthesameelements.Ialsotendtojustdoasearchtofdwheresomethgis.So,thesedays,Ijustleaveitat#navigation.
　　Usglessselectorswillmeanlessselectorswillbeneededtooverrideanyparticularstyle—thatmeansit'seasiertotroubleshoot.
KeepitSimple-保持简洁
　　Ifithasn'tbeenevidentthroughoutthispost,onlyaddwhenyouneedto,andthatcludeshacks.Noneedtogetanymoreplicatedthanyouneedto.
　　Now,I'dlovetohearsomeofyourtips.