《web标准与css基础》PPT课件.ppt

第6章Web标准与CSS基础,TeachingObjectives,通过本章学习，应该掌握以下内容：理解Web标准的含义掌握CSS的基本概念什么是XHTML理解表现和内容的分离掌握CSS选择符的声明方法CSS使用方式,Web2.0,自2005年以来，Web2.0的提出和应用给IT界带来了新的技术革新，越来越多的主流网站开始抛弃传统的基于Table的表格布局方法，转而采用基于Web标准的DIV+CSS的设计方法对网站进行重构,6.1Web标准,6.1.1Web标准6.1.2内容与表现的分离6.1.3布局思考方式,Web标准,什么是标准？Web标准，即网站标准目前所说的Web标准一般指网站建设采用基于XHTML语言的网站设计语言，Web标准中典型的应用模式是DIV+CSSWeb标准并不是某一个标准，而是由W3C和其他标准化组织制定的一套规范集合,Web标准（续）,内容与表现的分离,内容、结构和表现是一个网页必不可少的组成部分内容是页面传达信息的基础表现使得内容的传达变得更加明晰和方便结构是内容和表现之间的纽带,标准布局优势,文件下载与页面显示速度更快；内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）；内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等）用户能够通过样式选择定制自己的表现界面,6.2如何向标准过渡,6.2.1什么是XHTML6.2.2利用XHTML改善现有网站,XHTML,ExtensibleHyperTextMarkupLanguage的缩写XHTML是扮演着类似HTML角色的XML是一种过渡技术与HTML相比有以下特点解决了因HTML语言缺点所导致的严重制约XML是Web发展趋势，XHTML只要遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面XHTML非常严密，有助于读者改掉表现与数据混杂的习惯,Web标准设计规则,为页面添加正确的DOCTYPE浏览器根据DOCTYPE定义的DTD（文档类型定义）来解释页面代码初学者推荐使用XHTML1.0过渡式的DTD设定一个名字空间声明编码语言,Web标准设计规则（续）,用小写字母书写所有的标签所有XHTML元素和属性的名字都必须使用小写为图片添加alt属性alt属性指定了当图片不能显示的时候就显示供替换文本给所有属性值加引号在XHTML中，属性值必须被加引号关闭所有的标签每一个打开的标签都必须关闭空标签也要关闭，在标签尾部使用一个正斜杠/来关闭它们自己用id属性代替name属性在HTML里name属性不能被使用，应该用id来替换,6.3CSS及其选择符,CSS英文全称为CascadingStyleSheets，即层叠样式表CSS和HTML一样也是以代码的形式存在的本书将结合Dreamweaver辅助设计CSS，这也是作者推荐初学者学习CSS的方法6.3.1CSS样式面板6.3.2选择器6.3.3属性设置,CSS选择器,每个样式表都是由一系列规则组成，每条规则有两部分：选择器和声明每条声明又是属性和值的组合,标签选择器,标签选择器也称标记选择器HTML中所有标签都可以作为标签选择符标签选择器可以将HTML标签例如body、p、div等重新定义【6_4.html】,对应代码：bodybackground-image:url(img/bg2.jpg);background-repeat:no-repeat;pfont-family:楷体_GB2312;font-size:24px;color:#006600;,标签选择器,标签选择器也称标记选择器HTML中所有标签都可以作为标签选择符标签选择器可以将HTML标签例如body、p、div等重新定义【6_4.html】,对应代码：bodybackground-image:url(img/bg2.jpg);background-repeat:no-repeat;pfont-family:楷体_GB2312;font-size:24px;color:#006600;,类选择器,标签选择器一旦声明，页面中所有的相同标签都会相应地产生变化类选择器能够把相同的元素分类定义成不同的样式类选择器的名称可以由用户自定义，在定义类选择器时，名称前面需要加一个“.”点号如定义两个不同的类.right和.center，对实例中前2个p标签设置不同的class选择器【6_4.html】,对应代码：人一生的价值不是取决于他一生获得了多少而是取决于一生付出了多少而付出的多少取决于你在青春的努力。,类选择器,标签选择器一旦声明，页面中所有的相同标签都会相应地产生变化类选择器能够把相同的元素分类定义成不同的样式类选择器的名称可以由用户自定义，在定义类选择器时，名称前面需要加一个“.”点号如定义两个不同的类.right和.center，对实例中前2个p标签设置不同的class选择器【6_4.html】,对应代码：人一生的价值不是取决于他一生获得了多少而是取决于一生付出了多少而付出的多少取决于你在青春的努力。,类选择器,标签选择器一旦声明，页面中所有的相同标签都会相应地产生变化类选择器能够把相同的元素分类定义成不同的样式类选择器的名称可以由用户自定义，在定义类选择器时，名称前面需要加一个“.”点号如定义两个不同的类.right和.center，对实例中前2个p标签设置不同的class选择器【6_4.html】,对应代码：人一生的价值不是取决于他一生获得了多少而是取决于一生付出了多少而付出的多少取决于你在青春的努力。,类选择器,标签选择器一旦声明，页面中所有的相同标签都会相应地产生变化类选择器能够把相同的元素分类定义成不同的样式类选择器的名称可以由用户自定义，在定义类选择器时，名称前面需要加一个“.”点号如定义两个不同的类.right和.center，对实例中前2个p标签设置不同的class选择器【6_4.html】,对应代码：人一生的价值不是取决于他一生获得了多少而是取决于一生付出了多少而付出的多少取决于你在青春的努力。,ID选择器,ID选择器的使用方法和类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此只用来对单一元素定义单独的样式ID选择器使用时只需要将类选择器的class换成id即可每个标签均可以使用id=”的形式对id属性进行名称的指派【注意事项】在很多浏览器中ID选择器也可以同时用于多个标记，但为防止JavaScript在查找id时出错，建议一个id最多只能指派给一个标记在定义ID选择器时，要在ID名称前面加一个“#”号，但在使用时不需要添加“#”号如建立一个“#title”样式【6_4.html】,ID选择器,ID选择器的使用方法和类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此只用来对单一元素定义单独的样式ID选择器使用时只需要将类选择器的class换成id即可每个标签均可以使用id=”的形式对id属性进行名称的指派【注意事项】在很多浏览器中ID选择器也可以同时用于多个标记，但为防止JavaScript在查找id时出错，建议一个id最多只能指派给一个标记在定义ID选择器时，要在ID名称前面加一个“#”号，但在使用时不需要添加“#”号如建立一个“#title”样式【6_4.html】,添加代码：人生的价值,ID选择器,ID选择器的使用方法和类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此只用来对单一元素定义单独的样式ID选择器使用时只需要将类选择器的class换成id即可每个标签均可以使用id=”的形式对id属性进行名称的指派【注意事项】在很多浏览器中ID选择器也可以同时用于多个标记，但为防止JavaScript在查找id时出错，建议一个id最多只能指派给一个标记在定义ID选择器时，要在ID名称前面加一个“#”号，但在使用时不需要添加“#”号如建立一个“#title”样式【6_4.html】,添加代码：人生的价值,标签+id/class组合,当类选择器与ID选择器同时作用时，ID选择器的优先权要高于类选择器在使用标签选择符时，如果同时定义id或class选择符，则可以对标签选择符进行分类,标签+id/class组合,当类选择器与ID选择器同时作用时，ID选择器的优先权要高于类选择器在使用标签选择符时，如果同时定义id或class选择符，则可以对标签选择符进行分类,p.word1font-size:18px;color:#FC56A9;表示针对所有class为word1的p标签设置样式,标签+id/class组合,当类选择器与ID选择器同时作用时，ID选择器的优先权要高于类选择器在使用标签选择符时，如果同时定义id或class选择符，则可以对标签选择符进行分类,p.word1font-size:18px;color:#FC56A9;表示针对所有class为word1的p标签设置样式,ul#tabnavlist-style-type:none;padding-left:0px;表示针对所有id为tabnav的ul标签设置CSS样式,选择符集体声明,如果某些选择器的风格是完全或部分相同的，这时可以使用集体声明的方法，把相同属性和值的选择器组合起来同时声明选择器之间用逗号分开h1,h2,h3,h4,h5,h6color:#00FF00这里声明所有的标题元素的文字都为绿色,选择符集体声明,如果某些选择器的风格是完全或部分相同的，这时可以使用集体声明的方法，把相同属性和值的选择器组合起来同时声明选择器之间用逗号分开h1,h2,h3,h4,h5,h6color:#00FF00这里声明所有的标题元素的文字都为绿色,选择符集体声明,如果某些选择器的风格是完全或部分相同的，这时可以使用集体声明的方法，把相同属性和值的选择器组合起来同时声明选择器之间用逗号分开h1,h2,h3,h4,h5,h6color:#00FF00这里声明所有的标题元素的文字都为绿色,选择器的嵌套和继承,通过嵌套的方式进行组合使用选择器，可以更加精确地进行样式控制例：将a选择器放在p选择器中进行声明,选择器的嵌套和继承,通过嵌套的方式进行组合使用选择器，可以更加精确地进行样式控制例：将a选择器放在p选择器中进行声明,显示效果只适用于和之间的标记，而对其他的标记如【绚图】超链接标记并不产生任何效果【返回】超链接标记继承了包含它的父标记的风格居中显示，并在父标记样式风格的基础上做了调整,选择器的嵌套和继承,通过嵌套的方式进行组合使用选择器，可以更加精确地进行样式控制例：将a选择器放在p选择器中进行声明,显示效果只适用于和之间的标记，而对其他的标记如【绚图】超链接标记并不产生任何效果【返回】超链接标记继承了包含它的父标记的风格居中显示，并在父标记样式风格的基础上做了调整,ID和Class的嵌套,嵌套还可以在ID选择器和Class选择器之间发生表示id为top的标签下的所有class为main的标签的样式,CSS规则定义,类型背景区块方框边框列表定位扩展,6.4CSS使用方式,CSS按其使用位置的不同，主要分为3种类型行内样式表（InlineStyleSheet）内嵌样式表（IntenalStyleSheet）外部样式表（ExtenalStyleSheet）推荐使用链接的方式添加外部样式表当3种类型的样式同时定义时，行内样式的优先级最高，其次是采用标记的链接式，再次是位于和之间的内嵌式，最后才是import导入式,行内样式是定义在标签内，直接对HTML的标记使用style属性，然后将CSS代码写在其中，只对所在的标签有效例如，给一个图像添加模糊滤镜特效，代码如下：,6.4CSS使用方式,CSS按其使用位置的不同，主要分为3种类型行内样式表（InlineStyleSheet）内嵌样式表（IntenalStyleSheet）外部样式表（ExtenalStyleSheet）推荐使用链接的方式添加外部样式表当3种类型的样式同时定义时，行内样式的优先级最高，其次是采用标记的链接式，再次是位于和之间的内嵌式，最后才是import导入式,行内样式是定义在标签内，直接对HTML的标记使用style属性，然后将CSS代码写在其中，只对所在的标签有效例如，给一个图像添加模糊滤镜特效，代码如下：,内嵌样式表使用标签在head区域内定义样式，内部样式表只对所在的网页有效如代码：,6.4CSS使用方式,CSS按其使用位置的不同，主要分为3种类型行内样式表（InlineStyleSheet）内嵌样式表（IntenalStyleSheet）外部样式表（ExtenalStyleSheet）推荐使用链接的方式添加外部样式表当3种类型的样式同时定义时，行内样式的优先级最高，其次是采用标记的链接式，再次是位于和之间的内嵌式，最后才是import导入式,行内样式是定义在标签内，直接对HTML的标记使用style属性，然后将CSS代码写在其中，只对所在的标签有效例如，给一个图像添加模糊滤镜特效，代码如下：,内嵌样式表使用标签在head区域内定义样式，内部样式表只对所在的网页有效如代码：,外部样式表将CSS写成一个文件，在HTML文档头中通过链接或导入的方式引用该文件进行样式控制，且同一个CSS文件可被不同的HTML所链接使用调用外部样式表一般是在标签内使用标签将样式表文件链接到HTML文件内如或单击【CSS样式】面板下方的【附加样式表按钮】,