《中文Dreamweaver CS5网页设计 教学课件 ppt 作者 沈大林 张伦_ PPT 第5章 CSS样式和DIV标签》由会员分享，可在线阅读，更多相关《中文Dreamweaver CS5网页设计 教学课件 ppt 作者 沈大林 张伦_ PPT 第5章 CSS样式和DIV标签（9页珍藏版）》请在金锄头文库上搜索。
1、,71,第 5 章 CSS 样 式 和 DIV 标 签 第 5.1 节 CSS 样式 在设计网页时，常常需要对网页中各种对象的属性进行设置，通常网站中众多网页内会 有许多相同属性的对象，例如，相同颜色、大小、字体的文字，同样粗细的图像边框等。如 果对这些相同的元素进行逐一的属性设置，会大大增加工作量，而且修改也很繁琐。为了简 化 这 项 工 作 ，就 需 要 使 用 CSS 样 式 表 ， 它 可 以 对 页 面 布 局 、背 景 、字 体 大 小 、颜 色 、表 格 等 属 性 进 行 统 一 的 设 置 ， 然 后 再 应 用 于 页 面 各 个 相 应 的 对 象 。 CSS （ Cas
2、cading Style Sheet ， 即 层 叠 样 式 表 ） 技 术 是 一 种 格 式 化 网 页 的 标 准 方 式 ， 它 通 过 设 置 CSS 属 性 使 网 页 元 素 对 象 获 得 不 同 的 效 果 。在 定 义 了 一 个 CSS 样 式 后 ，就 可 以 将 它 应 用 于 网 页 内 不 同 的 元 素 ，使 这 些 元 素 对 象 具 有 相 同 的 属 性 ，在 修 改 CSS 样 式 后 ，所 有 应 用 了 该 CSS 样 式 的 网 页 元 素 的 属 性 会 随 之 一 同 被 修 改 。 另 外 ， 相 对 于 HTML 标 记 符 而 言 ， C
3、SS 样 式 属 性 提 供 了 更 多 的 格 式 设 置 功 能 。例 如 ，可 以 通 过 CSS 样 式 属 性 的 设 置 将 链 接 文 字 的 下 划 线 去 掉 ，给 文 字 添 加 阴 影 ，为 列 表 指 定 图 像 作 为 项 目 符 号 等 。由 于 CSS 具 有 上 述 这 些 优 点 ， 所 以 它 已 经 被 广 泛 用 于 网 页 的 设 计 中 。 5.1.1 创 建 和 应 用 CSS 样 式 1 了 解 “ CSS 样 式 ” 面 板 单 击 “ 窗 口 ” “ CSS 样 式 ” 命 令 ， 调 出 “ CSS 样 式 ” 面 板 ， 单 击 按 下
4、“ 全 部 ” 按 钮 后 的“ CSS 样 式 ”面 板 如 图 511 所 示 ，单 击 按 下“ 当 前 ”按 钮 后 的“ CSS 样 式 ”面 板 如 图 512 所 示 。“ CSS 样 式 ” 面 板 也 叫 CSS 样 式 表 编 辑 器 。 （ 1 ） 窗 格 ： 在 “ 全 部 ” 模 式 下 ，“ CSS 样 式 ” 面 板 显 示 “ 所 有 规 则 ” 窗 格 和 “ 属 性 ” 窗 格。可以通过拖曳窗格之间的边框调整任意窗格的大小，通过拖曳分隔线调整列的大小。 “所有规则”窗格显示当前文档中定义的规则（样式表的名称）以及附加到当前文档的 样 式 表 中 定 义 的
5、所 有 规 则 （ 外 部 CSS 样 式 文 件 的 名 称 ）。 该 窗 格 内 如 果 显 示 “ 未 定 义 样 式 ” 选 项 ， 则 表 示 没 有 定 义 CSS 样 式 。 使 用 “ 属 性 ” 窗 格 可 以 编 辑 “ 所 有 规 则 ” 窗 格 中 任 何 所 选 规 则 的 CSS 属 性 。 单 击 “ 添 加属性”热字，会在“添加属性”热字处出现一个下拉列表框，该下拉列表框中列出了所有 相关的属性名称，选择其中一个属性，即可设置该属性的相应值。单击属性值，即可进入该 属性值的编辑状态，可以修改该属性值。,图 511 “ CS S 样 式 ” （ 全 部 ） 面 板
6、,图 512 “ CSS 样 式 ” （ 当 前 ） 面 板,在“ 当 前 ”模 式 下 ，“ CSS 样 式 ”面 板 显 示“ 所 选 内 容 的 摘 要 ”窗 格 、“ 规 则 ”窗 格 和“ 属 性 ” 窗 格 。“ 所 选 内 容 的 摘 要 ” 窗 格 内 显 示 文 档 中 当 前 所 选 内 容 的 CSS 属 性 ；“ 规 则 ” 窗 格 内 显 示 所 选 属 性 的 位 置 （ 或 所 选 标 签 的 一 组 层 叠 的 规 则 ， 具 体 取 决 于 您 的 选 择 ）；“ 属 性 ” 窗 格 可 以 编 辑 “ 所 有 规 则 ” 窗 格 中 任 何 所 选 规 则
7、的 CSS 属 性 。,（ 2 ）“ 显 示 类 别 视 图 ”按 钮,：单 击 按 下 该 按 钮 后 ，可 以 分 类 显 示 选 中 的 CSS 样 式 的 属,性 和 属 性 值 。 将 Drea mwea ver 支 持 的 CSS 属 性 分 为 “ 字 体 ”、“ 背 景 ”、“ 区 块 ”、“ 边 框 ”、 “ 方 框 ”、“ 列 表 ”、“ 定 位 ” 和 “ 扩 展 名 ” 8 个 类 别 。 每 个 类 别 的 属 性 都 包 含 在 一 个 列 表 中 ， 可 以 单 击 类 别 名 称 旁 边 的 加 号 (+) 按 钮 展 开 或 折 叠 它 。,（ 3 ）“ 显
8、示 列 表 视 图 ” 按 钮,： 单 击 按 下 该 按 钮 后 ， 可 以 按 英 文 字 母 的 顺 序 显 示,Drea mweaver 支 持 的 所 有 CSS 属 性 和 属 性 值 。 “ 设 置 属 性 ” （ 蓝 色 ） 将 出 现 在 列 表 顶 部 。,（ 4 ）“ 只 显 示 设 置 属 性 ”按 钮,：单 击 按 下 该 按 钮 后 ，只 显 示 已 经 设 置 过 的 CSS 样 式 的,属 性 和 属 性 值 。“ 设 置 属 性 ” 视 图 为 默 认 视 图 。,（ 5 ）“ 附 加 样 式 表 ” 按 钮,： 单 击 它 ， 可 以 调 出 一 个 “ 链
9、 接 外 部 样 式 表 ” 对 话 框 ， 如 图,513 所 示 。再 单 击“ 浏 览 ”按 钮 ，可 调 出“ 选 择 样 式 表 文 件 ”对 话 框 ，利 用 该 对 话 框 可 以 选 择 要 链 接 或 导 入 外 部 样 式 表 （ 文 件 的 扩 展 名 为 .CSS ）。 在“链接外部样式表”对话框内的“媒体”下拉列表框中可以选择媒体类型。单击“范 例 样 式 表 ” 热 字 ， 可 以 调 出 “ 范 例 样 式 表 ” 对 话 框 ， 如 图 514 所 示 。 该 对 话 框 给 出 一 些 样 式表范例，并给出与它们相应的文件名称和路径，可供使用。,图 513 “
10、 链 接 外 部 样 式 表 ” 对 话 框,图 514 “ 范 例 样 式 表 ” 对 话 框,（ 6 ）“ 编 辑 样 式 表 ” 按 钮,： 在 “ CSS 样 式 ” 面 板 中 选 中 一 种 CSS 样 式 名 称 ， 单 击 该 按,钮 ， 可 调 出 相 应 的 “ CSS 规 则 定 义 ” 对 话 框 ， 可 以 对 CSS 样 式 表 进 行 编 辑 。,“,（ 7 ） 删 除 CSS 规 则 ”按 钮,：单 击 它 ，可 以 删 除 “ CSS 样 式 ” 面 板 中 的 选 定 规 则 或 属 性 ，,并 从 它 所 应 用 于 的 所 有 元 素 中 删 除 格 式
11、 设 置 。但 是 ，不 会 删 除 由 该 样 式 引 用 的 类 或 ID 属 性 。 还 可 以 分 离 （ 或 “ 取 消 链 接 ”） 附 加 的 CSS 样 式 表 。 2 调 出 “ 新 建 CSS 规 则 ” 对 话 框 的 3 种 方 法 （ 1 ） 选 择 “ 格 式 ” “ CSS 样 式 ” “ 新 建 ” 命 令 。,（ 2 ） 单 击 “ CSS 样 式 ” 面 板 中 内 右 下 角 的 “ 新 建 CSS 规 则 ” 按 钮,。,（ 3 ）在“ 文 档 ”窗 口 中 选 择 文 本 ，在“ 属 性 ”（ CSS ）栏 内“ 目 标 规 则 ”下 拉 列 表 框
12、选 中 “ 新 CSS 规 则 ”选 项 ，然 后 单 击“ 编 辑 规 则 ”按 钮 ，或 者 在 其“ 属 性 ”拦 进 行 属 性 设 置（ 例 如 单 击 “ 粗 体 ” 图 标 ）， 都 可 以 调 出 “ 新 建 CSS 规 则 ” 对 话 框 。 如 果 在“ 属 性 ”（ CSS ）栏 内“ 目 标 规 则 ”下 拉 列 表 框 选 中“ 内 联 样 式 ”选 项 ，则 在 其“ 属 性 ” 拦 进 行 属 性 设 置 时 ， 不 会 调 出 “ 新 建 CSS 规 则 ” 对 话 框 。 72,3 “ 新 建 CSS 规 则 ” 对 话 框 中 其 他 各 选 项 的 含 义
13、 “ 新 建 CSS 规 则 ” 对 话 框 如 图 515 所 示 ， 其 中 各 选 项 的 作 用 如 下 。 （ 1 ）“ 选 择 器 类 型 ” 下 拉 列 表 框 ： 其 内 有 “ 类 ”、“ ID ”、“ 标 签 ” 和 “ 复 合 内 容 ” 四 个 选 择 器 类 型 选 项 。 用 来 设 置 要 创 建 的 CSS 规 则 （ 即 CSS 样 式 ） 的 选 择 器 类 型 选 择“ 类 ”选 项 后 ，设 置 的 CSS 规 则 可 以 应 用 于 所 有 HTML 元 素 ； 选 择 “ ID ” 选 项 后 ， 设 置 的 CSS 样 式 （ 即 规 则 ） 只
14、可 以 应 用 于 一 个 HTML 元 素 ； 选 择“ 标 签 ”选 项 后 ，则“ 选 择 器 名 称 ” 下拉列表框内提供了可以应用于重新定义的所 有 HTML 元 素 标 记 名 称 ，可 以 对 HTML 元 素 重 新定义，改变它们的属性； 选 择“ 复 合 内 容 ”选 项 后 ，可 定 义 能 同 时 影 响 多 个 标 签 、 类 或 ID 的 复 合 规 则 设 。,（ 2 ）“ 选 择 器 名 称 ” 下 拉 列 表 框 ： 在 “ 选,“,“,择器类型”下拉列表框内选择不同选项时，在 该下拉列表框内可以输入和选择的名称形式也不一样。 选 择“ 类 ”选 项 后 ，类
15、名 称 必 须 以“ . ”开 头 ，并 且 包 含 字 母 和 数 字 组 合（ 例 如 ， .CSS1 ”）。 如 果 没 有 输 入 开 头 的 “ . ”， 则 Drea mwea ver CS5 会 自 动 在 输 入 的 名 称 左 边 添 加 “ . ”； 选 择“ ID ”选 项 后 ，输 入 的 ID 名 称 必 须 以“ # ”开 头 ，并 且 包 含 字 母 和 数 字 组 合（ 例 如 ， #myID1 ”）。如 果 没 输 入 开 头 的“ # ”，则 Drea mwea ver 会 自 动 在 输 入 的 名 称 左 边 添 加“ # ”； 选 择 “ 标 签 ”
16、选 项 后 ， 输 入 或 选 择 一 个 HTML 标 签 ； 选 择 “ 复 合 内 容 ” 选 项 后 ， 输 入 用 于 复 合 规 则 的 选 择 器 ， 例 如 ， 如 果 输 入 “ div p”， 则 div 标 签 内 的 所 有 p 元 素 都 将 受 此 规 则 影 响 。 它 下 边 的 文 本 区 域 内 会 自 动 给 出 准 确 说 明 添加或删除选择器时该规则将影响哪些元素。 （ 3 ）“ 规 则 定 义 ” 下 拉 列 表 框 ： 用 来 确 定 是 创 建 外 部 CSS 还 是 内 部 CSS 。 选 中 “ 仅 限 该 文 档 ” 选 项 ， 则 创 建 内 部 CSS ， 定 义 在 当 前 文 档 中 。 选 中 “ 新 建 样 式 表 文 件 ” 选 项 ， 则 创 建 外 部 CSS 样 式 表 文 件 （ 扩 展 名 为 “ .css ”）。 选 中 一 个 已 经 创 建 的 CSS 样 式 文 件 ， 则 修 改 选
