1、第17章 使用样式表,使用样式表，不但可以定义文本等内容的格式，同时也可以对页面进行布局。在W3C发布的Web标准中，推荐使用CSS进行布局代替传统的表格布局。,17.1 样式表简介,本节主要讲解下样式表的基础知识。其中包括样式表的概念、样式表的作用、以及Web标准的基础知识。,17.1.1 样式表的概念,级联样式表又称为CSS，是Cascading Style Sheet的缩写，通常也简称为样式表。是W3C组织制定的，用于控制网页样式的一种标记性语言。包括CSS1和CSS2两个部分。其中CSS2是1998年5月发布的，包含了CSS1的内容，也是现在通用的标准。在文挡中，样式表可以定义在当前文
2、挡的头部，也可以使用链接的外部CSS样式。在当前文挡头部的样式，要定义在元素之中。,17.1.2 样式表的作用,样式表的主要作用是用来定义元素的显示效果。其中包括定义元素的大小、边框、边界、补白、背景等。同时样式表还可以定义元素内部文本的显示效果，包括字体的选择、字体的大小、字体的样式、行高、缩进等。除此之外，使用样式表还可以定义元素的显示位置、浮动效果、以及链接内容的显示效果等。使用样式表可以完成文档中所有内容的布局和修饰效果。,17.1.3 W3C推荐的页面布局,Web标准可以分为3方面：结构标准语言（主要包括XHTML和XML）、表现标准语言（主要包括CSS）、行为标准（主要包括对象模型
3、、ECMAScript）等。,17.2 新建CSS样式,使用Dreamweaver，在新建CSS样式时，可以选择CSS的类型。其中每种类型的作用和注意事项都不相同。,17.2.1 新建CSS样式,在Dreamweaver中，新建CSS样式的操作，如下所示。 （1）选择要添加样式的元素或内容（如果添加公用的样式，可以不选择任何内容）。 （2）添加Div标签。 （3）在“新建 CSS 规则”对话框中，定义新建CSS样式的参数。 （4）如果在“新建 CSS 规则”对话框中选择单击“新建样式表文件”，则会打开如图17-4所示的对话框，选择保存样式表的位置。然后单击“确定”按钮，打开CSS规则定义对话框
4、。如果选择“仅对该文档”选项，则单击“确定”后直接打开CSS规则定义对话框。 （5）定义好CSS规则之后，单击“确定”按钮，将CSS样式添加到文档中。,17.2.2 使用类,在Dreamweaver中，类类型样式，可以使用在多个内容上。具体操作如下所示。 （1）在页面中单击鼠标，并新建CSS样式，打开“新建 CSS 规则”对话框。 （2）在“新建 CSS 规则”对话框中，选择类选项，在名称中添加名称“main”，选择“仅对该文档”选项。（3）在“新建 CSS 规则”对话框中，定义新建CSS样式的参数。在新建 CSS 规则中，定义背景颜色为灰色“#999999”。边框为5像素，深灰色“#3333
5、33”的实线边框。高度为100px。 （4）在“文档窗口”中，选择要定义CSS样式的元素。在“属性”面板中，选择“类”选项，打开可选择的类列表。（5）在下拉菜单中，显示了内容或元素可以使用的类。选择“main”选项，将main中定义的CSS样式应用于所选元素。,17.2.3 使用标签,在Dreamweaver中，标签类型样式，可以使用在所有相同标签内容上。具体操作如下所示。 （1）在页面中单击鼠标，并新建CSS样式，打开“新建 CSS 规则”对话框。 （2） “新建 CSS 规则”对话框在“新建 CSS 规则”对话框中，选择标签选项，在名称选项中，单击倒三角按钮。打开选择标签的列表，在列表中选
6、择div。（3）单击“确定”按钮，在打开的“新建 CSS 规则”对话框中，定义背景颜色为浅灰色“#cccccc”。边框为5像素，深灰色“#333333”的实线边框。宽度为“100%”、高度为100px。 （4）在“文档窗口”中，新建“Div 标签”，所有新建的Div标签都将使用新建的标签样式。,17.2.4 使用ID,在Dreamweaver中，高级类型样式，在文档中是唯一标识的标签内容上，同时会为相应标签添加唯一标识的ID。具体操作如下所示。 （1）在页面中单击鼠标，并新建CSS样式，打开“新建 CSS 规则”对话框。 （2）在“新建 CSS 规则”对话框中，选择高级选项，在名称中添加名称“
7、#main”，选择“仅对该文档”选项。 （3）单击“确定”按钮，在“新建 CSS 规则”对话框中，定义新建CSS样式的参数。在新建 CSS 规则中，定义背景颜色为灰色“#999999”。边框为5像素，深灰色“#333333”的实线边框。高度为100px。 （4）在“文档窗口”中，选择要定义CSS样式的元素。在“属性”面板中，选择定义元素ID选项，打开可选择的类列表。 （5）在下拉菜单中，显示了文档中定义的所有高级ID样式。选择“main”选项，将main中定义的CSS样式应用于所选元素。,17.2.5 使用复合内容,在Dreamweaver中，高级类型样式，在文档中是唯一标识的标签内容上，同时
8、会为相应标签添加唯一标识的ID。具体操作如下所示。 （1）在页面中单击鼠标，并新建CSS样式，打开“新建 CSS 规则”对话框。 （2）在“新建 CSS 规则”对话框中，选择高级选项，在名称中添加名称“#main”，选择“仅对该文档”选项。,17.3 新建CSS样式文件和附加样式,在Dreamweaver中，可以新建独立的CSS样式文件，并通过附加样式的方法，使用文档外独立的样式文件。下面分别进行讲解。,17.3.1 新建CSS样式文件,在Dreamweaver中，新建CSS样式文件的操作，如下所示。 （1）选择“文件”|“新建”命令，打开“新建文档”对话框。在“新建文档”对话框中的“文档类型
9、”中，选择CSS。 （2）单击“确定”按钮，新建CSS文件。 （3）执行下列操作之一，打开“新建 CSS 规则”对话框。 （4）在“新建 CSS 规则”对话框中，定义新建CSS样式的类型为“类”，名称为“main”。 （5）则单击“确定”按钮，打开CSS规则定义对话框。 （6）单击“确定”按钮，完成CSS规则的定义。 （7）选择“文件”|“保存”命令，或者“文件”|“另存为”命令。在打开的对话框中，选择文件保存的位置，并重新命名文件。CSS文件的后缀为“.css”。 （8）单击“确定”按钮，保存CSS文件。,17.3.2 使用附加样式,在Dreamweaver中，可以通过附加样式的方法，使用文
10、档以外的CSS样式文件。具体操作如下所示。 （1）执行下列操作之一，打开“链接外部样式表”对话框。选择“文本”|“CSS样式”|“附加样式表”命令。右击，在打开的下拉菜单中，选择“CSS样式”|“附加样式表” 命令。 （2）在“链接外部样式表”对话框中定义相应的参数，其中部分参数的含义如下所示。 （3）单击“确定”按钮，完成附加样式。 （4）选择要添加样式的元素或内容。 （5）在元素的“属性”面板中，选择“类”选项，在打开的下拉菜单中，可以看到外部附加的样式文件中的样式。,17.4 使用CSS样式面板,在Dreamweaver中，可以使用CSS样式面板，显示和编辑CSS样式。通过CSS样式面板
11、编辑样式，更加方便直观。,17.5 设置CSS属性,在Dreamweaver中，可以定义的CSS属性有很多，其中包括，类型、背景、区块、方框、边框、列表、定位、扩展等八个类别。下面通过示例，讲解下每种类别中各个属性使用的属性值和效果。其中示例中使用的元素和内容，在未定义任何样式时，显示效果如图所示。,17.5.1 类型属性,在CSS规则定义对话框中，选择分类中的“类型”选项，打开“类型”选项对话框。在“类型”选项中，可以定义元素3个部分的显示效果。分别为定义字体的相关属性、定义段落的相关属性、定义文本的样式。,17.5.2 背景属性,在CSS规则中，背景属性用来定义元素使用的背景颜色、背景图像
12、、以及背景图像的显示位置、重复效果等。,17.5.3 区块属性,在CSS规则中，区块属性用来定义元素中文本的文字间距、对齐效果、文本缩进、空格的显示等。,17.5.4 方框属性,在CSS规则中，方框属性用来定义元素的宽度、高度、元素和内容之间的距离、元素和其他元素之间的距离、以及浮动和清除等。,17.5.5 边框属性,在CSS规则中，边框属性用来定义元素边框的显示效果、边框宽度、边框颜色等。,17.5.6 列表属性,在CSS规则中，列表属性用来定义列表元素中项目符号的显示效果、项目符号的替代图像、项目符号的显示位置等。,17.5.7 定位属性,在CSS规则中，定位属性用来定义元素边框的显示效果
13、、边框宽度、边框颜色等。,17.5.8 扩展属性,在CSS规则中，扩展属性用来定义打印时的分页效果、光标的显示效果、CSS滤镜等。,17.5.9 CSS滤镜,在Dreamweaver中，选择分类中的“扩展”选项，打开“扩展”选项对话框，在“过滤器”选项中可以定义各种CSS滤镜。 1透明度滤镜 透明度滤镜，用来定义元素内容显示的透明度。 2模糊滤镜 模糊滤镜，用来定义元素内容显示的模糊效果。 3波浪滤镜 波浪滤镜，用来定义元素内容显示的波浪效果。,17.6 定义链接的样式,在Dreamweaver中，可以使用CSS样式定义链接内容使用的样式。,17.7 小结,本章主要讲解了CSS样式表的使用方法。使用CSS样式表已经成为现在网页设计中最常用的布局和表现的方法。是否能够熟练运用CSS样式对页面进行布局，已经成为衡量一个网页设计师的标准。由于CSS样式表的内容非常多，所以本章的内容需要不断的练习和复习。,17.8 本章习题,1CSS是利用什么元素构建网页布局的？ A. B. C. D. 2正确的CSS语法格式是哪个？ Abody:color=black Bbody;color:black Cbody color: black; Dbody:color=black(body 3为网页添加样式文件的方式有哪些？ A内联式样式表 B嵌入式样式表 C补充式样式表 D链接式样式表,
