实验八 CSS样式表的创建及运用
实验八 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-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”。
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”。
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】保存该页面。
思考题：“汶川大地震”期间，几乎所有的大型网站的网页都变成了灰色，以表示哀悼，这个灰色的效果是怎么实现的？
css样式表基础
层叠样式表（CSS） “层叠样式表”（Cascading Style Sheets,缩写为CSS）是由W3C协会所制定，主要的用途是定义网页数据的编排、显示、格式化及特殊效果，因为HTML提供的、、、 、、等控制标记虽然可以将数据格式化，但能做到的格式化有限，而CSS正好弥补了这个不足。 CSS属于较新技术，故IE3.0版本以上支持，Netscapt Navigator 4.0版以上支持。此外，不同浏览器显示的结果可能有不同。 一、如何链接HTML文件与层叠样式表 它有4种方法： ●在HTML文件的区块嵌入层叠样式表的定义。 ●将层叠样式表定义在单独的文本文件，然后将之导入或链接至 HTML文件。 ●在HTML文件的标签属性style中加入样式定义 ●在HTML文件中套用样式类别。 1．在HTML文件的区块嵌入层叠样式表的定义 附：CSS样式表范例（中国学生网） 1、巧用CSS控制鼠标样式变换 主页上的鼠标是不是就只有箭头和小手两种模样呢？如果鼠标移到“帮助”等字样上时，形状就变成求助的问号；鼠标移到可能需要较长时间等待的超链接时，鼠标形状就变成等待的样子……那该多好啊！其实，借助我们的css，几句很简单的代码就可以实现这一切！ 不信？把鼠标移到下面的演示文字上看看效果吧！ 演示：手形 源代码： 演示：手形 演示：移动 演示：等待 源代码： 等待状态 演示：定位指示 演示：帮助 是不是简单又方便？这里我们只用到了CSS中的“cursor”属性，利用“style=cursor:值”这样的语句形式，分别设置具体的值就可以了。例如：值为“hand”时，当鼠标移到相应的文字或图片上时，就会变成超链接的小手形；值为“move”时，当鼠标移到相应的文字或图片上时，就会变成上下左右带方向箭头的形状，依此类推。 2、横线样式的输入框（中国学生网） 在网上我们常常看见一些注册表单的输入框部分并不是我们常见的矩形框，而是一条细线。其实要实现这样的效果并不困难，只要用一段简短的CSS代码控制好表单输入框的样式即可。 代码主要运用了表格边框的样式控制，将左、上、右边框设置为none，只剩下下边框即可。 CSS样式表复习讲义 一、CSS概述 CSS的全称是Cascading Style Sheet，通常称为“层叠样式表”。是网页设计不可缺少的工具之一。 CSS是一组样式，它是用来进行网页风格设计的，它能精确控制页面的布局、字体、颜色和其他效果，不受浏览器的设置的影响。 <例1>在浏览器中使用CSS样式和没使用CSS样式的对比。（1.html） 二、CSS样式内容形式和应用 对象｛a属性:a属性值；b属性:b属性值；……….. ；x属性:x属性值；｝ ●对象：表示要定义样式的对象名称 ●属性：属性名称，如color(前景色) ●属性值：设置属性的具体值，如给color设置red或#00FF00。（常见属性另见文件） （一）、对象：可以是： 1、HTML标签。如：body、p、a等；只对该标签起作用。 例： P { color: #FFFFFF; background-color: #999999; font-family: "宋体"; font-size: 30px; } 直接应用到相同标签： 使用样式表的文字、
CSS样式表范例
CSS样式表复习讲义