网页设计与制作案例教程课件陈承欢第24单元.pptVIP

应用范例样式表的步骤如下： （1）在“CSS样式”面板中，单击【附加样式表】按钮，打开“链接外部样式表”对话框。 （2）在“链接外部样式表”对话框中，单击“范例样式表”链接，出现“范式样式表”对话框。 9．使用范例样式 * * 尚辅网 / 第12章 使用CSS美化网页 本次课讲解使用CSS美化页面，重点介绍应用外部样式。 课程引导 知识技能目标 （1）掌握样式的编辑方法。 （2）掌握如何使用CSS样式表美化页面。 （3）掌握如何使用外部样式美化页面。 网页浏览效果展示 本章制作的网页13.html的浏览效果如图所示。 图12-1　　网页13.html的预览效果 本章操作任务 （1）建立多种CSS样式，对13.html进行美化。 （2）建立CSS外部样式文件，应用外部样式对13.html进行美化。 12.2　使用CSS美化页面 按以下要求定义CSS样式，且应用样式对网页进行美化。 （1）制作图文混排效果。 （2）制作特殊边框效果。 （3）建立自定义的链接样式。 （1）建立样式image_text1 单击菜单【文本】→【CSS样式】→【新建】，弹出一个“新建CSS规则”对话框。 在“新建CSS规则”对话框中，“选择器类型”选项中选择“类”单选按钮，在“名称”文本框中输入这个自定义样式的名称：“.image_text1”。在“定义在”选项中选择“仅对该文档”单选按钮。 4．建立实现图文混排效果的样式 在“.image_text1的CSS样式定义”对话框中“分类”选择“方框”选项卡，在“方框”选项卡中，“浮动”下拉列表框中选择“左对齐”，取消“全部相同”复选框的选中状态，在“右”列表框中输入“10”，单位为“像素”，其余选项保持默认设置。 （2）应用样式 选中表格第三行中的左边的图像，单击菜单【文本】→【CSS样式】，在“CSS样式”菜单中选中“image_text1”样式，把样式套用到图片中。保存网页，浏览网页效果。 （3）建立样式image_text2 建立一个类似的样式image_text2，在“CSS的规则定义”对话框中，“浮动”列表框中选择“右对齐”，“左”列表框中输入“10”，其他的属性设置与image_text1相同。然后将该样式应用于另一幅图像。 （1）建立样式border 建立一个名为“.border”，在“.border的CSS样式定义”对话框中“分类”选择“边框”选项卡，在“边框”选项卡中，“上”对应的“样式”下拉列表框中选择“凸出”，“宽度“下拉列表框选择“中”，“颜色”选择“#CCCC33”，其余选项保持默认设置。 5．建立实现特殊表格边框效果的样式 （2）应用样式 选中网页中整个表格，单击鼠标右键，在弹出的快捷菜单中选择【CSS样式】→【border】，如图12-14所示，把样式套用到表格。 将页面表格中最后一行的链接设置成以下样式：默认的链接是蓝色、宋体、9pt、没有下划线，访问过的链接为紫色、宋体、9pt、没有下划线，而鼠标经过时的链接变成橘黄色、宋体、9pt、出现下划线。 6．建立高级样式 具体的操作过程如下： （1）在CSS样式面板中单击“新建CSS规则”按钮，弹出“新建CSS规则”对话框，在该对话框中“选择器类型”位置选择“高级”单选按钮。 （2）定义链接默认样式，在“选择器”列表框中输入“a.my.link”，其中my为自定义的链接样式。在“定义在”选项中，选择“仅对该文档”单选按钮，这样CSS样式就被定义在该文档中。 （3）单击【确定】按钮关闭对话框，这时会自动打开样式表编辑器，进入样式表的定义。 （4）在“CSS规则定义”对话框中，左边的分类选择“类型”，“字体”下拉列表框中选择“宋体”，“大小”列表框中选择字体大小为“9”，单位为“点数(pt)”，在“颜色”处定义文本颜色为“#0000FF”，在“修饰”处选择“无”复选框，其他属性使用默认设置，设置完成后，单击【确定】按钮关闭对话框。这时，在CSS样式面板中会出现建立好的样式。 （5）重复上述（2）～（4）步骤定义“a.my.visited”样式，在“CSS规则定义”对话框中，“字体”设置为“宋体”，“大小”设置为“9pt”，“颜色”设置为“#CCCCCC”，“修饰”处选择“无”复选框，其他属性使用默认设置。 （6）重复上述（2）～（4）步骤定义“a.my.hover”样式，在“CSS规则定义”对话框中，“字体”设置为“宋体”，“大小”设置为“9pt”，“颜色”设置为“#FF9900”，“修饰”处选择“下划线”复选框，其他属性使用默认设置。 （7）样式设