第8章样式表课件.ppt

1、第8章 使用CSS样式表内容提要内容提要o CSSCSS样式表概述样式表概述o 层叠样式应用技巧层叠样式应用技巧o 附加外部样式表的方法附加外部样式表的方法o CSSCSS滤镜效果应用滤镜效果应用学习目标学习目标o 学会使用学会使用CSSCSS进行简单的页面布局进行简单的页面布局o 了解了解CSSCSS面板各功能区的使用方法，面板各功能区的使用方法，掌握附加或新建掌握附加或新建CSSCSS样式的方法样式的方法CSSCSS样式表概述样式表概述 CSS（Cascading Style Sheet，级联，级联样式表）样式是网页元素外观属性的集合，是一样式表）样式是网页元素外观属性的集合，是一系列的格

2、式规则，它允许网页设计者定义文本、系列的格式规则，它允许网页设计者定义文本、表格、图像、表单等网页元素的样式。表格、图像、表单等网页元素的样式。层叠样式应用技巧层叠样式应用技巧o 创建创建CSSCSS样式样式o 样式的定义样式的定义o 管理管理CSSCSS样式样式o 应用应用CSSCSS样式表样式表创建创建CSSCSS样式样式 CSSCSS样式的新建、应用及编辑等操作都是在样式的新建、应用及编辑等操作都是在“CSSCSS样式样式”面板中完成的。面板中完成的。o 认识认识“CSS”CSS”样式面板样式面板o 创建创建CSSCSS样式样式认识认识“CSS”CSS”样式面板样式面板 “CSS “CS

3、S样式样式”面板在面板在“设计设计”面板组中，面板组中，如果面板组中没有如果面板组中没有“CSSCSS样式样式”面板，选面板，选择择 窗口窗口 中中CSSCSS样式样式 菜单命令，或按菜单命令，或按【Shift+F11Shift+F11】键即可打开】键即可打开“CSSCSS样式样式”面面板，如板，如图图8-18-1所示。所示。面板中各按钮的功能如下。面板中各按钮的功能如下。o ：单击该按钮可打开：单击该按钮可打开“附加样式表附加样式表”对话框。选择要链接到或导入到当前文档对话框。选择要链接到或导入到当前文档中的外部样式表。中的外部样式表。o：单击该按钮可新建：单击该按钮可新建CSSCSS样式。

4、样式。o ：单击该按钮可打开：单击该按钮可打开“编辑样式表编辑样式表”对话框，在对话框中可对当前文档或外部对话框，在对话框中可对当前文档或外部样式表中的任何样式进行编辑。样式表中的任何样式进行编辑。o：选中面板中的样式，再单击该按钮可：选中面板中的样式，再单击该按钮可删除所选的样式，并删除该样式应用于任删除所选的样式，并删除该样式应用于任何元素中的设置。何元素中的设置。o：单击该按钮，可以打开：单击该按钮，可以打开“CSSCSS样式样式”菜单，如菜单，如图图8-28-2所示，通过该菜单可以编所示，通过该菜单可以编辑、复制、删除或应用所选中的辑、复制、删除或应用所选中的CSSCSS样式，样式，也

5、可以新建也可以新建CSSCSS样式。样式。图图8-18-1 图图8-28-2创建创建CSSCSS样式样式 创建创建CSSCSS样式的具体操作如下。样式的具体操作如下。（1 1）执行下列）执行下列3 3种方法之一打开如图种方法之一打开如图7-7-3 3所示的所示的“新建新建CSSCSS样式样式”对话框。对话框。图图8-38-3o 在在“CSSCSS样式样式”面板中单击面板中单击 按钮。按钮。o 在在“CSSCSS样式样式”窗口中单击鼠标右键，在窗口中单击鼠标右键，在弹出的快捷菜单中选择弹出的快捷菜单中选择“新建新建”命令。命令。o 单击单击 按钮，在弹出的按钮，在弹出的“CSSCSS样式样式”菜

6、单菜单中选择中选择“新建新建”命令。命令。（2 2）在）在“名称名称”下拉列表框中输入新下拉列表框中输入新建建CSSCSS样式的文件名。样式的文件名。（3 3）在）在“选择器类型选择器类型”栏中选择所定栏中选择所定义的样式类型，义的样式类型，CSSCSS样式的创建类型有以样式的创建类型有以下下3 3种。种。o ：创建自定义样式，选中该单选：创建自定义样式，选中该单选项可以创建一个应用于文本和文本块的项可以创建一个应用于文本和文本块的CSSCSS样样式。但需要注意的是，在式。但需要注意的是，在“名称名称”下拉列表下拉列表框中输入的自定义样式名称要以英文句点开框中输入的自定义样式名称要以英文句点开

