1、本章将介绍CSS样式的基本知识以及使用CSS样式控制网页外观的基本方法 第7章使用CSS样式控制网页外观 学习目标 了解CSS样式的类型 掌握创建CSS样式的方法 掌握应用CSS样式的方法 7 1认识CSS样式 CSS CascadingStyleSheet 可译为 层叠样式表 或 级联样式表 是一组格式设置规则 用于控制Web页面的外观 通过使用CSS样式设置页面的格式 可将页面的内容与表现形式分离 页面内容存放在HTML文档中 而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分 通常为文件头部分 将内容与表现形式分离 不仅可使维护站点的外观更加容易 而且还可以使HT
2、ML文档代码更加简练 缩短浏览器的加载时间 在使用了CSS样式的网页文档的源代码中 中间存放的是控制文档外观的CSS代码 位于文档的文件头部分 中间是网页文档的内容 7 1认识CSS样式 7 1认识CSS样式 可以更加灵活地控制网页中文本的字体 颜色 大小 间距 风格及位置 可以灵活地为网页中的元素设置各种效果的边框 可以方便地为网页中的元素设置不同的背景颜色 背景图片及平铺方式 可以更加精确地控制网页中各元素的位置 使元素在网页中浮动 可以为网页中的元素设置各种滤镜 从而产生诸如阴影 辉光 模糊和透明等只有在一些图像处理软件中才能实现的效果 可以与脚本语言相结合 使网页中的元素产生各种动态效
3、果 CSS样式可以实现的功能 7 2 CSS样式 面板 在DreamweaverCS3中 CSS样式 面板是新建 编辑 管理CSS样式的主要工具 在打开文档窗口的情况下 选择 窗口 CSS样式 命令可以打开或关闭 CSS样式 面板 7 3CSS样式的类型 根据选择器类型的不同 CSS样式通常划分为以下3类 1 类 可应用于任何标签 利用该类选择器可创建自定义名称的CSS样式 能够应用在网页中的任何标签上 在网页文档中可以使用class属性引用 pstyle 类 8 3 2CSS样式的类型 2 标签 重新定义特定标签的外观 利用该类选择器可对HTML标签进行重新定义 规范或者扩展其属性 8 3
4、3CSS样式的类型 3 高级 ID 伪类选择器等 利用该类选择器会对标签组合 如 tdh2 表示所有在表格单元中出现 h2 的标题 或者是含有特定ID属性的标签 如 myStyle 表示所有属性值中有 ID myStyle 的标签 应用样式 而 myStyle1a visited myStyle2a link myStyle3 表示可以一次性定义相同属性的多个CSS样式 其中 ID属性用于定义一个元素的独特的样式 如以下CSS规则可以通过ID属性应用到HTML中 7 4创建CSS样式 在DreamweaverCS3中 创建CSS样式的操作是一个完全可视化的过程 1 选择 窗口 CSS样式 命令
5、 打开 CSS样式 面板 然后打开 新建CSS规则 对话框 2 在 选择器类型 选项组中选择要创建的CSS样式的类型 3 在对话框中的 定义在 下拉列表中选择CSS样式的存放位置 4 打开 CSS规则定义 对话框 进行CSS样式设置 7 5CSS样式的属性 类型背景区块方框边框列表定位扩展 7 5 1类型 类型属性主要用于定义网页中文本的字体 大小 颜色 样式及文本链接的修饰效果等 7 5 2类型 背景属性主要用于设置背景颜色或背景图像 7 5 3区块 区块属性主要用于控制网页元素的间距 对齐方式等 7 5 4方框 CSS将网页中所有的块元素都看作是包含在一个方框中的 这个方框共分为4个部分
6、7 5 5边框 网页元素边框的效果是在 边框 分类面板中进行设置的 7 5 6列表 列表属性用于控制列表内的各项元素 7 5 7定位 定位属性可以使网页元素随处浮动 这对于一些固定元素 如表格 来说 是一种功能的扩展 而对于一些浮动元素 如层 来说 却是有效地 用于精确控制其位置的方法 7 5 8扩展 扩展 分类对话框包含两部分 7 6CSS样式的应用 应用CSS样式附加样式表 7 6 1应用CSS样式 一 通过 属性 面板首先选中要应用CSS样式的内容 然后在 属性 面板的 样式 下拉列表中选择已经创建好的样式 一般情况下 在 CSS样式 面板中创建的样式都会在 属性 面板的 样式 下拉列表
7、中出现 所以需要应用CSS样式时 在这里直接选择它们即可 7 6 1应用CSS样式 二 通过菜单栏中的 文本 CSS样式 命令首先选中要应用CSS样式的内容 然后选择 文本 CSS样式 命令 从下拉菜单中选择一种设置好的样式 这样就可以将被选择的样式应用到所选的内容上 7 6 1应用CSS样式 三 通过 CSS样式 面板下拉菜单中的 套用 命令首先选中要应用CSS样式的内容 然后在 CSS样式 面板中选中要应用的样式 再在面板的右上角单击控制按钮 或者直接单击鼠标右键 从弹出的下拉菜单中选择 套用 命令即可应用样式 8 6 2附加样式表 外部样式表通常是供多个网页使用的 其他网页文档要想使用已创建的外部样式表 必须通过 附加样式表 命令将样式表文件链接或者导入到文档中 附加样式表通常有两种途径 链接和导入 在 CSS样式 面板中单击 附加样式表 按钮 打开 链接外部样式表 对话框进行设置即可 7 7实例 设置 一翔商城 网页样式 通过前面各节的学习 读者应该对CSS样式的基本知识有了一定的了解 本节将以制作 一翔商城 网页为例 介绍使用CSS样式控制网页外观的基本方法 让读者进一步巩固所学内容 本例将使用CSS样式分别对页眉 主体和页脚进行控制
