•前面章节介绍了文本、图像、表格等基本网页元素及其对应的HTML标签的语法。对于网页设计者来说,仅学会这些是不够的。在Web2.0标准中,HTML语言只用于定义网页的结构。要制作出漂亮且符合规范的网页,还需要使用CSS样式来设置网页元素的属性。由CSS样式设计的网页,具有条理规范、布局统一、容易维护等优点。第9章CSS样式表学习目标了解CSS样式的作用及其类型。掌握创建和设置CSS样式的方法。掌握附加样式表的方法。掌握使用CSS样式控制网页外观的基本方法。9.1认识CSS样式CSS(CascadingStyleSheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。通过使用CSS样式设置页面的格式,可将页面的内容与表现形式分离。页面内容存放在HTML文档中,用于定义表现形式的CSS规则存放在另一个文件中或HTML文档的某一部分,通常为文件头部分。将内容与表现形式分离,不仅可使维护站点的外观更加容易,而且还可以使HTML文档代码更加简练,这样将缩短浏览器的加载时间。9.1认识CSS样式在使用了CSS样式的网页文档的源代码中,“”中间存放的是控制文档外观的CSS代码,位于文档的文件头部分,“…”中间是网页文档的内容。9.1认识CSS样式可以更加灵活地控制网页中文本的字体、颜色、大小、间距、风格及位置。可以灵活地为网页中的元素设置各种效果的边框。可以方便地为网页中的元素设置不同的背景颜色、背景图片及平铺方式。可以更加精确地控制网页中各元素的位置,使元素在网页中浮动。•可以为网页中的元素设置各种滤镜,从而产生诸如阴影、辉光、模糊和透明等只有在一些图像处理软件中才能实现的效果。可以与脚本语言相结合,使网页中的元素产生各种动态效果。CSS样式可以实现的功能。9.2【CSS样式】面板在DreamweaverCS3中,【CSS样式】面板是新建、编辑、管理CSS样式的主要工具。在打开文档窗口的情况下,选择【窗口】/【CSS样式】命令可以打开或关闭【CSS样式】面板。9.3CSS样式的类型和规则CSS样式的类型CSS样式的规则9.3.1CSS样式的类型根据选择器类型的不同,CSS样式通常划分为以下3类。(1)【类(可应用于任何标签)】利用该类选择器可创建自定义名称的CSS样式,能够应用在网页中的任何标签上。
在网页文档中可以使用class属性引用“pstyle”类。…9.3.2CSS样式的类型(2)【标签(重新定义特定标签的外观)】利用该类选择器可对HTML标签进行重新定义、规范或者扩展其属性。9.3.3CSS样式的类型(3)【高级(ID、伪类选择器等)】利用该类选择器会对标签组合(如“tdh2”表示所有在表格单元中出现“h2”的标题)或者是含有特定ID属性的标签(如“#myStyle”表示所有属性值中有“ID="myStyle"”的标签)应用样式。而“#myStyle1a:visited,#myStyle2a:link,#myStyle3…”表示可以一次性定义相同属性的多个CSS样式。其中,ID属性用于定义一个元素的独特的样式,如以下CSS规则可以通过ID属性应用到HTML中:…9.3.2CSS样式的规则样式表是由样式规则组成的,每个CSS样式规则由两部分组成:选择器和声明。选择器是标识已设置格式元素的术语,如body、p、类名称或ID;而声明则用于定义样式属性,大多数情况下为包含多个声明的代码块。即通过很多属性来定义一个元素,每个属性带一个值,共同描述选择器应该如何呈现。样式规则组成如下:选择器{属性:值}单一选择器的复合样式声明应该用分号隔开:选择器{属性1:值1;属性2:值2}9.3.2CSS样式的规则以下是一段定义“h2”元素的字体、大小、颜色和对齐方式等属性的CSS样式代码:无标题文档9.3.2CSS样式的规则其中...