7、头，如果没有输入，则头，如果没有输入，则DreamweaverDreamweaver将自动添将自动添加。加。o ：选中该单选项可以重新定：选中该单选项可以重新定义义HTMLHTML标签，表示为现有标签，表示为现有HTMLHTML标签赋上新的标签赋上新的样式。选中该单选项后样式。选中该单选项后“名称名称”下拉列表框下拉列表框变为变为“标签标签”下拉列表框，如下拉列表框，如图图8-48-4所示。在所示。在该下拉列表框中可选择重新定义的标签，如该下拉列表框中可选择重新定义的标签，如图图8-58-5所示。所示。o ：使用：使用CSSCSS选择器，表示要对特选择器，表示要对特定的定的HTMLHTML标签

8、组合或含有某个标签组合或含有某个IDID属性的所有标属性的所有标签进行重新定义。选中该单选项后签进行重新定义。选中该单选项后“名称名称”下下拉列表框变为拉列表框变为“选择器选择器”下拉列表框，如下拉列表框，如图图8-8-6 6所示，可在该下拉列表框中选择需要使用的所示，可在该下拉列表框中选择需要使用的选择器类型，如选择器类型，如图图8-78-7所示。所示。（4 4）在）在“定义在定义在”栏中选择样式的种类。栏中选择样式的种类。o ：选中该单选项，可以定义一个外：选中该单选项，可以定义一个外部链接的部链接的CSSCSS样式。样式。o ：选中该单选项，定义一个仅应用：选中该单选项，定义一个仅应用于

9、当前页面的于当前页面的CSSCSS样式。样式。图图8-48-4图图8-58-5 图图8-68-6图图8-78-7 如果在如果在“定义在定义在”栏中选中了栏中选中了 单选项，则会打开单选项，则会打开“保存样式表文件为保存样式表文件为”对话框，对话框，在该对话框中保存新建的样式表文件，如在该对话框中保存新建的样式表文件，如图图8-88-8所示。所示。若选中若选中 单选项，则直接打开如单选项，则直接打开如图图8-98-9所示的对话框。所示的对话框。（5 5）在）在“分类分类”列表中选择要定义的样式类列表中选择要定义的样式类型，再在右侧设置相应参数，具体的定义方法将型，再在右侧设置相应参数，具体的定义

10、方法将在下一节讲解。在下一节讲解。（6 6）设置完后单击）设置完后单击 按钮，完成按钮，完成CSSCSS样式的创样式的创建。建。图图8-88-8图图8-98-9 创建了新的样式后，即可在创建了新的样式后，即可在“CSSCSS样式定义样式定义”对对话框中进行设置，话框中进行设置，CSSCSS样式有样式有8 8种，下面分别介绍种，下面分别介绍其设置方法。其设置方法。o 设置设置CSSCSS样式类型格式样式类型格式o 设置设置CSSCSS样式背景格式样式背景格式o 设置设置CSSCSS样式区块格式样式区块格式o 设置设置CSSCSS样式方框格式样式方框格式o 设置设置CSSCSS样式边框格式样式边框

11、格式o 设置设置CSSCSS样式列表格式样式列表格式o 设置设置CSSCSS样式定位格式样式定位格式o 设置设置CSSCSS样式扩展格式样式扩展格式样式的定义样式的定义 设置设置CSSCSS样式的类型格式可以为页面中样式的类型格式可以为页面中的文本加入字体、大小、风格等类型格式，的文本加入字体、大小、风格等类型格式，具体操作如下。具体操作如下。（1 1）在）在“分类分类”列表中选择列表中选择“类型类型”选项，列表右侧就会显示出选项，列表右侧就会显示出“类型类型”选项选项的参数设置，如的参数设置，如图图8-108-10所示。其中各参数所示。其中各参数含义如下。含义如下。o 字体：在该下拉列表框中

12、可以输入字体类字体：在该下拉列表框中可以输入字体类型，也可以单击型，也可以单击 按钮，从下拉列表中选按钮，从下拉列表中选择需要的字体。择需要的字体。设置设置CSSCSS样式类型格式样式类型格式 o 大小：在该下拉列表框中可以直接输入样式文本大小：在该下拉列表框中可以直接输入样式文本的字号，或从下拉列表中选择需要的字号，当选的字号，或从下拉列表中选择需要的字号，当选择字号后，可以在其右侧的下拉列表框中选择字择字号后，可以在其右侧的下拉列表框中选择字号的单位。号的单位。o 粗细：在该下拉列表框中可输入字体的粗细程度，粗细：在该下拉列表框中可输入字体的粗细程度，也可从下拉列表中选择需要的粗细程度。也

