登陆 免费注册 提交网站
站长资讯 >> 站长学院 >> 网页制作
 2007-08-14 23:25浏览: 2663 次

CSS继承----深入剖析(二)

在CSS中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。

  首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的,标准就是如此。举个例子来说:border属性,大家都明白border属性的作用是设置元素的边框的,它就没有继承性。如果继承了边框属性,那么文档看起来就会很奇怪。例如我们定义容器div的边框为1px,而在此容器内的ul li在正常情况下我们都不希望它有边框,如果border有继承性,我们就要再去掉它们的边框。这样显然是不合理的。

  多数边框类的属性,如:Border(边框)、Padding(补白)、Margin(边界)、背景等等,都是没有继承性的。

  在某些时候继承也会带来一些错误,比如说下面这条CSS定义:

  Body{color:blue}

  这是定义了Body中的文本颜色为蓝色。如果Body中含有表格,在有些浏览器中这句定义会使除表格之外的文本变成蓝色,而表格内部的文本颜色并不是蓝色。从技术上来说,这是不正确的,但是它确实存在。所以我们经常需要借助于某些技巧,比如将CSS定义成这样:

  Body,table,th,td{color:blue}

  这样表格内的文字也会变成蓝色了。

 CSS继承性在应用中存在,那么在样式表中可能会有些读者搞不清,多个样式表同时应用到一个元素对象上会发生什么情形呢?先举个简单的例子,请运行下面的代码:

aisila.com

CSS网页布局 - aisila.com

  我们会看到运行的效果:因为选择符h1和.aaa都匹配上面的h1元素,那么到底浏览器会应用哪一个呢?通过在浏览器中观察,我们发现这段文字应用了.aaa这个样式,所以它显示的是红色。这是因为两条规则的特殊性不一样,CSS规则必须这样进行处理。而字体的大小,却是h1默认的大小。

  样式表中的特殊性描述了不同规则的相对权重,它的基本规则是:

Example Source Code

  统计选择符中的ID属性个数。

  统计选择符中的CLASS属性个数。

  统计选择符中的HTML标记名格式。

  最后,按正确的顺序写出三个数字,不要加空格或逗号,得到一个三位数。( 注意,你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。

  以下是一个按特性分类的选择符的列表:

Example Source Code

  H1 {color:blue;} 特性值为:1

  P EM {color:purple;} 特性值为:2

  .apple {red;} 特性值为:10

  P.bright {color:yellow;} 特性值为:11

  P.bright EM.dark {color:brown;} 特性值为:22

  #id316 {color:yellow} 特性值为:100

  从上表我们可以看出#id316具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。

网站首页 - 关于我们 - 联系我们 - 友情链接 - 帮助中心
Copyright ©2007-2022 www.Aisila.com All Rights Reserved
苏ICP备20008864号-4