CSS网页的设计技巧

CSS是网页设计师的基础，只有对css足够了解才能设计出美观的网页，为了以后我们可以更好的发展因此我们就要记住常用的css技巧，今天小编在这里为大家详细介绍CSS网页的设计技巧。

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.aizhan.com*/
}
　　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.aizhan.com*/
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.aizhan.com*/
margin:10px20px;/*top/bottomleft/right*/
margin:0;/*allsides*/
　　Forborder,ifyouonlyhavetosetmorethanonesidedifferentlythenusetwodeclarations.Thefirsttosetallsides,andthenasecondtochangethevaluesforoneoftheproperties.
/*1pxblueborderontheleftandbottom_www.aizhan.com*/
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.

以上就是小编介绍的CSS网页的设计技巧，如果你想设计出独一无二脱颖而出的网页你必须得好好注意啦！

原文链接:https://js.aizhan.com/web_authoring/css/6985.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有