给大家带来CSS网页计划技能十则

在几乎所有的浏览器上都可以使用。15.以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
WEBJX.COM：不要说你看不懂，只是你不肯意看。：）

　　IthoughtIdsharesomeofmyhabitswhenitcomestodoingCSSworkandletmewarnyou,someofwhatIhavetosayisprobablyalittlecontroversial.Butwhatslifewithoutlivingitontheedge.(Yeah,IliveanexcitinglifewhenCSSisconsideredtheedge.)

pxforfontsizes-用px作为字体巨细的单元

　　Sacrilege,Iknow.ThereareperfectlygoodwaystogetconsistentfontsizingandIreallyshouldusethembutInternetExploreristheonlybrowserthatIcanthinkofthatdoesntresizetext.IfthemajorityofyouraudienceusesIE,thenbenicetothemanddontusepixels.Otherwise,IfigurewithIE7supportingit,pixelsarethenewems.

　　Whenusingpixelsizes,Ialsogettobesparinginmyusage.Ispecifyitonthebodyandanyheadersthatneedit.Inheritanceislessofanissue(howmanysiteshaveyouseenlistitemsinexplicablysmallerthantherestofthecontentlikeitwaslessimportant).

CSSdeclarationsononeline-CSS声明写在一行

　　Ivealwaysputmyentiredeclarationononeline.HeresanexampletoexplainwhatImean:

h2{font-size:18px;border:1pxsolidblue;color:#000;background-color:#FFF;}

h2{
font-size:18px;
border:1pxsolidblue;
color:#000;
background-color:#FFF;　/*www.poluoluo.com*/
}
　　Thesecondonemaylookprettierbutitsuredoesnthelpmefindanything.Whenlookingforsomethinginastylesheet,themostimportantthingistheruleset(thatsthepartbeforethe{and}).Imlookingforanelement,anidoraclass.Havingeverythingononelinemakesscanningthedocumentmuchquickerasyousimplyseemoreonapage.OnceIvefoundtherulesetIwaslookingfor,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.Illalsodeclarecontainerseveniftheydonthaveanyrules.

#content{float:left;}
#contentp{...}

#sidebar{float:left;}
#sidebarp{...}

#footer{clear:both;}
#sidebarp{...}　/*www.poluoluo.com*/
BrowserSupport-扫瞄器兼容

　　Supportonlythelatestbrowsers.ThatmeansdroppingsupportforIE5andIE5.5.Lotsoftimeandefforttobesavedhere.NoboxmodelhacksneededforIE6.Infact,insupportingjustthemostrecentversionsofbrowsers,Iendupusingveryfewhacks.AlongwithusingveryfewhacksmeansIcanavoidshovellingdifferentstylesheetstoseparatebrowsers.Ihaveonesheet,andthatsit.AnyhacksIdousearenormallycommentedassuch.Similartotheuseofpixelmeasurements,youhavetoconsideryouraudiencebeforedroppingbrowsersupport.

　　ThebiggestthingformeisstilltriggeringhasLayoutinIEtodofloatcontainmentandIvebeenusingzoom:1forthat.Ilikeitbecauseitsinnocuousandshouldntmesswithanythingelse.

ContainingFloats-“包括”式浮动

　　Ijusttouchedonfloatcontainmentsoletsexpandonthat.Mycurrentapproachtocontainingfloatsisusingoverflow:hidden(withpossiblyzoom:1forInternetExplorer).Noclearingdivoruseof:after.Onlyworryaboutcontainingyourfloatsifyouhaveabackgroundyouaretryingtosetonyourcontainer.Theoverflowshouldbesetonthecontainer.

　　Keepinmindthatthecontentwithinthecontainershouldbedesignedtostaywithinthecontainer.Anythingtoobiganditllgetclipped.Shiftingthingsusingnegativemarginsoutsidethecontainerwillalsogetclipped.

UnderstandOverflow-了解与利用溢出

　　OverflowisusuallywherepeoplegetbitbyIE.Ifyouvegottwofloatedelementsandthecontentfromtheleftcontaineroverflowsthen,inIE,thecontainergrowsandinevitablypushestherightcontainerbelowit.Thisisusuallyasignthatyouvemessedupyourmargins,widths,orpaddingononeofthesecontainersbutFirefox(etal)wontrevealthis.Usingsomethinglikeoverflow:hiddenoroverflow:scrollonacontainercanhelppreventIEfromallowingthecontenttopushthewidthofthecontainerbutyourebetterofftryingtofixtheissueinthedesign.

AllowBlockElementstoFillTheirSpaceNaturally-同意块元素的空缺

　　Myruleofthumbis,ifIsetawidth,Idontsetmarginorpadding.Likewise,ifImsettingamarginorpadding,Idontsetawidth.Dealingwiththeboxmodelcanbesuchapain,especiallyifyouredealingwithpercentages.Therefore,Isetthewidthonthecontainersandthensetmarginandpaddingontheelementswithinthem.Everythingusuallyturnsoutswimmingly.

UseCSSShorthand-利用CSS属性缩写

　　ThismightseemlikebeatingadeadhorsebutIstillseepeopledoingreallyverbosestatementswheretheyresettingmargin-top,margin-right,margin-bottomandmargin-left.Mygeneralruleofthumbis,youcanusethelongformonlyifyouresettingoneside.Onceyouhavetosetmorethanoneside,itlltakelessbytestouseshorthand.

　　Inshorthand,rememberthatthepropertiesstartatthetopandworkclockwise.margin:toprightbottomleft;Itsalsohandytoknowtheshorterformsifyouhaveequalvaluesfortopandbottomorleftandright.

margin:5px10px20px;/*topleft/rightbottom_www.poluoluo.com*/
margin:10px20px;/*top/bottomleft/right*/
margin:0;/*allsides*/
　　Forborder,ifyouonlyhavetosetmorethanonesidedifferentlythenusetwodeclarations.Thefirsttosetallsides,andthenasecondtochangethevaluesforoneoftheproperties.

/*1pxblueborderontheleftandbottom_www.poluoluo.com*/
border:1pxsolidblue;border-width:001px1px;
AvoidUnnecessarySelectors-制止过剩的选择器
　　Justspecifytheminimumnumberofselectorsnecessaryforthestyle.Ifyoufindyourselfdoingulli{...}ortabletrtd{...}thenyourebeingmoreverbosethanyouneed.LIswillinevitablybeinULs(okay,IsupposetheycouldfindthemselvesinOLs,inwhichcase,bemorespecificforthosestyles)andaTDwillinevitablybeinaTRandaTABLE.

　　OrputtingtheelementnameinfrontofanIDselector(Example:div#navigation).Iusedtodothisbecauseitdhelpme"remember"whichelementtheIDison.Asitturnsout,Itendtousesimilarclassnamesfromprojecttoprojectandtheyinevitablyappearonthesameelements.Ialsotendtojustdoasearchtofindwheresomethingis.So,thesedays,Ijustleaveitat#navigation.

　　Usinglessselectorswillmeanlessselectorswillbeneededtooverrideanyparticularstyle—thatmeansitseasiertotroubleshoot.

KeepitSimple-坚持简便

　　Ifithasntbeenevidentthroughoutthispost,onlyaddwhenyouneedto,andthatincludeshacks.Noneedtogetanymorecomplicatedthanyouneedto.

　　Now,Idlovetohearsomeofyourtips.
你用什么用的熟练就用什么，讲究的是效率，客户永远不管你用什么，页面就要好看，功能就要好用，还有时间和成本的问题。

以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。