Dreamweaver课件：第8章 样式表

1、第8章 使用CSS样式表内容提要要CSS样式表概概述层叠样式式应用技技巧附加外部部样式表表的方法法CSS滤镜效果果应用学习目标标学会使用用CSS进行简单单的页面面布局了解CSS面板各功功能区的的使用方方法，掌掌握附加加或新建建CSS样式的方方法CSS样式表概概述CSS（Cascading Style Sheet，级联联样式表表）样式式是网页页元素外外观属性性的集合合，是一一系列的的格式规规则，它它允许网网页设计计者定义义文本、表格、图像、表单等等网页元元素的样样式。层叠样式式应用技技巧创建CSS样式样式的定定义管理CSS样式应用CSS样式表创建CSS样式CSS样式的新新建、应应用及编编辑等操操

2、作都是是在“CSS样式”面面板中完完成的。认识“CSS”样式面板板创建CSS样式认识“CSS”样式面板板“CSS样式”面面板在“设计”面板组组中，如如果面板板组中没没有“CSS样式”面面板，选选择窗口中CSS样式菜单命令令，或按按【Shift+F11】键即可打打开“CSS样式”面面板，如如图8-1所示。面板中各各按钮的的功能如如下。：单击该该按钮可可打开“附加样样式表”对话框框。选择择要链接接到或导导入到当当前文档档中的外外部样式式表。：单击该该按钮可可新建CSS样式。：单击该该按钮可可打开“编辑样样式表”对话框框，在对对话框中中可对当当前文档档或外部部样式表表中的任任何样式式进行编编辑。：选

3、中面面板中的的样式，再单击击该按钮钮可删除除所选的的样式，并删除除该样式式应用于于任何元元素中的的设置。：单击该该按钮，可以打打开“CSS样式”菜菜单，如如图8-2所示，通通过该菜菜单可以以编辑、复制、删除或或应用所所选中的的CSS样式，也也可以新新建CSS样式。图8-1图8-2创建CSS样式创建CSS样式的具具体操作作如下。（1）执行下下列3种方法之之一打开开如图7-3所示的“新建CSS样式”对对话框。图8-3在“CSS样式”面面板中单单击按按钮钮。在“CSS样式”窗窗口中单单击鼠标标右键，在弹出出的快捷捷菜单中中选择“新建”命令。单击按按钮钮，在弹弹出的“CSS样式”菜菜单中选选择“新新建

4、”命命令。（2）在“名名称”下下拉列表表框中输输入新建建CSS样式的文文件名。（3）在“选选择器类类型”栏栏中选择择所定义义的样式式类型，CSS样式的创创建类型型有以下下3种。：创建自自定义样样式，选选中该单单选项可可以创建建一个应应用于文文本和文文本块的的CSS样式。但但需要注注意的是是，在“名称”下拉列列表框中中输入的的自定义义样式名名称要以以英文句句点开头头，如果果没有输输入，则则Dreamweaver将自动添添加。：选中该该单选项项可以重重新定义义HTML标签，表表示为现现有HTML标签赋上上新的样样式。选选中该单单选项后后“名称称”下拉拉列表框框变为“标签”下拉列列表框，如图8-4所

5、示。在在该下拉拉列表框框中可选选择重新新定义的的标签，如图8-5所示。：使用CSS选择器，表示要要对特定定的HTML标签组合合或含有有某个ID属性的所所有标签签进行重重新定义义。选中中该单选选项后“名称”下拉列列表框变变为“选选择器”下拉列列表框，如图8-6所示，可可在该下下拉列表表框中选选择需要要使用的的选择器器类型，如图8-7所示。（4）在“定定义在”栏中选选择样式式的种类类。：选中该该单选项项，可以以定义一一个外部部链接的的CSS样式。：选中该该单选项项，定义义一个仅仅应用于于当前页页面的CSS样式。图8-4图8-5图8-6图8-7如果在“定义在在”栏中中选中了了单单选项，则会打打开“保

6、保存样式式表文件件为”对对话框，在该对对话框中中保存新新建的样样式表文文件，如如图8-8所示。若选中单单选项，则直接接打开如如图8-9所示的对对话框。（5）在“分分类”列列表中选选择要定定义的样样式类型型，再在在右侧设设置相应应参数，具体的的定义方方法将在在下一节节讲解。（6）设置完完后单击击 按钮钮，完成成CSS样式的创创建。图8-8图8-9创建了新新的样式式后，即即可在“CSS样式定义义”对话话框中进进行设置置，CSS样式有8种，下面面分别介介绍其设设置方法法。设置CSS样式类型型格式设置CSS样式背景景格式设置CSS样式区块块格式设置CSS样式方框框格式设置CSS样式边框框格式设置CSS

