把CSS嵌入XHTML文档的方法

来源：《新手学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>

posted on 2012-10-05 00:28 萨迦狐阅读(172) 评论(0) 编辑收藏举报

搜索

常用链接

最新随笔

随笔分类 (46)

随笔档案 (46)

文章分类 (36)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

把CSS嵌入XHTML文档的方法

1. 在标签的style属性中直接写入样式

2. 在<style></style>标签中写CSS样式

3. 链入外部CSS样式表文件

4. 导入样式表文件

5. 优先级问题——就近原则