13、可从下拉列表中选择需要的粗细程度。o 样式：在该下拉列表框中可输入字体的特殊格式，样式：在该下拉列表框中可输入字体的特殊格式，也可以从下拉列表中选择字体的特殊格式。也可以从下拉列表中选择字体的特殊格式。o 变量：在该下拉列表中可选择字体的变形方式。变量：在该下拉列表中可选择字体的变形方式。o 行高：在该下拉列表中可选择行高：在该下拉列表中可选择“正常正常”或或“值值”选项，当选择选项，当选择“值值”选择项时可在右侧的下拉列选择项时可在右侧的下拉列表框中选择值的单位。表框中选择值的单位。o 大小写：在该下拉列表框中可以输入文本大小写：在该下拉列表框中可以输入文本的大小写方式，也可以在下拉列表中选

14、择的大小写方式，也可以在下拉列表中选择文本的大小写方式。文本的大小写方式。o 修饰：在该栏中设置文本的修饰效果，包修饰：在该栏中设置文本的修饰效果，包括括 、等复选框。等复选框。o 颜色：可单击颜色：可单击 按钮，在打开的颜色列表按钮，在打开的颜色列表中选择需要的颜色，也可在文本框中直接中选择需要的颜色，也可在文本框中直接输入颜色值。输入颜色值。（2 2）设置完成后，单击）设置完成后，单击 按钮即可按钮即可应用样式，再单击应用样式，再单击 按钮关闭对话框。按钮关闭对话框。图图8-108-10 若不使用若不使用已设置的效果，已设置的效果，选中选中 复选复选框即可。框即可。为页面中的元素加入背景格

15、式的具体操作如下。为页面中的元素加入背景格式的具体操作如下。（1 1）在）在“分类分类”列表中选择列表中选择“背景背景”选项，其选项，其右侧显示出右侧显示出“背景背景”的参数设置，如的参数设置，如图图8-118-11所示。所示。其中各参数含义如下。其中各参数含义如下。o 背景颜色：可单击背景颜色：可单击 按钮，在打开的颜色列表中按钮，在打开的颜色列表中选择需要的颜色，也可在文本框中直接输入颜色选择需要的颜色，也可在文本框中直接输入颜色值。值。o 背景图像：可在该文本框中直接输入背景图像的背景图像：可在该文本框中直接输入背景图像的URLURL地址，或单击地址，或单击 按钮，打开按钮，打开“选择图

16、像源选择图像源文件文件”对话框，选择背景图像。对话框，选择背景图像。设置设置CSSCSS样式背景格式样式背景格式 图图8-118-11 如果所选如果所选图像不在指定图像不在指定的站点文件中，的站点文件中，系统要求将所系统要求将所选图片保存在选图片保存在站点目录中。站点目录中。o 重复：可在该下拉列表框中输入图像重复放置的方式，重复：可在该下拉列表框中输入图像重复放置的方式，也可以在其下拉列表中选择背景图像的重复放置方式。也可以在其下拉列表中选择背景图像的重复放置方式。o 附件：在该下拉列表框中可以输入附件：在该下拉列表框中可以输入“固定固定”或或“滚动滚动”来设置该背景图像是固定在原始位置还是

17、可以滚动，来设置该背景图像是固定在原始位置还是可以滚动，同样也可以在下拉列表框中选择。同样也可以在下拉列表框中选择。o 水平位置：在该下拉列表框中可以输入设置背景图像水平位置：在该下拉列表框中可以输入设置背景图像相对于应用样式元素的水平位置，也可在下拉列表中相对于应用样式元素的水平位置，也可在下拉列表中选择。选择。o 垂直位置：在该下拉列表中可以输入设置背景图像相垂直位置：在该下拉列表中可以输入设置背景图像相对于应用样式元素的垂直位置，也可在下拉列表中选对于应用样式元素的垂直位置，也可在下拉列表中选择。择。（2 2）设置完成后，单击）设置完成后，单击 按钮即可应用样式，按钮即可应用样式，再单击

18、再单击 按钮关闭对话框。按钮关闭对话框。在在“CSSCSS样式定义样式定义”对话框的对话框的“区块区块”类别中类别中可以定义标签和属性的间距和对齐设置。设置区可以定义标签和属性的间距和对齐设置。设置区块格式的具体操作如下。块格式的具体操作如下。（1 1）在）在“分类分类”列表中选择列表中选择“区块区块”选项，对选项，对话框右侧显示出区块的参数设置，如话框右侧显示出区块的参数设置，如图图8-128-12所示。所示。其中各参数含义如下。其中各参数含义如下。o 单词间距：在该下拉列表框中可选择单词的间距单词间距：在该下拉列表框中可选择单词的间距方式，若选择方式，若选择“值值”选项，则在该下拉列表框中

19、选项，则在该下拉列表框中输入数值来确定单词的间距，并在右侧的下拉列输入数值来确定单词的间距，并在右侧的下拉列表中设置数值的单位。表中设置数值的单位。设置设置CSSCSS样式区块格式样式区块格式o 字母间距：在该下拉列表框中设置字母间的间距。字母间距：在该下拉列表框中设置字母间的间距。若在列表中选择若在列表中选择“值值”选项，在右侧的下拉列表中选项，在右侧的下拉列表中可以设置数值的单位。可以设置数值的单位。o 垂直对齐：在该下拉列表框中可指定元素相对于其垂直对齐：在该下拉列表框中可指定元素相对于其父级元素在垂直方向上的对齐方式。也可输入一个父级元素在垂直方向上的对齐方式。也可输入一个数值，然后在