7、样式列表表格式设置CSS样式定位位格式设置CSS样式扩展展格式样式的定定义设置CSS样式的类类型格式式可以为为页面中中的文本本加入字字体、大大小、风风格等类类型格式式，具体体操作如如下。（1）在“分分类”列列表中选选择“类类型”选选项，列列表右侧侧就会显显示出“类型”选项的的参数设设置，如如图8-10所示。其其中各参参数含义义如下。字体：在在该下拉拉列表框框中可以以输入字字体类型型，也可可以单击击按按钮，从下拉拉列表中中选择需需要的字字体。设置CSS样式类型型格式大小：在在该下拉拉列表框框中可以以直接输输入样式式文本的的字号，或从下下拉列表表中选择择需要的的字号，当选择择字号后后，可以以在其右

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

9、括、等等复选选框。颜色：可可单击按按钮钮，在打打开的颜颜色列表表中选择择需要的的颜色，也可在在文本框框中直接接输入颜颜色值。（2）设置完完成后，单击按按钮钮即可应应用样式式，再单单击按按钮钮关闭对对话框。图8-10若不使用用已设置置的效果果，选中中复复选框框即可。为页面中中的元素素加入背背景格式式的具体体操作如如下。（1）在“分分类”列列表中选选择“背背景”选选项，其其右侧显显示出“背景”的参数数设置，如图8-11所示。其其中各参参数含义义如下。背景颜色色：可单单击按按钮，在打开开的颜色色列表中中选择需需要的颜颜色，也也可在文文本框中中直接输输入颜色色值。背景图像像：可在在该文本本框中直直接输

10、入入背景图图像的URL地址，或或单击按按钮，打打开“选选择图像像源文件件”对话话框，选选择背景景图像。设置CSS样式背景景格式图8-11如果所选选图像不不在指定定的站点点文件中中，系统统要求将将所选图图片保存存在站点点目录中中。重复：可可在该下下拉列表表框中输输入图像像重复放放置的方方式，也也可以在在其下拉拉列表中中选择背背景图像像的重复复放置方方式。附件：在在该下拉拉列表框框中可以以输入“固定”或“滚滚动”来来设置该该背景图图像是固固定在原原始位置置还是可可以滚动动，同样样也可以以在下拉拉列表框框中选择择。水平位置置：在该该下拉列列表框中中可以输输入设置置背景图图像相对对于应用用样式元元素的

11、水水平位置置，也可可在下拉拉列表中中选择。垂直位置置：在该该下拉列列表中可可以输入入设置背背景图像像相对于于应用样样式元素素的垂直直位置，也可在在下拉列列表中选选择。（2）设置完完成后，单击按按钮钮即可应应用样式式，再单单击按按钮关关闭对话话框。在“CSS样式定义义”对话话框的“区块”类别中中可以定定义标签签和属性性的间距距和对齐齐设置。设置区区块格式式的具体体操作如如下。（1）在“分分类”列列表中选选择“区区块”选选项，对对话框右右侧显示示出区块块的参数数设置，如图8-12所示。其其中各参参数含义义如下。单词间距距：在该该下拉列列表框中中可选择择单词的的间距方方式，若若选择“值”选选项，则则

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

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

14、单位。设置CSS样式方框框格式图8-12图8-13浮动：在在该下拉拉列表框框中设置置应用样样式元素素的浮动动位置。利用该该参数可可以将元元素移到到页面之之外，如如在下拉拉列表框框中选择择“右对对齐”选选项，则则将元素素放置到到页面右右侧的空空白处，同样若若选择“左对齐齐”选项项则将元元素放置置到页面面左侧的的空白处处。清除：在在该下拉拉列表框框中可以以设置层层不允许许在应用用样式元元素的某某个侧边边。如在在下拉列列表框中中选择“左对齐齐”选项项，则层层不能出出现在应应用样式式元素的的左侧。同样如如选择“右对齐齐”选项项，则层层不能出出现在应应用样式式的右侧侧。如果果层在设设置该样样式前已已在元

