上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
1.3.2 CSS选择符
定义样式表的符号就是CSS选择符。选择符可分为以下几种情况。
1.标记符
标记符{规则表}
标记符可以是一个或多个，各个标记之间以逗号分开。
例如，【例1.10】的CSS文件里有如下代码：
p {font-family: "宋体"; color: green; background-color: yellow; font-size: 12pt; }
h1,h2 {font-family: "隶书", "宋体"; color:#ff8800}
2.类选择符和class属性
利用类选择符和标记的class属性可以使相同的标记使用不同的样式，也可以使不同的标记使用同样的样式，因为只要使标记的class属性值为样式表中定义的类选择符即可。
类选择符在样式表中定义具有样式值的类，有两种定义格式：
① 标记名.类名{规则1; 规则2;…}
② .类名{规则l; 规则2;…}
前者是为特定的标记定义的类，该标记的class属性设置为该类名，只有使用该标记的内容才会采用这个样式；后者为一般定义的类，只要某标记引用了该类名就可采用这个样式。请看下面的例子。
【例1.11】两种CSS类选择符示例。
输入下列内容，以1_11css3.html作为文件名保存：
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>两种css类选择符</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
p.back{font-family:"隶书", "宋体"; color:#ff8800}
.heti {font-family:"黑体"; font-size: 20pt; color:#000000;}
-->
</style>
</head>
<body topmargin=4>
<p class="back">标签p的内容可以p.back样式显示</p>
<div class="back">标签div的内容不可以p.back样式显示</div>
<p class="heti">标签p的内容可以.heti样式显示</p>
<div class="heti">标签div的内容也可以.heti样式显示</div>
</body>
</html>
运行文件，将显示如图1.23所示的页面。
3.id选择符和id属性
id选择符用于定义一个元素独有的样式，它与类选择符的区别在于：id选择符在一个XHTML文件中只能引用一次，而类选择符可多次引用。
图1.23 两种CSS类选择符的适用对象
id选择符的定义格式如下：
#id名{规则1; 规则2;…}
这个选择符在【例1.10】的CSS文件中曾经出现过：
#id1 {color: blue; }
其引用方法如下：
<h3 id="id1">内容id1样式显示</h3>