20、右侧的下拉列表中设置数值的单位。数值，然后在右侧的下拉列表中设置数值的单位。o 文本对齐：该下拉列表框用于指定文本在应用该样文本对齐：该下拉列表框用于指定文本在应用该样式元素中的对齐方式。式元素中的对齐方式。o 文本缩进：在该文本框中输入第一行的缩进距离，文本缩进：在该文本框中输入第一行的缩进距离，在右侧的下拉列表中选择数值单位。在右侧的下拉列表中选择数值单位。o 空格：在该下拉列表框中设置处理空格的方式。空格：在该下拉列表框中设置处理空格的方式。o 显示：在该下拉列表框中选择区块中要显示的格式。显示：在该下拉列表框中选择区块中要显示的格式。（2 2）设置完成后，单击）设置完成后，单击 按钮即

21、可应用样式，按钮即可应用样式，再单击再单击 按钮关闭对话框。按钮关闭对话框。在在“CSSCSS样式定义样式定义”对话框的对话框的“方框方框”类别中类别中可以定义控制元素在页面上的放置方式和属性，可以定义控制元素在页面上的放置方式和属性，设置方框格式的具体操作如下。设置方框格式的具体操作如下。（1 1）在）在“分类分类”列表中选择列表中选择“方框方框”选项，对选项，对话框右侧显示出话框右侧显示出“方框方框”选项的参数设置，如选项的参数设置，如图图8-138-13所示。所示。o 宽和高：在该下拉列表中可指定元素的宽度和高宽和高：在该下拉列表中可指定元素的宽度和高度，也可以输入一个数值，然后在右侧的

22、下拉列度，也可以输入一个数值，然后在右侧的下拉列表中设置数值的单位。表中设置数值的单位。设置设置CSSCSS样式方框格式样式方框格式图图8-128-12图图8-138-13 o 浮动：在该下拉列表框中设置应用样式元素的浮动浮动：在该下拉列表框中设置应用样式元素的浮动位置。利用该参数可以将元素移到页面之外，如在位置。利用该参数可以将元素移到页面之外，如在下拉列表框中选择下拉列表框中选择“右对齐右对齐”选项，则将元素放置选项，则将元素放置到页面右侧的空白处，同样若选择到页面右侧的空白处，同样若选择“左对齐左对齐”选项选项则将元素放置到页面左侧的空白处。则将元素放置到页面左侧的空白处。o 清除：在该

23、下拉列表框中可以设置层不允许在应用清除：在该下拉列表框中可以设置层不允许在应用样式元素的某个侧边。如在下拉列表框中选择样式元素的某个侧边。如在下拉列表框中选择“左左对齐对齐”选项，则层不能出现在应用样式元素的左侧。选项，则层不能出现在应用样式元素的左侧。同样如选择同样如选择“右对齐右对齐”选项，则层不能出现在应用选项，则层不能出现在应用样式的右侧。如果层在设置该样式前已在元素的某样式的右侧。如果层在设置该样式前已在元素的某侧，而又设置了层不能出现在该侧边，则应用该样侧，而又设置了层不能出现在该侧边，则应用该样式的元素将会自动移开。式的元素将会自动移开。o 填充：在该栏中可以设置应用样式元素的内

24、容和元素填充：在该栏中可以设置应用样式元素的内容和元素的边框之间的空白大小，如果没有边框，则为与边距的边框之间的空白大小，如果没有边框，则为与边距之间的空白大小。如选中之间的空白大小。如选中 复选框就可将复选框就可将“上上”下拉列表框中的设置应用于元素的所有边，如图下拉列表框中的设置应用于元素的所有边，如图7-137-13所示。若取消该复选框的选中状态，就可分别在所示。若取消该复选框的选中状态，就可分别在“上上”、“右右”、“下下”和和“左左”下拉列表框中设置下拉列表框中设置对应边的空白大小，如对应边的空白大小，如图图8-148-14所示。所示。o 边界：在该栏中可以设置应用样式的元素边界和其

25、他边界：在该栏中可以设置应用样式的元素边界和其他元素之间的空白大小。如选中元素之间的空白大小。如选中 复选框就可将复选框就可将“上上”下拉列表框中的设置应用于元素的所有边，如下拉列表框中的设置应用于元素的所有边，如图图7-137-13所示。若取消该复选框的选中状态，就可分别所示。若取消该复选框的选中状态，就可分别在在“上上”、“右右”、“下下”和和“左左”下拉列表框中设下拉列表框中设置对应边的空白大小。在其右侧的下拉列表框中可选置对应边的空白大小。在其右侧的下拉列表框中可选择值的单位，如择值的单位，如图图8-148-14所示。所示。（2 2）设置完成后，单击）设置完成后，单击 按钮即可应用样式