15、素素的某侧侧，而又又设置了了层不能能出现在在该侧边边，则应应用该样样式的元元素将会会自动移移开。填充：在在该栏中中可以设设置应用用样式元元素的内内容和元元素的边边框之间间的空白白大小，如果没没有边框框，则为为与边距距之间的的空白大大小。如如选中复复选框框就可将将“上”下拉列列表框中中的设置置应用于于元素的的所有边边，如图图7-13所示。若若取消该该复选框框的选中中状态，就可分分别在“上”、“右”、“下下”和“左”下下拉列表表框中设设置对应应边的空空白大小小，如图8-14所示。边界：在在该栏中中可以设设置应用用样式的的元素边边界和其其他元素素之间的的空白大大小。如如选中复复选框框就可将将“上”下

16、拉列列表框中中的设置置应用于于元素的的所有边边，如图图7-13所示。若若取消该该复选框框的选中中状态，就可分分别在“上”、“右”、“下下”和“左”下下拉列表表框中设设置对应应边的空空白大小小。在其其右侧的的下拉列列表框中中可选择择值的单单位，如如图8-14所示。（2）设置完完成后，单击按按钮钮即可应应用样式式，再单单击按按钮钮关闭对对话框。在“CSS样式定义义”对话话框的“边框”类别可可以定义义元素周周围边框框的设置置，如宽宽度、颜颜色和样样式等，设置边边框格式式的具体体操作如如下。（1）在“分分类”列列表中选选择“边边框”选选项，列列表右侧侧显示出出“边框框”选项项的参数数设置，如图8-15

17、所示。其其中各参参数含义义如下。样式：在在该栏中中设置边边框的样样式外观观，该栏栏中各项项下拉列列表框中中的选项项都相同同，如图8-16所示。若若选中复选框，就可将将“上”下拉列列表框中中的设置置应用于于元素的的所有边边。若取取消该复复选框的的选中状状态，就就可分别别在“上上”、“右”、“下”和“左左”下拉拉列表框框中设置置对应边边的边框框格式。设置CSS样式边框框格式宽度：该该栏中设设置元素素边框的的粗细。其设置置方法与与“样式式”栏类类似。颜色：该该栏中设设置元素素边框的的颜色。其设置置方法与与“样式式”栏类类似。（2）设置完完成后，单击按按钮钮即可应应用样式式，再单单击按按钮钮关闭对对话

18、框。图8-14图8-15在“CSS样式定义义”对话话框的“列表”类别中中可以定定义列表表标签的的列表设设置，如如项目符符号大小小和类型型，设置置列表格格式的具具体操作作如下。（1）在“分分类”列列表中选选择“列列表”选选项，对对话框右右侧显示示出“列列表”选选项的参参数设置置，如图8-17所示。其其中各参参数含义义如下。类型：在在该下拉拉列表框框中可以以选择无无序列表表的项目目符号类类型及有有序列表表的编号号类型。设置CSS样式列表表格式项目符号号图像：在该下下拉列表表框中指指定图像像作为无无序列表表的项目目符号，可直接接输入指指定图像像的路径径，也可可单击按按钮来选选择作为为项目符符号的图图

19、像，如如图8-18所示。位置：在在该下拉拉列表框框中可以以选择列列表文本本是否换换行和缩缩进。如如选择“内”选选项，则则当列表表过长而而自动换换行时，不缩进进，若选选择“外外”选项项，则当当列表过过长而自自动换行行时以缩缩进方式式显示。（2）设置完完成后，单击按按钮钮即可应应用样式式，再单单击按按钮钮关闭对对话框。图8-16图8-17在“CSS样式定义义”对话话框的“定位”类别中中可以定定义层的的默认标标签列，并将标标签或所所选文本本块更改改为新层层。设置CSS样式定位位格式在“CSS样式定义义”对话话框的“扩展”格式中中可以设设置分页页和视觉觉效果选选项。设设置的具具体操作作如下。（1）在“

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

21、：在在该栏中中可以将将层定位位，层在在固定的的位置显显示。（2）设置完完成后，单击按按钮钮即可应应用样式式，再单单击按按钮钮关闭对对话框。图8-20图8-21管理CSS样式可以对CSS样式进行行删除、复制、重命名名、链接接等操作作。编辑CSS样式删除CSS样式复制CSS样式CSS样式表重重命名链接外部部CSS样式表编辑CSS样式创建了CSS样式后，还可以以对已有有的样式式进行编编辑，修修改样式式中的某某些参数数。下面面对已创创建样式式进行编编辑，具具体操作作如下。（1）在“CSS样式”面面板中，单击面面板底部部的按按钮，打开如如图8-22所示的“”对话框。（2）在列表表中选中中要编辑辑的样式式

