把CSS嵌入XHTML文档的方法
搜集整理:sagahu@163.com
来源:《新手学CSS+DIV》曾静娜 等 编著
使CSS样式表在一个XHTML文档中生效的方法有多种,下面将详细介绍并说明其优先级问题。
1. 在标签的style属性中直接写入样式
示例代码如下:
<div style="border: solid 1px blue;"> <p style="font-size: 20px; color: Red;">中国</p> <p style="font-size: 30px; color: Green;">奥运</p> <p style="font-size: 40px; color: orange;">冠军</p> </div>
效果如下:
中国
奥运
冠军
2. 在<style></style>标签中写CSS样式
示例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>在style标签中加入CSS样式</title> <style type="text/css"> p { font-size: 30px; /* 设置文字大小为30像素 */ color: Blue; } /* 设置文字颜色为蓝色 */ </style> </head> <body> <p>中国</p> <p>奥运</p> <p>冠军</p> </body> </html>
注意:使用在style标签中写方式的方法比在标签的style属性中写样式的方法更加便于把样式和文档主体分离,提高了后期的可维护性和页面可读性。
3. 链入外部CSS样式表文件
链入外部CSS样式表文件的方法也称为链接式。链接式是把所有的CSS样式分离出来单独编写一个CSS文件,然后用<link>标签将这个文件连入到XHTML文档中。
该<link>标签应位于XHTML文档的<head></head>标签内。
示例代码如下:
<link href="index.CSS" type="text/css" rel="stylesheet" />
分析: 链接式实现了文档内容和样式的完全分离。美工可以操控CSS文件来改变页面样式,程序人员可以操控XHTML文档来改变内容,互不干扰。
4. 导入样式表文件
导入样式表文件的方法是在<style></style>标签之间插入@import语句和CSS文件路径。
示例代码如下:
<style type="text/css"> @import url("index.css"); </style>
如下几种导入样式表文件的几种不同写法,功能是一样的:
@import url(index.css); @import url('index.css'); @import url("index.css"); @import index.css; @import 'index.css'; @import "index.css";
5. 优先级问题——就近原则
上面介绍了四种使用CSS的方法。如果几种方法都作用到某个XHTML元素上,就会产生那个较为优先的问题:CSS的优先原则遵循就近优先。
原文:当定义产生冲突时,CSS样式的生效规则是后定义的优先,所以以上四种方法的优先级顺序可以排为:(1)在标签的style属性中直接写方式,(2)在<style></style>标签中直接写方式,(3)导入样式,(4)链入外部CSS样式。
注意: 经过笔者试验,确定方式(1)的优先级最高,它肯定是离XHTML标签最近的啊。但是方式(2)、(3)、(4)的优先级可就不像原文排的那么死般了,在此不再赘述,但是提供下面的示例代码,读者可以修改前3种方式的顺序来试验!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>四种使用CSS方法优先级比较示例</title> <link href="1.css" rel="Stylesheet" type="text/css" /> <!-- 1.css中设置文字颜色为绿色 --> <style type="text/css"> @import url("2.css"); /* 2.css中设置文字颜色为蓝色 */ p { color: Yellow; } /* 设置文字颜色为黄色 */ </style> </head> <body> <p>可以修改前面3中使用CSS的顺序来试验优先级饿!</p> <!-- <p style="color: Red;">中国奥运2008</p> 这种方式优先级最高,可以去掉注释来试验! --> </body> </html>