实验八 CSS样式表的创建及运用
一、实验目的
1、掌握CSS样式表功能；
2、掌握内部样式表的创建，并会在网页中运用样式表；
3、掌握外表样式表文件的创建，并会将该文件运用到整个站点文件； 4、掌握样式表的管理，会编辑、删除、重命名样式表；
二、实验内容
对“css前”文件夹中的文件进行css样式表的设置，要求：
1、 整个文件夹下的文件超链接格式“字体：宋体，大小：10pt，颜色：黄色，无下划线“，访问后的超链接的格式”字体：宋体，大小：10pt，颜色：黑色，无下划线”，鼠标移到超链接的文字上显示十字型光标。
2、 整个文件夹下文件正文格式“字体：宋体，大小：10pt，颜色：黑色，文字行间距为20px”，表格有左、右的边框线，线型:实线，大小：2px，颜色：#cccccc，表格离网页的边距为0，鼠标显示mouse7.ani的鼠标样式，页脚区域的文字格式：字体:宋体，大小：9pt，颜色：白色”。
3、 index.html中“热爱生命”四个字的格式字体：楷体，大小：14pt，颜色：黄色，其下面的文字格式字体：宋体，大小：10pt，颜色：白色，flash下面的文字格式字体：宋体，大小：14px，颜色：#FF6600，效果图如图2-14-1所示。
图2-14-1 index.html效果图 图2-14-2 jianjie.html效果图
4、jianjie.html中所获奖项的项目列表符号用图像来显示，效果图如图2-14-2所示。 5、wenxue.html 中图像边框格式“样式：脊状，宽度：中，颜色：红色”，效果图如图2-14-3所示。
6、huihua.html中“小熊”图像格式“滤镜：去色（Gray），效果图如图2-14-4所示。 7、donghua.html中设置该页面的背景图像不跟随内容滚动，其中背景图像为back.gif，效果图如图2-14-5所示。
8、xinde.html中“热爱生命”四个字的格式字体:楷体，大小：14pt，颜色：黄色，其下面的文字格式字体:宋体，大小：10pt，颜色：白色，中间表格格式“样式：实线，宽
度2px，颜色：红色“，效果图2-14-6所示。
图2-14-3 wenxue.html效果图 图2-14-4 huihua.html效果图
图2-14-5 donghua.html效果图 图2-14-6 xinde.html效果图
三、知识点分解
该实验主要涉及到整个站点的一个外部样式表文件的创建、编辑及应用，每个网页内部样式表的创建、编辑及应用。
四、实验步骤
1、打开index.html页面，选择[文本]\\[CSS样式]\\[新建]菜单命令,弹出如图2-14-5所示的“新建CSS规则”对话框，将选择器类型选择为“高级（ID、伪类选择器等）”，在“选择器”下拉列表框中选择“a：link”，“定义在””新建样式表文件”，单击“确定”按钮，弹出“保存样式表文件为”对话框，在文件名中输入文件名new，单击“保存”按钮，弹出“a：link的CSS规则定义（在new.css中）” 对话框，在“分类”中选择“类型”，设置为“字体：宋体，大小：10pt，颜色：黄色，修饰：无”，单击“确定”按钮。
注意：外部的CSS样式表文件后缀名为.css。
- 2 -
图2-14-5 图2-14-6
“新建CSS样式表” “高级”选项对话框 “新建CSS样式表” “ 标签”选项对话框
2、重复步骤1，此时将“选择器”改为“a：visited”，“定义在”选择“new.css”，单击“确定”按钮，弹出“a：visited的CSS规则定义（在new.css中）” 对话框，在“分类”中选择“类型”，设置为“字体：宋体，大小：10pt，颜色：黑色，修饰：无”，单击“确定”按钮。
3、重复步骤2，此时将“选择器”改为“a：hover”，“定义在”选择“new.css”，单击“确定”按钮，弹出“a：hover的CSS规则定义（在new.css中）” 对话框，在“分类”中选择“扩展”，设置为“光标：crosshair”，单击“确定”按钮。
4、打开浮动面板组中的“CSS”面板，选中“new.css”，单击右键，选择“新建”弹出如图2-14-6所示的“新建CSS规则”对话框，将选择器类型选择为“标签”，在“标签”下拉列表框中选择“body”，“定义在”选择“new.css”，单击“确定”按钮，弹出“body的CSS规则定义（在new.css中）” 对话框，在“分类”中选择“类型”，设置为“字体：宋体，大小：10pt，颜色：黑色，行高：20px”，接着在“分类”中选择“扩展”，设置为“光标：crosshair”，此时因为默认的鼠标样式没有mouse7.ani，所以可以任意选择一个鼠标样式，单击“确定”按钮，然后回到new.css文件，将“crosshair”改为“url（mouse7.ani）”。
5、打开浮动面板组中的“CSS”面板，选中“new.css”，单击右键，选择“新建”弹出的“新建CSS规则”对话框，将选择器类型选择为“类”，“名称”为“.t”，“定义在”选择“new.css”中，弹出“.t的CSS规则定义（在new.css中）” 对话框，在“分类”中选择“方框”，设置为“边界：上、下、左、右都为0px”，接着选择“边框”，设置为“样式：上、下、左、右都为实线，宽度： 上0px、下0px、左2px、右2px，颜色：上、下、左、右都为#cccccc”，单击“确定”按钮。
6、重复步骤5，此时将选择器类型选择为“类”，“名称”为“.yj”，“定义在”选择“new.css”中，弹出“.yj的CSS规则定义（在new.css中）” 对话框，在“分类”中选择“类型”，设置为“字体：宋体，大小：9pt，颜色：白色”，单击“确定”按钮。
注意：以上的CSS样式都是在外部的new.css文件中编辑的。 7、保存new.css文件。
8、回到index.html页面，选择[文本]\\[CSS样式]\\[新建]菜单命令,在弹出的的“新建CSS规则”对话框，将选择器类型选择为“类”，“名称”为“.style1”，“定义在”选择“仅对该文档”中，弹出“.style1的CSS规则定义” 对话框，在“分类”中选择“类型”，设置为“字体：楷体，大小：14pt，颜色：黄色”，单击“确定”按钮。 9、重复步骤8，将名称改为“.style2”，设置为“字体:宋体，大小：10pt，颜色：白色”。 10重复步骤8，将名称改为“.style3”，设置为“字体:宋体，大小：14px，颜色：#FF6600”。
- 3 -
11、选择“热爱生命”四个字，打开“属性面板”，在“类”下拉列表中选择“style1”。 12、选择“热爱生命”下面的大段文字，在“类”下拉列表中选择“style2”。 13、选择flash下面的文字，打开“属性面板”，在“类”下拉列表中选择“style3”。 14、按【Ctrl+S】保存该页面。 15、打开jianjie.html，选择[文本]\\[CSS样式]\\[附加样式表]菜单命令，弹出如图2-14-7所示的“链接外部样式表”对话框，单击“浏览”按钮选择外部的样式表文件new.css，“添加为”选择“链接”，单击“确定”按钮。
图2-14-7 “链接外部样式表”对话框
16、再选择[文本]\\[CSS样式]\\[新建]菜单命令,在弹出的的“新建CSS规则”对话框，将选择器类型选择为“标签”，“名称”为“ul”，“定义在”选择“仅对该文档”中，弹出“ul的CSS规则定义” 对话框，在“分类”中选择“列表”，设置为“类型：圆点，项目符号list. gif，位置：内”，单击“确定”按钮。
17、选中需要设置项目列表的文字，打开属性面板，单击项目列表
按钮。
18、按【Ctrl+S】保存该页面。
19、打开wenxue.html，选择[文本]\\[CSS样式]\\[附加样式表]菜单命令，弹出如图2-14-7所示的“链接外部样式表”对话框，单击“浏览”按钮选择外部的样式表文件new.css，“添加为”选择“链接”，单击“确定”按钮。
20、打开浮动面板组中的“CSS”面板，选中“样式”，单击右键，选择“新建”，弹出“新建CSS规则”对话框，将选择器类型选择为“标签”，在“标签”下拉列表框中选择“img”，“定义在”选择“仅对该文档”中， 弹出“img的CSS规则定义” 对话框，在“分类”中选择“边框”，设置为“样式：上、下、左、右都为脊状，宽度都为中，颜色都为红色”，单击“确定”按钮，则该页面中所有标签都应用了该样式。
注意：“边框”中要设置上、下、左、由都一样的效果，请勾选“全部相同”复选框。 21、按【Ctrl+S】保存该页面。
22、打开huihua.html，选择[文本]\\[CSS样式]\\[附加样式表]菜单命令，弹出如图2-14-7所示的“链接外部样式表”对话框，单击“浏览”按钮选择外部的样式表文件new.css，“添加为”选择“链接”，单击“确定”按钮。
23、打开浮动面板组中的“CSS”面板，选中“样式”，单击右键，选择“新建”，弹出“新建CSS规则”对话框，将选择器类型选择为“类”，“名称”为“.xx”，“定义在”选择“仅对该文档”中，弹出“.xx的CSS规则定义” 对话框，在“分类”中选择“扩展”，设置为“滤镜：Gray”，单击“确定”按钮。
24、选择“小熊”图像，打开属性面板，在“类”下拉列表中选择“xx”。
- 4 -
25、按【Ctrl+S】保存该页面。
26、打开donghua.html，选择[文本]\\[CSS样式]\\[附加样式表]菜单命令，弹出如图2-14-7所示的“链接外部样式表”对话框，单击“浏览”按钮选择外部的样式表文件new.css，“添加为”选择“链接”，单击“确定”按钮。
27、打开浮动面板组中的“CSS”面板，选中“样式”，单击右键，选择“新建”，弹出“新建CSS规则”对话框，将选择器类型选择为“标签”，在“标签”下拉列表框中选择“body”，“定义在”选择“仅对该文档”中， 弹出“body的CSS规则定义”对话框，在“背景”中选择“背景图像”，设置为“back.gif”，选择“重复”，设置为“重复”，选择“附件”，设置为“固定”，单击“确定”按钮，则该页面中就会出现该背景图像。
28、按【Ctrl+S】保存该页面。 29、打开xinde.html，选择[文本]\\[CSS样式]\\[附加样式表]菜单命令，弹出如图2-14-7所示的“链接外部样式表”对话框，单击“浏览”按钮选择外部的样式表文件new.css，“添加为”选择“链接”，单击“确定”按钮。
30、重复步骤8、9。
31、选择[文本]\\[CSS样式]\\[新建]菜单命令,在弹出的的“新建CSS规则”对话框，将选择器类型选择为“类”，“名称”为“.style3”，“定义在”选择“仅对该文档”中，弹出“.style3的CSS规则定义” 对话框，在“分类”中选择“边框”，设置为“样式：实线，宽度2px，颜色：红色”，单击“确定”按钮。
32、重复步骤11、12。
33、选择中间区域的表格，打开“属性面板”，在“类”下拉列表中选择“style3”。 34、按【Ctrl+S】保存该页面。
思考题：“汶川大地震”期间，几乎所有的大型网站的网页都变成了灰色，以表示哀悼，这个灰色的效果是怎么实现的？
- 5 -
实验八 CSS样式表的创建及运用
