|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。
2.1划定规矩的布局<rules>::=<selector><左括号><declarations><右括号><declarations>::=<declaration>{<SEMICOLON><declaration>}[SEMICOLON]<SEMICOLON>::=分号<declaration>::=<property><COLON><value><COLON>::=冒号<value>::=<keywordlist><keywordlist>::=<keyword>{<SPACE><keyword>}<SPACE>::=空格一般会用空格做为value之间的分开符,有个破例:Asweveseen,CSSkeywordsareseparatedbyspaces—exceptinoneinstance.IntheCSSpropertyfont,thereisexactlyoneplacewhereaforward-slash(/)canbeusedtoseparatetwospecifickeywords.Heresanexample:h2{font:large/150%sans-serif;}Theslashseparatesthekeywordsthatsettheelementsfontsizeandlineheight.Thisistheonlyplacetheslashisallowedtoappearinthefontdeclaration.Alloftheotherkeywordsallowedforfontareseparatedbyspaces.2.1.1selectorselector:defineswhichpieceofthedocumentwillbeaffected.Selector一般是html元素,也多是xml中同意任何元素。2.1.2DeclarationsandKeywords2.2Grouping2.2.1groupingselectors将多个元素共用一个style,例子:h1{color:silver;background:white;}h2{color:silver;background:gray;}h3{color:white;background:gray;}h4{color:silver;background:white;}b{color:gray;background:white;}/*group2*/h1,h2,h4{color:silver;}h2,h3{background:gray;}h1,h4,b{background:white;}h3{color:white;}b{color:gray;}/*group3*/h1,h4{color:silver;background:white;}h2{color:silver;}h3{color:white;}h2,h3{background:gray;}b{color:gray;background:white;}2.2.1.1Theuniversalselector*{color:red;}2.2.2groupingdeclarations例子:h1{font:18pxHelvetica;}h1{color:purple;}h1{background:aqua;}h1{font:18pxHelvetica;color:purple;background:aqua;}Ifthesecondsemicolonisomitted,however,theuseragentwillinterpretthestylesheetasfollows:h1{font:18pxHelvetica;color:purplebackground:aqua;}Sincebackground:isnotavalidvalueforcolor,andalsosincecolorcanbegivenonlyonekeyword,auseragentwillignorethecolordeclaration(includingthebackground:aquapart)entirely.Itmightrenderh1saspurpletextwithoutanaquabackground,butmorelikely,youwontevengetpurpleh1s.Instead,theyllbethedefaultcolor(usuallyblack)withnobackgroundatall.(Thedeclarationfont:18pxHelveticawillstilltakeeffectsinceitwascorrectlyterminatedwithasemicolon.)2.2.3GroupingEverything就是同时groupselector和declarationh1,h2,h3,h4,h5,h6{color:gray;background:white;padding:0.5em;border:1pxsolidblack;}Youvegroupedtheselectors,sothestylesontherightsideoftherulewillbeappliedtoalltheheadingslisted,andgroupingthedeclarationsmeansthatallofthelistedstyleswillbeappliedtotheselectorsontheleftsideoftherule.2.3classandidselectors最复杂的selector是只针对文档元素的elementselecoter,另有两种selecotrs:classselectors和idselectors。这两种selector能够自力于文档元素的,即不是于详细某个的文档元素间接联系关系的。这两种selecoter能够独自利用,也能够和elementselector一同利用。可是这两种selector的利用必要共同文档编写的标准性。好比写一个会商plutonium处置体例的文档,文档由良多段构成,包括良多告诫信息,但愿将告诫的字体置为bold,以凸起显现。可是这些告诫信息的格局良多,一段笔墨,列表式,一大节文本等。以是不克不及经由过程p{font-weight:bold;}的情势来界说。如许没法从满是文本的全部文档中找到告诫信息,并加粗。因而,办理体例:利用classselectors给告诫信息的部分加上标志。
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。 |
|