26、，再按钮即可应用样式，再单击单击 按钮关闭对话框。按钮关闭对话框。在在“CSSCSS样式定义样式定义”对话框的对话框的“边框边框”类别可类别可以定义元素周围边框的设置，如宽度、颜色和样以定义元素周围边框的设置，如宽度、颜色和样式等，设置边框格式的具体操作如下。式等，设置边框格式的具体操作如下。（1 1）在）在“分类分类”列表中选择列表中选择“边框边框”选项，列选项，列表右侧显示出表右侧显示出“边框边框”选项的参数设置，如选项的参数设置，如图图8-8-1515所示。其中各参数含义如下。所示。其中各参数含义如下。o 样式：在该栏中设置边框的样式外观，该栏中各样式：在该栏中设置边框的样式外观，该栏中

27、各项下拉列表框中的选项都相同，如项下拉列表框中的选项都相同，如图图8-168-16所示。所示。若选中若选中 复选框，就可将复选框，就可将“上上”下拉列表框中的设下拉列表框中的设置应用于元素的所有边。若取消该复选框的选中置应用于元素的所有边。若取消该复选框的选中状态，就可分别在状态，就可分别在“上上”、“右右”、“下下”和和“左左”下拉列表框中设置对应边的边框格式。下拉列表框中设置对应边的边框格式。设置设置CSSCSS样式边框格式样式边框格式 o 宽度：该栏中设置元素边框的粗细。其设置方法与宽度：该栏中设置元素边框的粗细。其设置方法与“样式样式”栏类似。栏类似。o 颜色：该栏中设置元素边框的颜色

28、。其设置方法与颜色：该栏中设置元素边框的颜色。其设置方法与“样式样式”栏类似。栏类似。（2 2）设置完成后，单击）设置完成后，单击 按钮即可应用样式，按钮即可应用样式，再单击再单击 按钮关闭对话框。按钮关闭对话框。图图8-148-14图图8-158-15 在在“CSSCSS样式定义样式定义”对话框的对话框的“列表列表”类别中类别中可以定义列表标签的列表设置，如项目符号大小可以定义列表标签的列表设置，如项目符号大小和类型，设置列表格式的具体操作如下。和类型，设置列表格式的具体操作如下。（1 1）在）在“分类分类”列表中选择列表中选择“列表列表”选项，对选项，对话框右侧显示出话框右侧显示出“列表列

29、表”选项的参数设置，如选项的参数设置，如图图8-178-17所示。其中各参数含义如下。所示。其中各参数含义如下。o 类型：在该下拉列表框中可以选择无序列表的项类型：在该下拉列表框中可以选择无序列表的项目符号类型及有序列表的编号类型目符号类型及有序列表的编号类型。设置设置CSSCSS样式列表格式样式列表格式o 项目符号图像：在该下拉列表框中指定图像作为无项目符号图像：在该下拉列表框中指定图像作为无序列表的项目符号，可直接输入指定图像的路径，序列表的项目符号，可直接输入指定图像的路径，也可单击也可单击 按钮来选择作为项目符号的图像，按钮来选择作为项目符号的图像，如如图图8-188-18所示。所示。

30、o 位置：在该下拉列表框中可以选择列表文本是否换位置：在该下拉列表框中可以选择列表文本是否换行和缩进。如选择行和缩进。如选择“内内”选项，则当列表过长而自选项，则当列表过长而自动换行时，不缩进，若选择动换行时，不缩进，若选择“外外”选项，则当列表选项，则当列表过长而自动换行时以缩进方式显示。过长而自动换行时以缩进方式显示。（2 2）设置完成后，单击）设置完成后，单击 按钮即可应用样式，按钮即可应用样式，再单击再单击 按钮关闭对话框。按钮关闭对话框。图图8-168-16图图8-178-17 在在“CSSCSS样式定义样式定义”对话框的对话框的“定位定位”类别中类别中可以定义层的默认标签列，并将标

31、签或所选文本可以定义层的默认标签列，并将标签或所选文本块更改为新层。块更改为新层。设置设置CSSCSS样式定位格式样式定位格式 在在“CSSCSS样式定义样式定义”对话框的对话框的“扩展扩展”格式中可以设置格式中可以设置分页和视觉效果选项。设置的具体操作如下。分页和视觉效果选项。设置的具体操作如下。（1 1）在）在“分类分类”列表中选择列表中选择“扩展扩展”选项，对话框右选项，对话框右侧显示出侧显示出“扩展扩展”选项的参数设置，如选项的参数设置，如图图8-208-20所示。其所示。其中各参数含义如下。中各参数含义如下。o分页：在该栏中可以设置在打印页面时强制分页的位置。在分页：在该栏中可以设置

