<p class="water">这是黄河的水</p>
<p class="hello">这句话没有使用类“hello”的效果。</p> <h3 class="hello">这句话才使用了类“hello”的效果。</h3>
<p id="danger">这里危险。</p>
<a href="css2.htm">测试链接的颜色，使用了虚类，实际做的过程中读 者自行体会。</a>
定义样式的方式为： selector{property1:vaIue1;property2:value2;……} 其中，selector表示样式作用的对象（选择器） property和value则表示相应CSS属性和值。每一对属性和
值用“分号”隔开。
如：h1{font-family:楷体_gb2312;text-align:center}，其 中h1是选择器，font- family:楷体_gb2312;text-align:center” 是声明。在声明中，font-family和text-align是属性，楷体 _gb2312和center是相应的属性值。
a:visited{ color:blue}/*已访问的链接*/ a:active{ color:yellow}/*活动链接*/ a:hover{ color:#990000; text-decoration:underline }/*鼠标指针 移到上面链接的颜色*/ --></style> </head> <body> <h1>标题1的使用。</h1> <b>测试上下选择器（没有上下文）</b><br> <h2><b>测试上下选择器（具有上下文）</b></h2>
实例1-2 样式表的规则
一、要求与目的：
掌握样式表定义规则
掌握规则组合
二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附 件】→【记事本】菜单命令打开记事本。
2．在记事本的编辑面板中输入以下代码，创建了使用样式 的页面css2.htm： <html> <head><title>在标记符中直接嵌套样式信息</title> <style> <!-p{font-size:24px;text-align:center} h1{font-family:楷体_gb2312;text-align:center) -->
<html> <head> <title>选择器举例</title> <style type="text/css"> <!-h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366;
}/*html标记选择器*/ h2 b{ color:#0000FF}/*具有上下文关系的html标记选择器*/ .water{ font-family:"隶书"; font-size:24px; text-align:right}/*类 选择器*/ h3.hello{ font-family:"隶书"; text-align:center; font-size:36px}/* 指定的类选择器*/ #danger{ color:#990000; font-family:"华文彩云"; fontsize:24px}/*ID选择器*/ /*以下是虚类的定义*/ a:link{ color:red}/*未访问的链接*/
<p style="color:#ff0000">这段文字将显示为红色</p> <p style="color:#000000; backgroundcolor:yellow;">这段文字的背景色为<I>黄色 </I></p> <p style=" font-family: '华文彩云'; font-size:24px"> 这段文字将以黑体显示</p> <p><h1 align="center">今天学习样式表的相关知 识。</h1></p> </body> </html>
把内容和格式分离开来，使得能够用一种统一的方式来管 理各种不同的显示格式。层叠样式表因为是较晚才提出的 一个标准，所以只有4.0及其更高版本的IE浏览器才对CSS 有较好的支持。
2．CSS的优先级
层叠样式表中“层叠”的意思是指在同一个HTML文 档中可以有多层样式表存在，不同层次的样式表根据其所 在的位置拥有不同的优先级，优先级越高，在显示时就被 越后采用。换句话说，一个网页对象(文本、图片或者表 格等)可以被多层的样式表所修饰，但是最终它会以优先 级最高的样式表所定义的格式来显示。
显示的结果从图1－3可以看到。规定所有的标题1都使用此 样式。 2．具有上下文关系的HTML标记符选择器 如果需要为位于某个标记符内的标记符设置特定的样
3．将文件保存到确定目录下，文件名为css1.htm。
4．运行结果见图1－1所示。
图1－1样式表示例
三、涵盖知识点：
1．什么是CSS CSS(Cascading Style Sheet,层叠样式表)技术上一种格 式化网页的标准方式，它扩展了HTML的功能，使网页设 计者能够以更有效的方式设置网页格式。 上面所举的例子只是层叠样式表中的一种应用。从中 也可以看出层叠样式表最大的优点就在于把内容和格式分 离开来，使得能够用一种统一的方式来管理各种不同的显 示格式。层叠样式表
3．CSS的分类
一般情况下，层叠样式表可以分为三种：内联式样 式表、嵌入式样式表和外部样式表。下面我们就分别来看 看这三种样式表。 内联式样式表 嵌入样式表 外部样式表
内联式样式表 内联式样式表是在现有HTML元素的基础上，用style属 性把特殊的样式直接加入到那些控制信息的标记中，比如 下面的例子： <p style="color：#ff0000">内联式样式表</p> 这种样式表只会对使用它的元素起作用，而不会影响 HTML文档中的其他元素。也正因为如此，内联式样式表 通常用在需要特殊格式的某个网页对象上。本案例就一个 应用内联式样式表的一个网页实例，在这个实例中，各段 文字都定义了自己的内联式样式表： <p style="color:#ff0000">这段文字将显示为红色</p> <p style="color:#000000; background-color:yellow;">这 段文字的背景色为<I>黄色</I></p> <p style=" font-family: '华文彩云'; font-size:24px">这段 文字将以黑体显示</p>
都具有相同的显示方式。
实例1-3样式表中的选择器
一、要求与目的：
熟悉样式表定义规则 掌握五种选择器 能灵活使用各种样式来设计网页
二、过程与步骤： 1．通过依次单击任务栏上的【开始】→【程序】→【附 件】→【记事本】菜单命令打开记事本 2．在记事本的编辑面板中输入以下代码，创建了综合了 五种选择器的页面css3.htm：
嵌入式样式表首先可以为某个HTML标记定义样式， 定义好之后，整个网页中所有的这个标记都会采用这种样 式来显示其中的网页对象。比如本例中对H1元素定义了嵌
入式样式，所以网页中凡是包含在H1元素中的文字都将使
用所定义的样式显示，如图4－1所示。 外部样式表
外部式样式表是指将样式表作为一个独立的文件保存 在计算机上，这个文件以“.css”作为文件的扩展名。样式 在样式表文件中定义和在嵌入式样式表中的定义是一样的， 只是不再需要style元素，比如要将本例中的嵌入式样式定 义到一个样式表文件mystyle.css中，这个样式表文件的内 容应该为嵌入式样式表中的所有样式，如下所示： h1{ font-size: 36px; font-family: "隶书"; font-weight: bold; color: #993366; } 提示：在定义嵌入样式表时，<style>标记必须放在<head>和 </head>标记之间。
这段代码中的第一个P元素中的样式表将文字用华文 彩云显示。还有一个特殊的地方是第二个P元素中还嵌套 了<I>元素，从图中可以看见<I>元素中的文字同样使用了 P元素中的样式。这种性质通常称为继承性，也就是说子 元素会继承父元素的样式。 在浏览器中如图1－1所示。 嵌入样式表 嵌入式样式表通常包含在HTML，文档的头部，即 HEAD元素中，并且有一个专门的元素style来标记这种样 式表。它的书写格式通常为：
</style>
</head>
<body> <h1>一代人</h1> <p>黑夜给了我黑色的眼睛<br>我却用它寻找光明</p> </body>
</html>
3．将文件保存为css2.htm。
运行结果如图1－2所示。
