1.6.2 在网页里应用CSS
标签样式定义好以后，在网页中应用该标签时，标签样式会自动控制元素的显示样式，如1.6.1节介绍的p标签样式和h1~h4标签样式的定义与应用。
类样式定义好以后，该样式可应用于一类(多个)标签元素中，采用名为“class”的属性来引用类样式，应用格式如下：
<标签名 class= "类名">……</标签名>
ID样式定义好以后，该样式只能应用于某一个标签元素内，采用名为“id”的属性来引用ID样式，应用格式如下：
<标签名 id= "ID名">……</标签名>
书写各种名、属性和属性值时，要注意采用半角字符(属性值为汉字字体名称例外)，并区分大小写。虽然HTML规范对CSS不区别大小写，但XHTML规范却是严格区别CSS的大小写。我们应按照XHTML规范执行。
在网页中应用CSS时，常常要用到div和span这两种HTML标签。标签div用于定义块(或层)元素，span用于定义行内元素。这两个标签都可应用样式类和id样式，以确定相应元素的显示样式。
span与div的不同之处在于：span是内联的，用在一小块内联HTML中，可嵌套于多种标签(如div、p、table等)之内，如果不给span元素指定样式，则它什么也不做；而div是块级的标签，用于组合一大块代码，div元素内可嵌套div元素、span元素和其他HTML元素，它的前后有断行。
如例1-10.htm 在网页头部<head>标签内，按如下方式定义并应用类样式和ID样式。
-------------------------清单1-10 1-10.htm--------------------------
<html>
<head>
<style type="text/css">
<!--
p{ /∗ 定义标签p的样式 ∗/
font-family: "黑体"; /∗ font-family属性定义字体为宋体 ∗/
font-size:16px; /∗ font-size属性定义字大小为16像素 ∗/
color:rgb(255,0,0); /∗ color属性定义文字颜色为红色 ∗/
text-align:center; /∗ text-align属性定义水平居中 ∗/
}
.fontclass1{ /∗ 定义一个名为fontclass1的类样式 ∗/
font-family: "楷体"; /∗ font-family属性定义字体为楷体 ∗/
font-size:12px; /∗ font-size属性定义字大小为12像素 ∗/
color:rgb(0,0,255); /∗ color属性定义文字颜色为蓝色 ∗/
text-align:center; /∗ text-align属性定义水平居中 ∗/
}
#fontid1{ /∗ 定义一个名为fontid1的ID样式 ∗/
font-family: "宋体"; /∗ font-family属性定义字体为宋体 ∗/
font-size:13px; /∗ font-size属性定义字大小为13像素 ∗/
color:rgb(0,255,0); /∗ color属性定义文字颜色为绿色 ∗/
}
-->
</style>
</head>
<body>
<p >锄禾</p>
<div class="fontclass1">
锄禾日当午，汗滴禾下土。
<span id="fontid1">谁知盘中餐，粒粒皆辛苦。</span>
</div>
</body>
</html>
--------------------------------------------------------------------
浏览1-10.htm网页文件，效果如图1-14所示。
图1-14 几种CSS的应用效果
注意：当网页中出现元素嵌套时，一般情况下，内层元素会继承外层元素的样式，但内层元素设有独立样式时，按独立设定的样式显示。当多种样式作用于一个网页对象时，最里层的样式决定这个对象的显示形式。这是样式表的层叠特性。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