32、在打印页面时强制分页的位置。在“之前之前”和和“之后之后”下拉列表框中，可以分别设置分页前和分下拉列表框中，可以分别设置分页前和分页后位置。页后位置。设置CSS样式扩展格式o 视觉效果：在该栏中可以设置样式的可视效果，在视觉效果：在该栏中可以设置样式的可视效果，在“光标光标”下拉列表框中可选择当鼠标光标位于样式下拉列表框中可选择当鼠标光标位于样式所控制对象上时光标的图像；在所控制对象上时光标的图像；在“过滤器过滤器”下拉列下拉列表框中可以选择样式所控制对象的特殊效果；也就表框中可以选择样式所控制对象的特殊效果；也就是通常讲的是通常讲的CSSCSS滤镜效果，如滤镜效果，如图图8-218-21所示

33、。定位：所示。定位：在该栏中可以将层定位，层在固定的位置显示。在该栏中可以将层定位，层在固定的位置显示。（2 2）设置完成后，单击）设置完成后，单击 按钮即可应用样按钮即可应用样式，再单击式，再单击 按钮关闭对话框。按钮关闭对话框。图图8-208-20图图8-218-21 管理管理CSSCSS样式样式 可以对可以对CSSCSS样式进行删除、复制、重命名、链样式进行删除、复制、重命名、链接等操作。接等操作。o 编辑编辑CSSCSS样式样式o 删除删除CSSCSS样式样式o 复制复制CSSCSS样式样式o CSSCSS样式表重命名样式表重命名o 链接外部链接外部CSSCSS样式表样式表编辑CSS样

34、式 创建了创建了CSSCSS样式后，还可以对已有的样式进行编样式后，还可以对已有的样式进行编辑，修改样式中的某些参数。下面对已创建样式进辑，修改样式中的某些参数。下面对已创建样式进行编辑，具体操作如下。行编辑，具体操作如下。（1 1）在）在“CSSCSS样式样式”面板中，单击面板底部的面板中，单击面板底部的 按钮，打开如按钮，打开如图图8-228-22所示的所示的“”对话框。对话框。（2 2）在列表中选中要编辑的样式，单击）在列表中选中要编辑的样式，单击 按按钮打开钮打开“CSSCSS样式定义样式定义”对话框，然后按创建新样式对话框，然后按创建新样式的方法修改需要的参数，修改完成后单击的方法修

35、改需要的参数，修改完成后单击 按钮按钮返回返回“编辑样式表编辑样式表”对话框。对话框。（3 3）单击）单击 按钮完成样式的编辑。按钮完成样式的编辑。图图8-228-22 也可在也可在CSS样式面样式面板中直接选取要编辑的板中直接选取要编辑的样式，再单击面板底部样式，再单击面板底部 按钮，直接打开按钮，直接打开“CSS样式定义样式定义”对话框进行对话框进行编辑。编辑。删除删除CSSCSS样式样式 要删除列表中的某些样式，具体操作如下。要删除列表中的某些样式，具体操作如下。（1 1）打开）打开“”对话框。在样式列表对话框。在样式列表中选中要删除的样式，如中选中要删除的样式，如图图8-238-23所

36、示。所示。（2 2）单击对话框中的）单击对话框中的 按钮即可将选按钮即可将选中的样式删除，删除后如中的样式删除，删除后如图图8-248-24所示。所示。图8-23图8-24 复制复制CSSCSS样式样式 如果要以一个已经创建的如果要以一个已经创建的CSSCSS样式为基础，样式为基础，创建另一个创建另一个CSSCSS样式，此时可复制样式，此时可复制CSSCSS样式后样式后再定义复制的样式。复制再定义复制的样式。复制CSSCSS样式的具体操样式的具体操作如下。作如下。（1 1）打开）打开“”对话框，在样式列对话框，在样式列表框中选中要复制的样式，单击表框中选中要复制的样式，单击 按钮打开按钮打开“

37、重制重制CSSCSS样式样式”对话框，如对话框，如图图7-257-25所示。所示。（2 2）在）在“名称名称”下拉列表框中设置复制样式的下拉列表框中设置复制样式的名称，并根据需要在名称，并根据需要在“选择器类型选择器类型”栏和栏和“定义在定义在”栏中重新选择样式的类型。栏中重新选择样式的类型。（3 3）根据）根据“定义在定义在”栏中选中的单选项不同，栏中选中的单选项不同，会有不同的操作，与创建新样式一样，这里不再赘会有不同的操作，与创建新样式一样，这里不再赘述，复制后如述，复制后如图图8-268-26所示。所示。图图8-258-25图图8-268-26 CSSCSS样式表重命名样式表重命名 为

