CSS网页设计技巧十则
网站建设 2021-07-03 08:42www.dzhlxh.cn网站建设
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; /*www.jb51.net*/
}
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{...} /*www.jb51.net*/
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_www.jb51.net*/
margin:10px20px;/*top/bottomleft/right*/
margin:0;/*allsides*/
Forborder,ifyouonlyhavetosetmorethanonesidedifferentlythenusetwodeclarations.Thefirsttosetallsides,andthenasecondtochangethevaluesforoneoftheproperties.
/*1pxblueborderontheleftandbottom_www.jb51.net*/
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.
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; /*www.jb51.net*/
}
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{...} /*www.jb51.net*/
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_www.jb51.net*/
margin:10px20px;/*top/bottomleft/right*/
margin:0;/*allsides*/
Forborder,ifyouonlyhavetosetmorethanonesidedifferentlythenusetwodeclarations.Thefirsttosetallsides,andthenasecondtochangethevaluesforoneoftheproperties.
/*1pxblueborderontheleftandbottom_www.jb51.net*/
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.