给大家带来CSS划定规矩的布局和Grouping、class和id
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。2.1划定规矩的布局<rules>::=<selector><左括号><declarations><右括号><declarations>::=<declaration>{<SEMICOLON><declaration>}<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,例子:/*group1*/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给告诫信息的部分加上标志。
样式的调整更加方便。内容和样式的分离,使页面和样式的调整变得更加方便。 HTML技术的不断发展和完善,随之而产生了众多网页编辑器,从网页编辑器基本性质可以分为所见即所得网页编辑器和非所见即所得网页编辑器(则原始代码编辑器) 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 学Dreamweaver技术的过程其实是一个增加信心的过程。 经过两天的学习,总算对Dreamweaver有进一步的了解了,心中不免有些激动。今天和其他几位老师交流了一下,感觉受益匪浅. 以上大概就是文字图片的一些链接方法,通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识,他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起,其功能强大,使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 只要我们努力,无论是怎样的艰难险阻,成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 所见则所得网页编辑器的优点就是直观性,使用方便,容易上手. Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。
页:
[1]