CSS网页设计技巧十则

前端  /  管理员 发布于 7年前   242

WEBJX.COM：不要说你看不懂，只是你不愿意看。：）
　　IthoughtI'dsharesomeofmyhabitswhenitcomestodoingCSSworkandletmewarnyou,someofwhatIhavetosayisprobablyalittlecontroversial.Butwhat'slifewithoutlivingitontheedge.(Yeah,IliveanexcitinglifewhenCSSisconsidered'theedge'.)
pxforfontsizes-用px作为字体大小的单位
　　Sacrilege,Iknow.ThereareperfectlygoodwaystogetconsistentfontsizingandIreallyshouldusethembutInternetExploreristheonlybrowserthatIcanthinkofthatdoesn'tresizetext.IfthemajorityofyouraudienceusesIE,thenbenicetothemanddon'tusepixels.Otherwise,IfigurewithIE7supportingit,pixelsarethenewems.
　　Whenusingpixelsizes,Ialsogettobesparinginmyusage.Ispecifyitonthebodyandanyheadersthatneedit.Inheritanceislessofanissue(howmanysiteshaveyouseenlistitemsinexplicablysmallerthantherestofthecontentlikeitwaslessimportant).
CSSdeclarationsononeline-CSS声明写在一行
　　I'vealwaysputmyentiredeclarationononeline.Here'sanexampletoexplainwhatImean:
h2{font-size:18px;border:1pxsolidblue;color:#000;background-color:#FFF;}
h2{
font-size:18px;
border:1pxsolidblue;
color:#000;
background-color:#FFF;　/**/
}
　　Thesecondonemaylookprettierbutitsuredoesn'thelpmefindanything.Whenlookingforsomethinginastylesheet,themostimportantthingistheruleset(that'sthepartbeforethe{and}).I'mlookingforanelement,anidoraclass.Havingeverythingononelinemakesscanningthedocumentmuchquickerasyousimplyseemoreonapage.OnceI'vefoundtherulesetIwaslookingfor,findthepropertyIwantisusuallystraightforwardenoughastherearerarelythatmany.
BlockingtheStyles-代码分块
　　Ibreakdownmystylesheetintothreeseparateblocks.Thefirstisstraightelementdeclarations.Changethebody,somelinksstyles,someheaderstyles,resetmarginsandpaddingonforms,andsoon.ThisisusuallyasmallblockasIonlyliketoredefinewhatIneedto.Noglobalmarginandpaddingresetforme.Iclearthebodyandformandmaybeadjustparagraphifthedesignreallyneedsit.Otherwise,letthebrowserhandleit.Ifindthemoreyoutrytooverridewhatthebrowserdoes,themorestylesyouhavetoputin,whichsimplyaddstothetimetotrackdownbugsandmaintainthecode.
　　Afterelementdeclarations,Ihavemyclassdeclarations;thingslikeclassesforanerrormessageoracalloutwouldgohear.Iusuallyonlyhaveacoupleofthese.
　　Finally,themeat.Istartbydeclaringmymaincontainersandthenanystylesforelementswithinthosecontainersareindented.Ataquickglance,Icanseehowmypageisbrokendownandmakesiteasiertoknowwheretolookforthings.I'llalsodeclarecontainerseveniftheydon'thaveanyrules.
#content{float:left;}
#contentp{...}
#sidebar{float:left;}
#sidebarp{...}
#footer{clear:both;}
#sidebarp{...}　/**/
BrowserSupport-浏览器兼容
　　Supportonlythelatestbrowsers.ThatmeansdroppingsupportforIE5andIE5.5.Lotsoftimeandefforttobesavedhere.NoboxmodelhacksneededforIE6.Infact,insupportingjustthemostrecentversionsofbrowsers,Iendupusingveryfewhacks.AlongwithusingveryfewhacksmeansIcanavoidshovellingdifferentstylesheetstoseparatebrowsers.Ihaveonesheet,andthat'sit.AnyhacksIdousearenormallycommentedassuch.Similartotheuseofpixelmeasurements,youhavetoconsideryouraudiencebeforedroppingbrowsersupport.
　　ThebiggestthingformeisstilltriggeringhasLayoutinIEtodofloatcontainmentandI'vebeenusingzoom:1forthat.Ilikeitbecauseit'sinnocuousandshouldn'tmesswithanythingelse.
ContainingFloats-“包含”式浮动
　　Ijusttouchedonfloatcontainmentsolet'sexpandonthat.Mycurrentapproachtocontainingfloatsisusingoverflow:hidden(withpossiblyzoom:1forInternetExplorer).Noclearingdivoruseof:after.Onlyworryaboutcontainingyourfloatsifyouhaveabackgroundyouaretryingtosetonyourcontainer.Theoverflowshouldbesetonthecontainer.
　　Keepinmindthatthecontentwithinthecontainershouldbedesignedtostaywithinthecontainer.Anythingtoobigandit'llgetclipped.Shiftingthingsusingnegativemarginsoutsidethecontainerwillalsogetclipped.
UnderstandOverflow-理解与使用溢出
　　OverflowisusuallywherepeoplegetbitbyIE.Ifyou'vegottwofloatedelementsandthecontentfromtheleftcontaineroverflowsthen,inIE,thecontainergrowsandinevitablypushestherightcontainerbelowit.Thisisusuallyasignthatyou'vemessedupyourmargins,widths,orpaddingononeofthesecontainersbutFirefox(etal)won'trevealthis.Usingsomethinglikeoverflow:hiddenoroverflow:scrollonacontainercanhelppreventIEfromallowingthecontenttopushthewidthofthecontainerbutyou'rebetterofftryingtofixtheissueinthedesign.
AllowBlockElementstoFillTheirSpaceNaturally-允许块元素的空白
　　Myruleofthumbis,ifIsetawidth,Idon'tsetmarginorpadding.Likewise,ifI'msettingamarginorpadding,Idon'tsetawidth.Dealingwiththeboxmodelcanbesuchapain,especiallyifyou'redealingwithpercentages.Therefore,Isetthewidthonthecontainersandthensetmarginandpaddingontheelementswithinthem.Everythingusuallyturnsoutswimmingly.
UseCSSShorthand-使用CSS属性缩写
　　ThismightseemlikebeatingadeadhorsebutIstillseepeopledoingreallyverbosestatementswherethey'resettingmargin-top,margin-right,margin-bottomandmargin-left.Mygeneralruleofthumbis,youcanusethelongformonlyifyou'resettingoneside.Onceyouhavetosetmorethanoneside,it'lltakelessbytestouseshorthand.
　　Inshorthand,rememberthatthepropertiesstartatthetopandworkclockwise.margin:toprightbottomleft;It'salsohandytoknowtheshorterformsifyouhaveequalvaluesfortopandbottomorleftandright.
margin:5px10px20px;/*topleft/rightbottom_*/
margin:10px20px;/*top/bottomleft/right*/
margin:0;/*allsides*/
　　Forborder,ifyouonlyhavetosetmorethanonesidedifferentlythenusetwodeclarations.Thefirsttosetallsides,andthenasecondtochangethevaluesforoneoftheproperties.
/*1pxblueborderontheleftandbottom_*/
border:1pxsolidblue;border-width:001px1px;
AvoidUnnecessarySelectors-避免多余的选择器
　　Justspecifytheminimumnumberofselectorsnecessaryforthestyle.Ifyoufindyourselfdoingulli{...}ortabletrtd{...}thenyou'rebeingmoreverbosethanyouneed.LI'swillinevitablybeinUL's(okay,IsupposetheycouldfindthemselvesinOL's,inwhichcase,bemorespecificforthosestyles)andaTDwillinevitablybeinaTRandaTABLE.
　　OrputtingtheelementnameinfrontofanIDselector(Example:div#navigation).Iusedtodothisbecauseit'dhelpme"remember"whichelementtheIDison.Asitturnsout,Itendtousesimilarclassnamesfromprojecttoprojectandtheyinevitablyappearonthesameelements.Ialsotendtojustdoasearchtofindwheresomethingis.So,thesedays,Ijustleaveitat#navigation.
　　Usinglessselectorswillmeanlessselectorswillbeneededtooverrideanyparticularstyle—thatmeansit'seasiertotroubleshoot.
KeepitSimple-保持简洁
　　Ifithasn'tbeenevidentthroughoutthispost,onlyaddwhenyouneedto,andthatincludeshacks.Noneedtogetanymorecomplicatedthanyouneedto.
　　Now,I'dlovetohearsomeofyourtips.