17.1.6 网页中的CSS应用
在网页中添加CSS的方法和将CSS添加到XTML文件中的方法类似。本节将对页面调用CSS的方式和使用CSS优先级等知识进行简要介绍。
1.页面调用CSS方式
在页面中通常使用如下5种方法调用CSS。
（1）链接外部CSS样式表
链接外部CSS样式表方法是指在“<head></head>”标记内使用<link>标记符调用外部CSS样式。若已有若干CSS外部文件，则在网页中用下列代码即可将CSS文档引入，然后在<body>部分直接使用CSS中的定义。
注意：使用此方法时，外部样式表不能含有任何像<head>或<style>这样的HTML的标记，并且样式表仅仅由样式规则或声明组成。
（2）文档中植入
文档中植入法是指通过<style>标记元素将设置的样式信息作为文档的一部分用于页面中。所有样式表都应列于文档的头部，即包含在<head>和</head>之间。在<head>中，可以包含一个或多个<style>标记元素，但须注意<style>和</style>成对使用，并注意将CSS代码置于“<！--”和“-->”之间。
请看下面的演示代码。
执行后的效果如图17-9所示。
图17-9 执行效果
注意：
■如果浏览器不能识别<style>元素，就会将其作为<body>元素的一部分照常展示其内容，从而使这些样式表对用户是可见的。为了防止出现这种情况，建议将<style>元素的内容要包含在一个注解“<！--”和“-->”里面，像上述例子那样。
■当一个文档具有独特样式的时候，可应用嵌入的样式表。如果多个文档都使用同一样式表，则链接外部CSS样式表方法更适用。
（3）页面标记中加入
页面标记中加入是指，在某个标记符的属性说明中加入设置样式的代码。例如，如下代码使用此方法对文字进行了设置。
（4）导入CSS样式表
使用@import url选择器可以导入第三方样式表，其实现方法类似于链接<link>。它可以放在HTML文档的<style>与</style>标记符之间，与<link>的区别在于无论该网页是否应用了CSS样式表，它都将读取样式表；而<link>只有在该网页应用CSS样式表时，才去读样式表。下面代码说明了@import选择器的使用方法：
（5）脚本运用CSS样式
在DHTML页面中，可以使用脚本语句来实现CSS的调用。当DHTML页面结合使用内嵌的CSS样式和内嵌的脚本事件时，就可以在网页上产生一些动态的效果，如动态地改变字体、颜色、背景、文本属性等。例如，在如下代码中将页面中的文本颜色进行了设置，当鼠标移动到文本上面时字体为红色，离开文本时字体为绿色。
执行效果如图17-10所示。
图17-10 执行效果
2.调用优先级
上述几种常用的页面调用方法，在具体使用时，其作用顺序是不同的。本节重点向读者介绍几种通常所遵循的优先级样式。
（1）通用优先级
一般来说，在页面元素中直接使用的CSS样式是最高的优先级样式，其次是在页面头部定义的CSS样式，最后是使用链接形式调用的样式。
（2）类型选择符和类选择符
在页面中同时使用类型选择符和类选择符时，类选择符的优先级要高于类型选择符。也就是说，要首先遵循类选择符，然后再遵循类型选择符。
（3）ID选择符
在页面设计中，ID选择符的优先级要高于类选择符。
（4）最近优先原则
最近优先原则是在页面设计中所遵循的原则。例如，如果某元素的ID选择符被定义在其父元素中，那么其父元素会使用最近定义的样式。