22、，单击击按按钮打打开“CSS样式定义义”对话话框，然然后按创创建新样样式的方方法修改改需要的的参数，修改完完成后单单击按按钮返返回“编编辑样式式表”对对话框。（3）单击按按钮钮完成样样式的编编辑。图8-22也可在CSS样式面板板中直接接选取要要编辑的的样式，再单击击面板底底部按按钮，直接打打开“CSS样式定义义”对话话框进行行编辑。删除CSS样式要删除列列表中的的某些样样式，具具体操作作如下。（1）打开“”对话框。在样式式列表中中选中要要删除的的样式，如图8-23所示。（2）单击对对话框中中的按按钮即即可将选选中的样样式删除除，删除除后如图8-24所示。图8-23图8-24复制CSS样式如果要

23、以以一个已已经创建建的CSS样式为基基础，创创建另一一个CSS样式，此此时可复复制CSS样式后再再定义复复制的样样式。复复制CSS样式的具具体操作作如下。（1）打开“”对话框，在样式式列表框框中选中中要复制制的样式式，单击击按钮打开开“重制制CSS样式”对对话框，如图7-25所示。（2）在“名名称”下下拉列表表框中设设置复制制样式的的名称，并根据据需要在在“选择择器类型型”栏和和“定义义在”栏栏中重新新选择样样式的类类型。（3）根据“定义在在”栏中中选中的的单选项项不同，会有不不同的操操作，与与创建新新样式一一样，这这里不再再赘述，复制后后如图8-26所示。图8-25图8-26CSS样式表重重

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

25、指定外部部样式表表的路径径，或单单击按按钮打打开“选选择样式式表文件件”对话话框，如如图8-29所示。（3）选择了了要链接接的样式式表文件件后，单单击按按钮返返回“链链接外部部样式表表”对话话框，如如图8-30所示。（4）单击按按钮钮关闭对对话框，则创建建的外部部链接样样式表显显示在“CSS样式”面面板中，如图8-31所示。图8-31图8-29图8-30CSS滤镜效果果应用CSS滤镜作为为CSS的一个新新的扩展展，能把把可视化化的滤镜镜和转换换效果添添加到一一个标准准的HTML元素上，使应用用样式的的对象产产生模糊糊、反转转、发光光等效果果。在Dreamweaver中，可直直接在对对话框中中添

26、加滤滤镜的参参数，而而不用编编写复杂杂的代码码。CSS滤镜效果果应用的的具体操操作如下下。（1）创建一一个新的的CSS样式。（2）在“分分类”列列表中选选择“扩扩展”选选项，对对话框右右侧显示示出“扩扩展”选选项的参参数设置置。（3）在“视视觉效果果”栏中中的“过过滤器”下拉列列表框中中选择样样式所控控制对象象的特殊殊效果。也就是是通常讲讲的CSS滤镜效果果。如图8-35所示。各各个过滤滤器参数数的含义义如下。Alpha：该过滤器器把对象象与背景景混合，通俗地地讲就是是对象的的透明度度。可以以通过各各个参数数的设置置来控制制透明的的程度。各参数数的含义义如表8-1所示。图8-35表8-1Ble

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

28、-5所示。表8-5FlipH：该过滤器器用于对对象的水水平翻转转效果，没有参参数，直直接使用用即可。FlipV：该过滤器器用于对对象的垂垂直翻转转效果，没有参参数，直直接使用用即可。Glow：该过滤器器用于设设置对象象边缘的的发光效效果。可可以通过过各个参参数的设设置来控控制发光光的颜色色和强弱弱等级。各参数数的含义义如表8-6所示。表8-6Gray：该过滤器器用于将将图片对对象变为为灰度图图，没有有参数，直接使使用即可可。Invert：该过滤器器可以把把对象的的可视化化属性全全部翻转转，其中中包括颜颜色、饱饱和度和和亮度值值，这就就是俗称称的底片片或者负负片效果果，同样样没有参参数，直直接使用用即可。Light：该过滤器器使对象象产生一一种模拟拟的投射射效果。该过滤滤器也是是一种动动态过滤滤器，它它提供了了类似于于函数功功能的方方法，可可以通过过调用的的方法来来设置或或改变其其参数。Mask：该过滤器器按照指指定颜色色为对象象产生类类似蒙版版的效果果，通俗俗地讲就就像隔着着一层有有色玻璃璃来看这这个对象象，一般般适用于于图片对对象。其其参数的的含义如如表8-7所示。RevealTrans：该过滤器器也是一一种动态态过滤器器，处理理对象之之间的淡淡入或淡淡出效果果外，还还提供了了更多的的图片