2007-03-22

CSS如何为同一个元素处理多种规则

来源: 开发者 作者:佚名 评论 0 条
 

理解和应用层叠样式表的一个重要细节是它的名字中的层叠方面。也就是说,它是如何为同一个元素处理多种规则的?本周,我将具体的介绍CSS这方面的特性,并举例说明。

优先性

CSS属性比HTML属性有更大的优先权。你可以在没有CSS支持的浏览器中使用HTML属性,但是在浏览器中添加CSS支持也不会有什么影响。在使用CSS时,深刻理解一个CSS规则的来源是很重要的。

来源

当考虑CSS规则的应用时,通常有两个方面。第一个是读者,也就是对应于通过他们喜欢的浏览器查看web应用的用户。第二个方面是作者,也就是开发了web应用的实际web 开发人员。

读者的参数选择有用户来处理,也就是,他们可以开发自己的样式表,然后同过浏览器设置分配它们。例如,因特网浏览器IE 6用户可以通过工具 | Internet选项 | 访问菜单来指定一个用户样式表,这样他们就可以使用自己的样式表。Web开发人员通过开发自己的CSS来指定规则并在网页中应用。同时,浏览器也常有内置的规则。

层叠

缩写词CSS中的层叠方面指的是不同来源的规则间合并与覆盖过程。当同时使用多个样式表时,每个样式表定义的选择器之间会相互争夺控制。下面列表指名了顺序,这样就解决了样式表选择器之间的冲突,其中第一项是最重要的。

重要性:选择器是否被指定为重要?

规则来源:规则在那里定义的?

特性:规则的特性是什么?

顺序:最后定义的是什么?

重要的特性

添加要害字important可以增加你的声明的重要性。增加重要性的声明会覆盖与它们对应的标准或非重要声明。假如读者和作者的样式表都包含了重要声明语句,那么作者声明将会覆盖读者声明。下面的例子演示了声明一个CSS属性为重要。

<html>

<head>

<title> Cascading</title>

<style type="text/css">

H1 {font-face: arial; font-size: 12pt; color: red ! important;}
</style>

</head>

<body>

<h1 style="color: blue;">TechRepublic.com</h1>
</body>

</html>

在上面的例子中,你可以注重到分配给样式H1的颜色red总是有用的,因为它被声明为重要的。值得注重的是,当一个项目在读者和作者样式表中均被声明为重要时,作者的声明将会覆盖读者的声明。

规则来源

一个web用户可以创建和使用他/她自己的样式表。在这种情况下,在用户样式表和web应用样式表之间将会产生冲突。当这些冲突发生时,web应用的设置胜过当所有项目拥有同样的重要性时。可以使用重要的声明胜过对应非重要的声明,但是,当都声明为重要时,就意味着web应用会赢。

特性

当CSS规则的特性,更有非凡性的规则会赢得优先。因此,假如选择器都是一样的,那么最后一个就会赢得优先。所以下面的例子中总是定义H1为绿色。

<html>

<head>
<title>Cascading</title>
<style type="text/css">
H1 {color: red;}
H1 {color: green;}
</style></head>
<body>
<h1>TechRepublic.com</h1>
</body></html>

另一方面,下面例子中包含在BODY中的H1有一个非凡的定义,所以元素H1显示为红色。

<html><head>
共2页: 上一页 1 [2] 下一页

(本文仅表明作者个人观点,不代表本站及其管理员立场.) 推荐 收藏 投稿 打印 返回 关闭
上一篇:纯CSS代码实现翻页  
下一篇:彻底弄懂CSS盒子模式之二
    评论加载中…
 推荐文章
     

网站首页  -  网站地图 -   站长论坛  -  网站投稿  -    -  网站管理
Copyright © 2008 芜湖站长站 All Rights Reserved 皖ICP备07500611号