Dreamweaver 8案例教程教学课件苏玉雄第8章.ppt

《Dreamweaver 8案例教程教学课件苏玉雄第8章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第8章CSS样式表本章学习目标CSS样式简介8.1创建CSS样式8.2编辑CSS样式8.3设置CSS样式参数8.6链接到CSS样式表8.4导出CSS样式表8.58.1CSS样式简介CSS是CascadingStyleSheets（层叠样式表）的简称。更多的人把它称为样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在我们丰富的想象力下千变万化。层叠样式表(CSS)是一系列格式设置规则，它们控制Web页面内容的外观。使用CSS设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML代码）位于自身的HTML文件中，而定义代码表现形

2、式的CSS规则位于另一个文件（外部样式表）或HTML文档的另一部分（通常为部分）中。使用CSS可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。8.1CSS样式简介术语“层叠”是指对同一个元素或Web页面应用多个样式的能力。例如，可以创建一个CSS规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到我们的Web页面上的元素，并最终创建出我们想要的设计。8.2创建CSS样式使用CSS样式可以使网页的风格协调统一。在本节中，我们将介绍CSS样式的创建和应用方法。返回8.2.1

3、打开CSS样式面板单击“窗口”

4、“CSS样式”命令或按Shift+F11快捷键，即可打开CSS样式面板，如图8-1所示。图8-1CSS样式面板8.2.2创建新的CSS样式（1）单击“窗口”

5、“CSS样式”，打开CSS样式面板。如图8-1所示。（2）单击“CSS样式”面板右下角的“新建CSS规则”按钮，打开“新建CSS规则”对话框，如图8-2所示。图8-2新建CSS规则对话框8.2.2创建新的CSS样式（3）为新建的CSS样式输入或选择名称、标签或选择器。（4）在“定义在”区域中选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。设置完毕，单击“确

6、定”按钮即可。（5）“CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、区块、方框、边框、列表、定位和扩展8项。每个选项都可以做不同方面的定义，可以根据需要进行设定。定义完毕后，单击“确定”按钮，完成创建CSS样式。8.2.3应用自定义的CSS样式创建了CSS样式后，在文档窗口中选中将要应用该样式的文本，然后再启动CSS样式面板，选择要应用的样式即可，如图8-3所示。图8-3应用自定义的CSS样式8.3编辑CSS样式保存了新的CSS样式后，即可打开CSS编辑器，如图8-8所示。在该对话框中我们可以详细定制样式的格式。CSS样式表可以定义包括许

7、多类型的格式，如文本，背景，边框等，下面我们将一一进行介绍。返回8.3.1文本的定义面板从“CSS规则定义”对话框的左边目录列表中选择“类型”，则在右边的区域可以设置有关的格式。如字体、大小、样式、行高、修饰、粗细、变体、大小写、颜色等。8.3.2背景的定义面板从“CSS规则定义”对话框的左边目录列表中选择“背景”，则在右边的区域可以设置CSS样式的背景格式，如图8-4所示。图8-4背景的定义面板8.3.3区块的定义面板从“CSS规则定义”对话框的左边目录列表中选择“区块”，则在右边的区域可以设置有关CSS样式的块格式，如图8-5所示。图8-5区块的定义面

8、板8.3.4方框的定义面板从“CSS规则定义”对话框的左边目录列表中选择“方块”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-6所示。图8-6方框的定义面板8.3.5边框的定义面板从“CSS规则定义”对话框的左边目录列表中选择“边框”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-7所示。图8-7边框的定义面板8.3.6列表的定义面板从“CSS规则定义”对话框的左边目录列表中选择“列表”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-8所示。图8-8列表的定义面板8.3.7位置的定义面板从“CSS规则定义”对话框的左边目录列

9、表中选择“位置”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-9所示。图8-9位置的定义面板8.3.8CSS的扩展面板从“CSS规则定义”对话框的左边目录列表中选择“扩展”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-10所示。图8-10CSS的扩展面板8.4链接到CSS样式表方法一：在CSS样式面板中单击“附加样式表”按钮，打开“链接外部样式表”对话框，如图8-11所示。方法二：单击“文本”

10、“CSS样式”

11、“附加样式表”菜单项，也可以打开“链接外部样式表”对话框。返回图8-11链接外部样式表对话框8.5导出CSS样式表方法一：单

12、击“文件”

13、“导出”

14、“CSS样式”菜单项，打开“导出样式为CSS