把CSS嵌入XHTML文档的方法

最新推荐文章于 2024-04-22 16:58:34 发布

龙城银狐

最新推荐文章于 2024-04-22 16:58:34 发布

阅读量597

点赞数

分类专栏： css 文章标签： xhtml css 文档 import stylesheet url

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

把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>

龙城银狐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
把CSS嵌入XHTML文档的方法

把CSS嵌入XHTML文档的方法搜集整理：[email protected]来源：《新手学CSS+DIV》曾静娜等编著使CSS样式表在一个XHTML文档中生效的方法有多种，下面将详细介绍并说明其优先级问题。1. 在标签的style属性中直接写入样式示例代码如下：中国奥运冠军效果如下：中国奥运冠军2. 在标签中写CSS样式
复制链接

扫一扫