38、一个为一个CSSCSS样式重新命名，具体操作如下。样式重新命名，具体操作如下。（1 1）打开）打开“”对话框，在对话框，在“样式样式”列列表框中选中要重命名的样式，单击表框中选中要重命名的样式，单击 按钮打开按钮打开“重命名类重命名类”对话框，如对话框，如图图8-278-27所示。所示。（2 2）在）在“新建名称新建名称”文本框中输入新的样式文本框中输入新的样式名称。名称。（3 3）输入完后单击）输入完后单击 按钮即可。按钮即可。图图8-278-27 图图8-288-28 链接外部CSS样式表 通过链接可将其他页面中的样式应用到当前页通过链接可将其他页面中的样式应用到当前页面中，创建链接外部样

39、式表的具体操作如下。面中，创建链接外部样式表的具体操作如下。（1 1）在）在“CSSCSS样式样式”面板中，单击面板中，单击 按钮，或在按钮，或在打开的打开的“”对话框中单击对话框中单击 按钮打开按钮打开“链接外部样式表链接外部样式表”对话框，如对话框，如图图8-288-28所所示。示。（2 2）在）在“文件文件/URL”/URL”下拉列表框中指定外部样下拉列表框中指定外部样式表的路径，或单击式表的路径，或单击 按钮打开按钮打开“选择样式表选择样式表文件文件”对话框，如对话框，如图图8-298-29所示。所示。（3 3）选择了要链接的样式表文件后，单击）选择了要链接的样式表文件后，单击 按钮返

40、回按钮返回“链接外部样式表链接外部样式表”对话框，如对话框，如图图8-308-30所所示。示。（4 4）单击）单击 按钮关闭对话框，则创建的外部按钮关闭对话框，则创建的外部链接样式表显示在链接样式表显示在“CSSCSS样式样式”面板中，如面板中，如图图8-318-31所示。所示。图图8-318-31图图8-298-29 图图8-308-30 CSSCSS滤镜效果应用滤镜效果应用 CSSCSS滤镜作为滤镜作为CSSCSS的一个新的扩展，能把可视的一个新的扩展，能把可视化的滤镜和转换效果添加到一个标准的化的滤镜和转换效果添加到一个标准的HTMLHTML元素元素上，使应用样式的对象产生模糊、反转、发

41、光等上，使应用样式的对象产生模糊、反转、发光等效果。在效果。在DreamweaverDreamweaver中，可直接在对话框中添加中，可直接在对话框中添加滤镜的参数，而不用编写复杂的代码。滤镜的参数，而不用编写复杂的代码。CSSCSS滤镜效滤镜效果应用的具体操作如下。果应用的具体操作如下。（1 1）创建一个新的）创建一个新的CSSCSS样式。样式。（2 2）在）在“分类分类”列表中选择列表中选择“扩展扩展”选项，对话选项，对话框右侧显示出框右侧显示出“扩展扩展”选项的参数设置。选项的参数设置。（3 3）在）在“视觉效果视觉效果”栏中的栏中的“过滤器过滤器”下拉列表下拉列表框中选择样式所控制对象

42、的特殊效果。也就是通常框中选择样式所控制对象的特殊效果。也就是通常讲的讲的CSSCSS滤镜效果。如滤镜效果。如图图8-358-35所示。各个过滤器参数所示。各个过滤器参数的含义如下。的含义如下。o AlphaAlpha：该过滤器把对象与背景混合，通俗地讲就是：该过滤器把对象与背景混合，通俗地讲就是对象的透明度。可以通过各个参数的设置来控制透对象的透明度。可以通过各个参数的设置来控制透明的程度。各参数的含义如明的程度。各参数的含义如表表8-18-1所示。所示。图图8-358-35 表表8-18-1oBlendTransBlendTrans：该过滤器是一种动态过滤器，用于处理对象之间淡：该过滤器是

43、一种动态过滤器，用于处理对象之间淡入谈出效果。该过滤器不用直接套用，必须由入谈出效果。该过滤器不用直接套用，必须由ScriptsScripts程序对其程序对其控制，其参数的含义如表控制，其参数的含义如表8-28-2所示。所示。表表8-28-2oBlurBlur：该属性将使对象产生模糊效果，可以通过各个参数的设置来：该属性将使对象产生模糊效果，可以通过各个参数的设置来控制模糊的方向和模糊的程度。各参数的含义如表控制模糊的方向和模糊的程度。各参数的含义如表8-38-3所示所示。表表8-38-3oChromaChroma：该过滤器可以设置对象中指定颜色为透明色，其参数的：该过滤器可以设置对象中指定颜

44、色为透明色，其参数的含义如表含义如表8-48-4所示。所示。表表8-48-4 DropShadowDropShadow：该过滤器用于使对象产生阴影。可以通过：该过滤器用于使对象产生阴影。可以通过各个参数的设置来控制阴影的颜色、透明度等。各参数各个参数的设置来控制阴影的颜色、透明度等。各参数的含义如表的含义如表8-58-5所示。所示。表表8-58-5oFlipHFlipH：该过滤器用于对象的水平翻转效果，没有参数，直接使：该过滤器用于对象的水平翻转效果，没有参数，直接使用即可。用即可。oFlipVFlipV：该过滤器用于对象的垂直翻转效果，没有参数，直接使：该过滤器用于对象的垂直翻转效果，没有参

