中文DreamweaverCS5网页设计课件作者沈大林张伦_第5章节CSS样式和DIV标签.pptVIP

尚辅网 / 71? 第? 5? 章? CSS? 样 式 和? DIV? 标 签 第?5.1?节? CSS?样式 在设计网页时，常常需要对网页中各种对象的属性进行设置，通常网站中众多网页内会 有许多相同属性的对象，例如，相同颜色、大小、字体的文字，同样粗细的图像边框等。如 果对这些相同的元素进行逐一的属性设置，会大大增加工作量，而且修改也很繁琐。为了简 化 这 项 工 作 ，就 需 要 使 用? CSS? 样 式 表 ， 它 可 以 对 页 面 布 局 、背 景 、字 体 大 小 、颜 色 、表 格 等 属 性 进 行 统 一 的 设 置 ， 然 后 再 应 用 于 页 面 各 个 相 应 的 对 象 。? CSS （ Cascading? Style? Sheet ， 即 层 叠 样 式 表 ） 技 术 是 一 种 格 式 化 网 页 的 标 准 方 式 ， 它 通 过 设 置? CSS? 属 性 使 网 页 元 素 对 象 获 得 不 同 的 效 果 。在 定 义 了 一 个? CSS? 样 式 后 ，就 可 以 将 它 应 用 于 网 页 内 不 同 的 元 素 ，使 这 些 元 素 对 象 具 有 相 同 的 属 性 ，在 修 改? CSS? 样 式 后 ，所 有 应 用 了 该? CSS? 样 式 的 网 页 元 素 的 属 性 会 随 之 一 同 被 修 改 。 另 外 ， 相 对 于? HTML? 标 记 符 而 言 ， CSS? 样 式 属 性 提 供 了 更 多 的 格 式 设 置 功 能 。例 如 ，可 以 通 过? CSS? 样 式 属 性 的 设 置 将 链 接 文 字 的 下 划 线 去 掉 ，给 文 字 添 加 阴 影 ，为 列 表 指 定 图 像 作 为 项 目 符 号 等 。由 于? CSS? 具 有 上 述 这 些 优 点 ， 所 以 它 已 经 被 广 泛 用 于 网 页 的 设 计 中 。? 5.1.1? 创 建 和 应 用? CSS? 样 式? 1． 了 解 “ CSS 样 式 ” 面 板 单 击 “ 窗 口 ” → “ CSS? 样 式 ” 命 令 ， 调 出 “ CSS? 样 式 ” 面 板 ， 单 击 按 下 “ 全 部 ” 按 钮 后 的“ CSS? 样 式 ”面 板 如 图? 5-1-1? 所 示 ，单 击 按 下“ 当 前 ”按 钮 后 的“ CSS? 样 式 ”面 板 如 图? 5-1-2? 所 示 。“ CSS? 样 式 ” 面 板 也 叫? CSS? 样 式 表 编 辑 器 。 （ 1 ） 窗 格 ： 在 “ 全 部 ” 模 式 下 ，“ CSS? 样 式 ” 面 板 显 示 “ 所 有 规 则 ” 窗 格 和 “ 属 性 ” 窗 格。可以通过拖曳窗格之间的边框调整任意窗格的大小，通过拖曳分隔线调整列的大小。 “所有规则”窗格显示当前文档中定义的规则（样式表的名称）以及附加到当前文档的 样 式 表 中 定 义 的 所 有 规 则 （ 外 部? CSS? 样 式 文 件 的 名 称 ）。 该 窗 格 内 如 果 显 示 “ 未 定 义 样 式 ” 选 项 ， 则 表 示 没 有 定 义? CSS? 样 式 。 使 用 “ 属 性 ” 窗 格 可 以 编 辑 “ 所 有 规 则 ” 窗 格 中 任 何 所 选 规 则 的? CSS? 属 性 。 单 击 “ 添 加属性”热字，会在“添加属性”热字处出现一个下拉列表框，该下拉列表框中列出了所有 相关的属性名称，选择其中一个属性，即可设置该属性的相应值。单击属性值，即可进入该 属性值的编辑状态，可以修改该属性值。 图? 5-1-1? “ CS S? 样 式 ” （ 全 部 ） 面 板 图? 5-1-2? “ CSS? 样 式 ” （ 当 前 ） 面 板 在“ 当 前 ”模 式 下 ，“ CSS? 样 式 ”面 板 显 示“ 所 选 内 容 的 摘 要 ”窗 格 、“ 规 则 ”窗 格 和“ 属 性 ” 窗 格 。“ 所 选 内 容 的 摘 要 ” 窗 格 内 显 示 文 档 中 当 前 所 选 内 容 的? CSS? 属 性 ；“ 规 则 ” 窗 格 内 显 示 所 选 属 性 的 位 置 （ 或 所 选 标 签 的 一 组 层 叠 的 规 则 ， 具 体 取 决 于 您 的 选 择 ）；“ 属 性 ” 窗 格 可 以 编 辑 “ 所 有 规 则 ” 窗 格 中 任 何 所 选 规 则 的? CSS? 属 性 。 （ 2 ）“ 显 示 类 别 视 图 ”按 钮 ：单 击 按 下 该 按 钮 后 ，可 以 分 类 显