Dreamweaver 软件 网站建设报告指导。

实验三 CSS样式表的使用

【 实验目的 】熟悉CSS样式表的创建和应用。

【 实验器材 】安装有Windows 98/2000/xp；Dreamweaver MX，Flash MX，Fireworks MX；IE浏览器，NetScape浏览器，IIS5.0 等软件的计算机。

【 实验内容 】

自定义CSS样式表。要求：定义一种网页中常用的正文样式，效果为“字体为楷体，文

字大小为20PX，文字颜色为蓝色”，并应用于文档，预览页面效果；

重新定义HTML标签样式。要求：重新定义BODY的标签样式属性，效果为“华文行楷，

大小为20PX，文字颜色为白色，悲景为深蓝色”，并应用于文档，预览页面效果； CSS选择器样式的定义。要求：通过CSS选择器样式的设置，实现基于文字超链接的动

态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为18PX，文字颜色为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为18PX，文字颜色为红色”，并预览页面效果；

【 实验步骤 】

1、 自定义CSS样式表。要求：定义一种网页中常用的正文样式，效果为“字体为楷体，

文字大小为20PX，文字颜色为蓝色”，并应用于文档，预览页面效果。

实验步骤：

（1） 打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建

CSS样式”按钮，在弹出的对话框中输入样式名称，在“类型”中选择“创

建自定义样式”，选择“仅对该文档”，完成后单击“确定”；

（2） 在打开的对话框中设置“字体为楷体，文字大小为20PX，文字颜色为蓝色”，

单击“确定”；

（3） 在文档窗口中选取要应用样式的文本，在“CSS样式” 面版中选择“应用

样式”单选按钮，最后在“CSS样式”列表中单击要应用在样式，并按F12

键预览页面效果。

2、 重新定义HTML标签样式。要求：重新定义BODY的标签样式属性，效果为“华文行

楷，大小为20PX，文字颜色为白色，悲景为深蓝色”，并应用于文档，预览页面效果。

实验步骤：

（1） 打开一个包含段落文本的文档，打开“CSS样式”面版，然后单击“新建

CSS样式”按钮，在“类型”中选择“重定义HTML标签”，在“标签”下

拉列表中选择BODY，选择“仅对该文档”，完成后单击“确定”；

（2） 在打开的对话框中设置“字体为华文行楷，文字大小为20PX，文字颜色为

白菜色”，在“分类”列表框中选择“背景”选取项，在“背景颜色”文本

框中输入“#333366”，单击“确定”；

（3） 在文档窗口中选取要应用样式的文本，在“CSS样式” 面版中选择“应用

样式”单选按钮，最后在“CSS样式”列表中单击要应用在样式，并按F12

键预览页面效果。

3、 CSS选择器样式的定义。要求：通过CSS选择器样式的设置，实现基于文字超链接

的动态效果，链接正常显示（a:link）效果为“字体为楷体，文字大小为18PX，文字颜色为黑色”；鼠标停留在链接文字上的样式（a:hover）效果为“字体为隶书，文字大小为18PX，文字颜色为红色”，并预览页面效果。

实验步骤：