《网页制作5.docVIP

第三章 Dreamweaver网页设计 实验3.7 应用CSS样式 【相关知识】 1. CSS（Cascading Style Sheets）是层叠样式表的简称。利用它可以对网页中的文本、图像等内容进行精确的格式化控制。CSS样式表定义的代码一般书写在HTML文档的头部。 2. 通过对CSS样式表的定义，可以控制多个网页的格式。实现网站风格的统一和对多个网页的管理。 3. 当CSS样式表修改后，应用该样式的文档也会随之改变。 4. CSS样式有3种：自定义CSS样式、HTML标记样式和CSS选择器样式。 【实验3.7-1】 一、实验目的和要求 1. 掌握创建、应用、导出CSS样式表的方法。 2. 掌握设置样式属性的方法。 二、实验步骤 1. 创建自定义CSS样式 （1）新建一个网页文档。单击【窗口】→【CSS样式】菜单命令，打开【CSS样式】面板。切换到【正在】选项卡下。 （2）在【CSS样式】面板上，单击【新建CSS规则】按钮，或右键单击【CSS样式】面板空白处，在弹出的快捷菜单中选择【新建】菜单命令，打开【新建CSS规则】对话框。如图3-7所示。 图3-7 【新建CSS规则】对话框 （3）在对话框的【选择器类型】处选择“类”选项，在【名称】文本框中输入“newClass”。在【定义在】处选择【新建样式表文件】选项。 （4）单击【确定】按钮，打开【保存样式表文件为】对话框，选择保存位置，设置样式表文件名。单击【保存】按钮，创建一个外部样式表，同时打开【.newClass的CSS规则定义】对话框。 （5）在对话框的【分类】列表中选择【类型】选项，设置【字体】为“黑体”；设置【大小】为“中”；设置【粗细】为“粗体”；设置【颜色】为“#FFFFCC”。 （6）单击【确定】按钮。在【CSS样式】面板可以看到“所选内容的摘要”等内容。 2. 重定义HTML标记样式 （1）单击【窗口】→【CSS样式】菜单命令，打开【CSS样式】面板。切换到【正在】选项卡下。 （2）在【CSS样式】面板上，单击【新建CSS规则】按钮，或右键单击【CSS样式】面板空白处，在弹出的快捷菜单中选择【新建CSS规则】菜单命令，打开【新建CSS规则】对话框。 （3）在【选择器类型】处选择“标签”选项，在【标签】下拉列表中选择“body”。在【定义在】处选择【仅对该文档】选项。 （4）单击【确定】按钮，打开【body的CSS规则定义】对话框。 （5）在对话框的【分类】列表框中选择【背景】选项。设置【背景颜色】为“#0033FF”。单击【确定】按钮。 3. 附加外部CSS样式 （1）单击【窗口】→【CSS样式】菜单命令，打开【CSS样式】面板。切换到【正在】选项卡下。 （2）在【CSS样式】面板上，单击【附加样式表】按钮，或右键单击【CSS样式】面板空白处，在弹出的快捷菜单中选择【附加样式表】菜单命令，打开【链接外部样式表】对话框。 （3）在【链接外部样式表】对话框中，单击【文件/URL】后面的【浏览】按钮，选中要附加的样式表。在【添加为】处选中“链接”选项。单击【确定】按钮。 4. 设置CSS属性 （1）单击【文本】→【CSS样式】→【新建】菜单命令，打开【新建CSS规则】对话框。 （2）在【选择器类型】处选择“类”选项，在【名称】文本框中输入“style1”。在【定义在】处，选择【仅对该文档】选项。 （3）单击【确定】按钮，打开【.style的CSS规则定义】对话框。 （4）在对话框的【分类】列表框中选择【背景】选项。单击【背景图像】后面的【浏览】按钮，选择一幅背景图像；在【附件】下拉列表中选择“固定”；在【水平位置】下拉列表中选择“居中”；在【垂直位置】下拉列表中选择“顶部”。单击【确定】按钮。设置背景属性完毕。 5. 显示全部样式信息 （1）单击【窗口】→【CSS样式】菜单命令，打开【CSS样式】面板。 （2）切换到【全部】选项卡下。单击某个样式前的【+】，展开该样式。选中一个样式列表项，可以看到其详细的属性设置情况。 6. 导出CSS样式 （1）单击【窗口】→【CSS样式】菜单命令，打开【CSS样式】面板。 （2）右键单击【CSS样式】面板空白处，在弹出的快捷菜单中选择【导出】菜单命令，打开【导出样式为CSS文件】对话框。 （3）在对话框中选择导出的位置，设置导出文件名。单击【保存】按钮，即可将CSS样式导出为*.css文件。 【实验3.7-2】 一、实验目的和要求 掌握应用CSS样式设置文本格式的方法。 二、实验步骤 1. 新建一个网页文档 启动Dreamweaver。单击【文件】→【新建】菜单命令，新建一个网页文档。 2. 添加CSS样式 （1）单击【窗口】→【CSS样式】菜单命令，打开【CSS样式】面板。切换到【全部