多媒体网页制作-课程设计 (1).docVIP

《网页设计与制作》 实 验 报 告 院 （部）：管理工程学院 专 业：信息管理与信息系统 实验项目：CSS层叠样式表的使用 班 级：***** 姓 名：***** 学 号：20080***** 实验三? ?CSS层叠样式表的使用 【 实验目的 】熟悉CSS样式表的创建和应用。 【 实验内容 】 自定义CSS样式表。要求：定义一种网页中常用的正文样式，效果为“字体为楷体，文字大小为20PX，文字颜色为蓝色”，并应用于文档，预览页面效果； 重新定义HTML标签样式。要求：重新定义BODY的标签样式属性，效果为“华文行楷，大小为20PX，文字颜色为白色，悲景为深蓝色”，并应用于文档，预览页面效果； CSS选择器样式的定义。要求：通过CSS选择器样式的设置，实现基于文字超链接的动态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为18PX，文字颜色为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为18PX，文字颜色为红色”，并预览页面效果； 【 实验步骤 】 自定义CSS样式表。要求：定义一种网页中常用的正文样式，效果为“字体为楷体，文字大小为20PX，文字颜色为蓝色”，并应用于文档，预览页面效果。 实验步骤： 打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在弹出的对话框中输入样式名称，在“类型”中选择“创建自定义样式”，选择“仅对该文档”，完成后单击“确定”； 在打开的对话框中设置“字体为楷体，文字大小为20PX，文字颜色为蓝色”，单击“确定”； 在文档窗口中选取要应用样式的文本，在“CSS样式” 面版中选择“应用样式”单选按钮，最后在“CSS样式”列表中单击要应用在样式，并按F12键预览页面效果。 重新定义HTML标签样式。要求：重新定义BODY的标签样式属性，效果为“华文行楷，大小为20PX，文字颜色为白色，背景为深蓝色”，并应用于文档，预览页面效果。 实验步骤： 打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“重定义HTML标签”，在“标签”下拉列表中选择BODY，选择“仅对该文档”，完成后单击“确定”； 在打开的对话框中设置“字体为华文行楷，文字大小为20PX，文字颜色为白菜色”，在“分类”列表框中选择“背景”选取项，在“背景颜色”文本框中输入“#333366”，单击“确定”； 在文档窗口中选取要应用样式的文本，在“CSS样式” 面版中选择“应用样式”单选按钮，最后在“CSS样式”列表中单击要应用在样式，并按F12键预览页面效果。 CSS选择器样式的定义。要求：通过CSS选择器样式的设置，实现基于文字超链接的动态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为18PX，文字颜色为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为18PX，文字颜色为红色”，并预览页面效果。 实验步骤： 打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建CSS样式”按钮，在“类型”中选择“使用CSS选择器”，在“选择器”下拉列表中选择“a:link”，选择“仅对该文档”，完成后单击“确定”； 在打开的对话框中设置“字体为楷体，文字大小为18PX，在“修饰”选项区中选择“无”，文字颜色文本框中输入“#000000””，单击“确定”； 再次单击“新建CSS样式”按钮，在“类型”中选择“使用CSS选择器”，在“选择器”下拉列表中选择“a: hover”，选择“仅对该文档”，完成后单击“确定”； 在打开的对话框中设置“字体为隶书，文字大小为18PX，在“修饰”选项区中选择“下划线”，文字颜色文本框中输入“#0000FF””，单击“确定”； 保存文件后，按F12键预览页面效果。