Dreamweaver课件：第8章 样式表

第8章使用CSS样式表内容提要CSS样式表概述层叠样式应用技巧附加外部样式表的方法CSS滤镜效果应用学习目标学会使用CSS进行简单的页面布局了解CSS面板各功能区的使用方法，掌握附加或新建CSS样式的方法CSS样式表概述CSS（CascadingStyleSheet，级联样式表）样式是网页元素外观属性的集合，是一系列的格式规则，它允许网页设计者定义文本、表格、图像、表单等网页元素的样式。层叠样式应用技巧创建CSS样式样式的定义管理CSS样式应用CSS样式表创建CSS样式CSS样式的新建、应用及编辑等操作都是在“CSS样式”面板中完成的。认识“CSS”样式面板创建CSS样式认识“CSS”样式面板“CSS样式”面板在“设计”面板组中，如果面板组中没有“CSS样式”面板，选择[窗口]中[CSS样式]菜单命令，或按【Shift+F11】键即可打开“CSS样式”面板，如图8-1所示。面板中各按钮的功能如下。：单击该按钮可打开“附加样式表”对话框。选择要链接到或导入到当前文档中的外部样式表。：单击该按钮可新建CSS样式。：单击该按钮可打开“编辑样式表”对话框，在对话框中可对当前文档或外部样式表中的任何样式进行编辑。：选中面板中的样式，再单击该按钮可删除所选的样式，并删除该样式应用于任何元素中的设置。：单击该按钮，可以打开“CSS样式”菜单，如图8-2所示，通过该菜单可以编辑、复制、删除或应用所选中的CSS样式，也可以新建CSS样式。图8-1图8-2创建CSS样式创建CSS样式的具体操作如下。（1）执行下列3种方法之一打开如图7-3所示的“新建CSS样式”对话框。图8-3在“CSS样式”面板中单击按钮。在“CSS样式”窗口中单击鼠标右键，在弹出的快捷菜单中选择“新建”命令。单击按钮，在弹出的“CSS样式”菜单中选择“新建”命令。（2）在“名称”下拉列表框中输入新建CSS样式的文件名。（3）在“选择器类型”栏中选择所定义的样式类型，CSS样式的创建类型有以下3种。：创建自定义样式，选中该单选项可以创建一个应用于文本和文本块的CSS样式。但需要注意的是，在“名称”下拉列表框中输入的自定义样式名称要以英文句点开头，如果没有输入，则Dreamweaver将自动添加。：选中该单选项可以重新定义HTML标签，表示为现有HTML标签赋上新的样式。选中该单选项后“名称”下拉列表框变为“标签”下拉列表框，如图8-4所示。在该下拉列表框中可选择重新定义的标签，如图8-5所示。：使用CSS选择器，表示要对特定的HTML标签组合或含有某个ID属性的所有标签进行重新定义。选中该单选项后“名称”下拉列表框变为“选择器”下拉列表框，如图8-6所示，可在该下拉列表框中选择需要使用的选择器类型，如图8-7所示。（4）在“定义在”栏中选择样式的种类。：选中该单选项，可以定义一个外部链接的CSS样式。：选中该单选项，定义一个仅应用于当前页面的CSS样式。图8-4图8-5图8-6图8-7如果在“定义在”栏中选中了单选项，则会打开“保存样式表文件为”对话框，在该对话框中保存新建的样式表文件，如图8-8所示。若选中单选项，则直接打开如图8-9所示的对话框。（5）在“分类”列表中选择要定义的样式类型，再在右侧设置相应参数，具体的定义方法将在下一节讲解。（6）设置完后单击按钮，完成CSS样式的创建。图8-8图8-9创建了新的样式后，即可在“CSS样式定义”对话框中进行设置，CSS样式有8种，下面分别介绍其设置方法。设置CSS样式类型格式设置CSS样式背景格式设置CSS样式区块格式设置CSS样式方框格式设置CSS样式边框格式设置CSS样式列表格式设置CSS样式定位格式设置CSS样式扩展格式样式的定义设置CSS样式的类型格式可以为页面中的文本加入字体、大小、风格等类型格式，具体操作如下。（1）在“分类”列表中选择“类型”选项，列表右侧就会显示出“类型”选项的参数设置，如图8-10所示。其中各参数含义如下。字体：在该下拉列表框中可以输入字体类型，也可以单击按钮，从下拉列表中选择需要的字体。设置CSS样式类型格式大小：在该下拉列表框中可以直接输入样式文本的字号，或从下拉列表中选择需要的字号，当选择字号后，可以在其右侧的下拉列表框中选择字号的单位。粗细：在该下拉列表框中可输入字体的粗细程度，也可从下拉列表中选择需要的粗细程度。样式：在该下拉列表框中可输入字体的特殊格式，也可以从下拉列表中选择字体的特殊格式。变量：在该下拉列表中可选择字体的变形方式。行高：在该下拉列表中可选择“正常”或“值”选项，当选择“值”选择项时可在右侧的下拉列表框中选择值的单位。大小写：在该下拉列表框中可以输入文本的大小写方式，也可以在下拉列表中选择文本的大小写方式。修饰：在该栏中设置文本的修饰效果，包括、、、、等复选框。颜色：可单击按钮，在打开的颜色列表中选择需要的颜色，也可在文本框中直接输入颜色值。（2）设置完成后，单击按钮即可应用样式，再单击按钮关闭对话框。图8-10若不使用已设置的效果，选中复选框即可。为页面中的元素加入背景格式的具体操作如下。（1）在“分类”列表中选择“背景”选项，其右侧显示出“背景”的参数设置，如图8-11所示。其中各参数含义如下。背景颜色：可单击按钮，在打开的颜色列表中选择需要的颜色，也可在文本框中直接输入颜色值。背景图像：可在该文本框中直接输入背景图像的URL地址，或单击按钮，打开“选择图像源文件”对话框，选择背景图像。设置CSS样式背景格式图8-11如果所选图像不在指定的站点文件中，系统要求将所选图片保存在站点目录中。重复：可在该下拉列表框中输入图像重复放置的方式，也可以在其下拉列表中选择背景图像的重复放置方式。附件：在该下拉列表框中可以输入“固定”或“滚动”来设置该背景图像是固定在原始位置还是可以滚动，同样也可以在下拉列表框中选择。水平位置：在该下拉列表框中可以输入设置背景图像相对于应用样式元素的水平位置，也可在下拉列表中选择。垂直位置：在该下拉列表中可以输入设置背景图像相对于应用样式元素的垂直位置，也可在下拉列表中选择。（2）设置完成后，单击按钮即可应用样式，再单击按钮关闭对话框。在“CSS样式定义”对话框的“区块”类别中可以定义标签和属性的间距和对齐设置。设置区块格式的具体操作如下。（1）在“分类”列表中选择“区块”选项，对话框右侧显示出区块的参数设置，如图8-12所示。其中各参数含义如下。单词间距：在该下拉列表框中可选择单词的间距方式，若选择“值”选项，则在该下拉列表框中输入数值来确定单词的间距，并在右侧的下拉列表中设置数值的单位。设置CSS样式区块格式字母间距：在该下拉列表框中设置字母间的间距。若在列表中选择“值”选项，在右侧的下拉列表中可以设置数值的单位。垂直对齐：在该下拉列表框中可指定元素相对于其父级元素在垂直方向上的对齐方式。也可输入一个数值，然后在右侧的下拉列表中设置数值的单位。文本对齐：该下拉列表框用于指定文本在应用该样式元素中的对齐方式。文本缩进：在该文本框中输入第一行的缩进距离，在右侧的下拉列表中选择数值单位。空格：在该下拉列表框中设置处理空格的方式。显示：在该下拉列表框中选择区块中要显示的格式。（2）设置完成后，单击按钮即可应用样式，再单击按钮关闭对话框。在“CSS样式定义”对话框的“方框”类别中可以定义控制元素在页面上的放置方式和属性，设置方框格式的具体操作如下。（1）在“分类”列表中选择“方框”选项，对话框右侧显示出“方框”选项的参数设置，如图8-13所示。宽和高：在该下拉列表中可指定元素的宽度和高度，也可以输入一个数值，然后在右侧的下拉列表中设置数值的单位。设置CSS样式方框格式图8-12图8-13浮动：在该下拉列表框中设置应用样式元素的浮动位置。利用该参数可以将元素移到页面之外，如在下拉列表框中选择“右对齐”选项，则将元素放置到页面右侧的空白处，同样若选择“左对齐”选项则将元素放置到页面左侧的空白处。清除：在该下拉列表框中可以设置层不允许在应用样式元素的某个侧边。如在下拉列表框中选择“左对齐”选项，则层不能出现在应用样式元素的左侧。同样如选择“右对齐”选项，则层不能出现在应用样式的右侧。如果层在设置该样式前已在元素的某侧，而又设置了层不能出现在该侧边，则应用该样式的元素将会自动移开。填充：在该栏中可以设置应用样式元素的内容和元素的边框之间的空白大小，如果没有边框，则为与边距之间的空白大小。如选中复选框就可将“上”下拉列表框中的设置应用于元素的所有边，如图7-13所示。若取消该复选框的选中状态，就可分别在“上”、“右”、“下”和“左”下拉列表框中设置对应边的空白大小，如图8-14所示。边界：在该栏中可以设置应用样式的元素边界和其他元素之间的空白大小。如选中复选框就可将“上”下拉列表框中的设置应用于元素的所有边，如图7-13所示。若取消该复选框的选中状态，就可分别在“上”、“右”、“下”和“左”下拉列表框中设置对应边的空白大小。在其右侧的下拉列表框中可选择值的单位，如图8-14所示。（2）设置完成后，单击按钮即可应用样式，再单击按钮关闭对话框。在“CSS样式定义”对话框的“边框”类别可以定义元素周围边框的设置，如宽度、颜色和样式等，设置边框格式的具体操作如下。（1）在“分类”列表中选择“边框”选项，列表右侧显示出“边框”选项的参数设置，如图8-15所示。其中各参数含义如下。样式：在该栏中设置边框的样式外观，该栏中各项下拉列表框中的选项都相同，如图8-16所示。若选中复选框，就可将“上”下拉列表框中的设置应用于元素的所有边。若取消该复选框的选中状态，就可分别在“上”、“右”、“下”和“左”下拉列表框中设置对应边的边框格式。设置CSS样式边框格式宽度：该栏中设置元素边框的粗细。其设置方法与“样式”栏类似。颜色：该栏中设置元素边框的颜色。其设置方法与“样式”栏类似。（2）设置完成后，单击按钮即可应用样式，再单击按钮关闭对话框。图8-14图8-15在“CSS样式定义”对话框的“列表”类别中可以定义列表标签的列表设置，如项目符号大小和类型，设置列表格式的具体操作如下。（1）在“分类”列表中选择“列表”选项，对话框右侧显示出“列表”选项的参数设置，如图8-17所示。其中各参数含义如下。类型：在该下拉列表框中可以选择无序列表的项目符号类型及有序列表的编号类型。设置CSS样式列表格式项目符号图像：在该下拉列表框中指定图像作为无序列表的项目符号，可直接输入指定图像的路径，也可单击按钮来选择作为项目符号的图像，如图8-18所示。位置：在该下拉列表框中可以选择列表文本是否换行和缩进。如选择“内”选项，则当列表过长而自动换行时，不缩进，若选择“外”选项，则当列表过长而自动换行时以缩进方式显示。（2）设置完成后，单击按钮即可应用样式，再单击按钮关闭对话框。图8-16图8-17在“CSS样式定义”对话框的“定位”类别中可以定义层的默认标签列，并将标签或所选文本块更改为新层。设置CSS样式定位格式在“CSS样式定义”对话框的“扩展”格式中可以设置分页和视觉效果选项。设置的具体操作如下。（1）在“分类”列表中选择“扩展”选项，对话框右侧显示出“扩展”选项的参数设置，如图8-20所示。其中各参数含义如下。分页：在该栏中可以设置在打印页面时强制分页的位置。在“之前”和“之后”下拉列表框中，可以分别设置分页前和分页后位置。设置CSS样式扩展格式视觉效果：在该栏中可以设置样式的可视效果，在“光标”下拉列表框中可选择当鼠标光标位于样式所控制对象上时光标的图像；在“过滤器”下拉列表框中可以选择样式所控制对象的特殊效果；也就是通常讲的CSS滤镜效果，如图8-21所示。定位：在该栏中可以将层定位，层在固定的位置显示。（2）设置完成后，单击按钮即可应用样式，再单击按钮关闭对话框。图8-20图8-21管理CSS样式可以对CSS样式进行删除、复制、重命名、链接等操作