45、数，直接使用即可。用即可。oGlowGlow：该过滤器用于设置对象边缘的发光效果。可以通过各个参：该过滤器用于设置对象边缘的发光效果。可以通过各个参数的设置来控制发光的颜色和强弱等级。各参数的含义如表数的设置来控制发光的颜色和强弱等级。各参数的含义如表8-68-6所示。所示。表表8-68-6o GrayGray：该过滤器用于将图片对象变为灰度图，没有：该过滤器用于将图片对象变为灰度图，没有参数，直接使用即可。参数，直接使用即可。o InvertInvert：该过滤器可以把对象的可视化属性全部翻：该过滤器可以把对象的可视化属性全部翻转，其中包括颜色、饱和度和亮度值，这就是俗称转，其中包括颜色、饱

46、和度和亮度值，这就是俗称的底片或者负片效果，同样没有参数，直接使用即的底片或者负片效果，同样没有参数，直接使用即可。可。o LightLight：该过滤器使对象产生一种模拟的投射效果。：该过滤器使对象产生一种模拟的投射效果。该过滤器也是一种动态过滤器，它提供了类似于函该过滤器也是一种动态过滤器，它提供了类似于函数功能的方法，可以通过调用的方法来设置或改变数功能的方法，可以通过调用的方法来设置或改变其参数。其参数。o MaskMask：该过滤器按照指定颜色为对象产生类似蒙版：该过滤器按照指定颜色为对象产生类似蒙版的效果，通俗地讲就像隔着一层有色玻璃来看这个的效果，通俗地讲就像隔着一层有色玻璃来看

47、这个对象，一般适用于图片对象。其参数的含义如对象，一般适用于图片对象。其参数的含义如表表8-78-7所示。所示。oRevealTransRevealTrans：该过滤器也是一种动态过滤器，处理对象之间：该过滤器也是一种动态过滤器，处理对象之间的淡入或淡出效果外，还提供了更多的图片对象转换效果。该的淡入或淡出效果外，还提供了更多的图片对象转换效果。该过滤器也不能直接套用，必须由过滤器也不能直接套用，必须由ScriptsScripts程序对其控制，其参数程序对其控制，其参数的含义如表的含义如表8-88-8所示所示。表8-7表8-8表表8-98-9o WaveWave：该过滤器可以使对象在垂直方向上

48、产生波浪：该过滤器可以使对象在垂直方向上产生波浪的变形效果，各参数的含义如表的变形效果，各参数的含义如表8-108-10所示。所示。表表8-108-10oXrayXray：该过滤器将使对象只显示轮廓，并将对象轮廓增亮显示，：该过滤器将使对象只显示轮廓，并将对象轮廓增亮显示，起到类似于起到类似于X X光片的效果，直接使用即可。光片的效果，直接使用即可。oshadowshadow：该过滤器与：该过滤器与DropShadowDropShadow过滤器相似，但其产生的阴影效过滤器相似，但其产生的阴影效果有渐进感。可以对各个参数的设置来控制阴影的颜色、方向等。果有渐进感。可以对各个参数的设置来控制阴影的

49、颜色、方向等。各参数含义如表各参数含义如表8-118-11所示。所示。表表8-118-11 （4 4）设置完成后，单击）设置完成后，单击 按钮即可应用样式，按钮即可应用样式，再单击再单击 按钮关闭对话框。按钮关闭对话框。例例1 1：利用：利用graygray滤镜制作黑白图像滤镜制作黑白图像例例2 2：利用：利用blurblur滤镜制作模糊的图像（滤镜制作模糊的图像（1,270,101,270,10）例例3 3：利用：利用wavewave滤镜制作晃动的效果（滤镜制作晃动的效果（1,1,5,5,61,1,5,5,6）制作动感文字o 操作步骤：插入一个表格，并输入文字；在css面板中设置”类“与”仅

50、对该文档“；设置文本样式；在“扩展”下选择“blur”滤镜，其中add为一个布尔值，用于图片时取0，用于文字时取1；Direction代表模糊的方向，单位是角度；Strength代表模糊的移动值，单位为像素；设置完毕可以选中表格套用样式。课后练习课后练习o 填空题填空题o 问答题问答题o 上机操作题上机操作题填空题填空题 （1 1）CSSCSS样式的新建、应用及编辑等操作都是在样式的新建、应用及编辑等操作都是在 在在 中完成的。中完成的。（2 2）选择）选择 菜单命令，或菜单命令，或按按 按按 键可以打开键可以打开“CSSCSS样式样式”面面板。板。（3 3）是是Cascading Style