Dreamweaver8案例教程 第8章 CSS样式表.pptVIP

?2003. 苏玉雄 1-* 第 8 章  CSS样式表 本章学习目标 CSS样式简介 8.1 创建CSS样式 8.2 编辑CSS样式 8.3 设置CSS样式参数 8.6 链接到CSS样式表 8.4 导出CSS样式表 8.5 8.1 CSS样式简介 CSS是Cascading Style Sheets（层叠样式表）的简称。更多的人把它称为样式表。顾名思义，它是一种设计网页样式的工具。借助CSS的强大功能，网页将在我们丰富的想象力下千变万化。 层叠样式表 (CSS) 是一系列格式设置规则，它们控制Web 页面内容的外观。使用 CSS 设置页面格式时，内容与表现形式是相互分开的。页面内容（HTML 代码）位于自身的 HTML 文件中，而定义代码表现形式的 CSS 规则位于另一个文件（外部样式表）或 HTML 文档的另一部分（通常为 head 部分）中。使用 CSS 可以非常灵活并更好地控制页面的外观，从精确的布局定位到特定的字体和样式等。 8.1 CSS样式简介 术语“层叠”是指对同一个元素或 Web 页面应用多个样式的能力。例如，可以创建一个 CSS 规则来应用颜色，创建另一个规则来应用边距，然后将两者应用于一个页面中的同一文本。所定义的样式“层叠”到我们的 Web 页面上的元素，并最终创建出我们想要的设计。 8.2 创建CSS样式 使用CSS样式可以使网页的风格协调统一。在本节中，我们将介绍CSS样式的创建和应用方法。 返回 8.2.1 打开CSS样式面板 单击“窗口”|“CSS样式”命令或按Shift+F11快捷键，即可打开CSS样式面板，如图8-1所示。 图8-1 CSS样式面板 8.2.2 创建新的CSS样式 （1）单击“窗口”|“CSS样式”，打开CSS样式面板。如图8-1所示。 （2）单击“CSS样式”面板右下角的“新建CSS规则”按钮，打开“新建CSS规则”对话框，如图8-2所示。 图8-2 新建CSS规则对话框 8.2.2 创建新的CSS样式 （3）为新建的CSS样式输入或选择名称、标签或选择器。 （4）在“定义在”区域中选择定义的样式位置，可以是“新建样式表文件”或“仅对该文档”。设置完毕，单击“确定”按钮即可。 （5）“CSS规则定义”对话框中设置CSS规则定义。主要分为类型、背景、区块、方框、边框、列表、定位和扩展8项。每个选项都可以做不同方面的定义，可以根据需要进行设定。定义完毕后，单击“确定”按钮，完成创建CSS样式。 8.2.3 应用自定义的CSS样式 创建了CSS样式后，在文档窗口中选中将要应用该样式的文本，然后再启动CSS样式面板，选择要应用的样式即可，如图8-3所示。 图8-3 应用自定义的CSS样式 8.3 编辑CSS样式 保存了新的CSS样式后，即可打开CSS编辑器，如图8-8所示。在该对话框中我们可以详细定制样式的格式。CSS样式表可以定义包括许多类型的格式，如文本，背景，边框等，下面我们将一一进行介绍。 返回 8.3.1 文本的定义面板 从“CSS规则定义”对话框的左边目录列表中选择“类型”，则在右边的区域可以设置有关的格式。如字体、大小、样式、行高、修饰、粗细、变体、大小写、颜色等。 8.3.2 背景的定义面板 从“CSS规则定义”对话框的左边目录列表中选择“背景”，则在右边的区域可以设置CSS样式的背景格式，如图8-4所示。 图8-4 背景的定义面板 8.3.3 区块的定义面板 从“CSS规则定义”对话框的左边目录列表中选择“区块”，则在右边的区域可以设置有关CSS样式的块格式，如图8-5所示。 图8-5 区块的定义面板 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规则定义”对话框的左边目录列表中选择“位置”，则在右边的区域可以设置有关CSS样式的方框格式，如图8-9所示。 图8-9 位置的定义面板 8.3.8 CSS的扩展面板 从“CSS规则定义”对话框的左边目录列表中选择“扩展”，则在右边的区域可