中文版_dreamweaver_cs6网页设计教程_.ppt

2 第 5 章 CSS 样式 本章主要内容 ? CSS 概述。 ? 创建和使用 CSS 样式。 ? 设置 CSS 样式参数。 本章重点 ? 如何使用 CSS 样式。 ? 如何设置 CSS 样式的参数。 3 5.1 CSS 样式概述 CSS(Cascading Style Sheet) 即层叠样式表，在现在的网页中 应用相当广泛。使用 CSS 样式可以设置页面元素的相关属性， 例如字体和表格等页面元素的大小、颜色、边框等。 CSS 样式表可以同时控制多个文档的内容格式，并且当 CSS 样 式表更新或修改时，所有应用此 CSS 样式表的页面都将自动更 新。 Dreamweaver CS6 提供了强大的 CSS 编辑和管理功能，在文档 中可以很轻松地创建并使用 CSS 样式表。 在 Dreamweaver CS6 中可以定义以下三种 CSS 样式。 ? 自定义 CSS 样式：将自定义的 CSS 样式应用到任何范围或任何文本段中。 ? HTML 标签样式：重新定义标签的格式，当创建或修改标签的 CSS 样式时， 所有以该标签格式化的文本都将更新。 ? CSS 选择器样式：重新定义标签的特定格式或包含某指定属性的所有标 签的格式。 4 5.1 CSS 样式概述 按照定义 CSS 样式的方式， 可将 CSS 样式在页面中的使 用方式分为以下三种。 ? 1. 局部套用 CSS 样式 ? 2. 在页面开头定义 ? 3. 链接外部样式表 5 5.2 CSS 样式的简单操作 CSS 在定义页面元素 格式方面有着非同小可 的作用，下面介绍如何 创建和使用强大的 CSS 样式。 6 5.2.1 认识“ CSS 样式”面板 “ CSS 样式”面板提供了编辑和应用 CSS 样式 的工作环境。依次选择菜单中的“窗口” |“CSS 样式”命令，或单击“设计”面板上的小三角 形，将“设计”面板打开，该面板上的第一项 就是“ CSS 样式”面板，如图 5-1 所示。 “ CSS 样式”面板的底部有五个功能按钮，如 图 5-2 所示。 7 5.2.2 创建 CSS 样式 创建新的 CSS 样式的操作步骤如下。 ? (1) 在“ CSS 样式”面板中单击按钮， 或者右击该面板，在弹出的快捷菜单中 选择“新建”命令，打开“新建 CSS 规 则”对话框，如图 5-4 所示。 ? (2) 在“新建 CSS 规则”对话框中进 行设置 ? (3) 如果是创建外部样式表，则单击 “确定”按钮后弹出如图 5-5 所示的对话 框，将所新建样式表进行保存即可。 ? (4) 打开“ CSS 规则定义”对话框， 设置相关参数，即生成 CSS 样式文件。 8 5.2.3 附加外部 CSS 样式表 附加外部 CSS 样式表的操作步骤如下。 ? (1) 打开 CSS 样式面板。 ? (2) 用右键单击 CSS 样式面板，在弹出的快捷菜单中选择 “附加样式表”命令，打开“链接外部样式表”对话框，如图 5-6 所示。 ? (3) 在对话框中的“文件 /URL” 下拉列表框中输入所需的文 件，或者单击其右侧的“浏览”按钮，在弹出的对话框中查找 并选择所要附加的文件。 ? (4) 在“添加为”选项组中选择“链接”或“导入”选项， 指定和创建用于将外部 CSS 样式表附加到文档中的标签方式。 ? 链接 ? 导入 ? (5) 设置完成后，单击“确定”按钮，即可将所选择的 CSS 样式表附加到当前文档，在 CSS 样式面板中显示该 CSS 样 式表。 9 5.3 设置 CSS 样式参数 打开“ CSS 规则定 义”对话框，在该对 话框的“分类”列表 中选择不同的类型， 对 CSS 设置不同的参 10 5.3.1 设置“类型”参数 在“ CSS 规则定义”对话框的“分类”列表框 中选择“类型”选项，设置选定的 CSS 样式的 类型参数，如图 5-7 所示。 11 5.3.1 设置“类型”参数 在“类型”界面中可 以对下列参数进行设置。 ? 1. 字体属性 ? 2. 文本属性 12 5.3.2 设置“背景”参数 在“分类”列表框中选择“背景”选项，设置 选定的 CSS 样式的“背景”参数，如图 5-8 所示。 在“背景”界面中可以对下列参数进行设置。 ? 1. 背景色 ? 2. 背景图像 13 5.3.3 设置“区块”参数 在“分类”列表框中选择“区块”选项，设置 CSS 样式的区块