当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS网页设计技巧十则

CSS样式表
CSS网页布局
知道吗？H1标签同样也可以美化
CSS:用overflow代替left截取指定长度字符串
学习CSS了解单位em和px的区别
巧用CSS滤镜制作绚丽图片播放效果
PDF、ZIP、DOC链接的标注(CSS技巧)
DIV CSS制作网页时易犯的错误总结
CSS隐藏网页文字的几种常用方法
总结新手学CSS容易出现错误的内容
网站配色,CSS主色调配色方案
我们需要对CSS进行缩写的原因
从三方面加速CSS样式作用网页速度
CSS属性选择器的四种格式
CSS教程:text-indent隐藏文字出现虚线框outline
表单name与id的区别和相似之处
CSS让网页里的提交按钮变得更漂亮
小技巧:网页制作中段落缩进的方法
网页导航上用CSS标志当前页效果
CSS框架的利与弊（上）
Web标准:关于DOCTYPE

No. « 7 8 9 10 »

技术文章搜索

关键字

CSS样式表 中的 CSS网页设计技巧十则

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-09-11   浏览: 64 ::
收藏到网摘: n/a

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