CSS继承----深入剖析（1）

sunhw0725 · 发表于 2007-10-8 14:30:30

CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设，即整体布局声明。而需要要指定为其它样式的部份设定在个别元素里即可达到效果。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则，应用的时候容易让人迷惑。
　　CSS允许我们为文档设置更为丰富且便于修改的外观。我们现在主要想和朋友们一起对CSS的继承性进行一点深入的探讨。

　　CSS的一个主要特征就是继承，它是依赖于祖先—后代的关系的。继承是一种机制，它允许样式不仅可以应用于某个特定的元素，还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。下面举例说明：

Example Source Code
　　样式定义：body{color:blue;}
　　应用举例代码：<p>CSS<strong>继承性</strong>之深入剖析</p>

　　看下面的这个例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.chinahtml.com</title><style type="text/css"></style></head><body><p>CSS<strong>继承性</strong>之深入剖析 - chinahtml.com</p></body></html>

　运行上面的代码，我们看到的结果是：“CSS继承性之深入剖析”这段话是蓝色。“继承性”由于应用了strong元素，所以是粗体。这很符合作者的意图，也是为什么CSS继承了一部分的原因。

　　在实际工作中，我们编写代码，往往在CSS文档的最前部，首先定义：

Example Source Code

*{margin: 0; padding: 0; border: 0;}

　　这些代码的真正用意在于，在缺省定义的情况下，所有无素的margin、padding、border的值都为零。当需要应用不同的样式的时候，再单独的对某元素进行定义即可。也就是整个网页的样式预设、整体布局声明。而需要指定为其它样式的部份设定在个别元素里即可达到效果。

sunhw0725 · 发表于 2007-10-8 14:31:05

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

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

　　多数边框类的属性，如：Border（边框）、Padding（补白）、Margin（边界）、背景等等，都是没有继承性的。

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

　　Body{color:blue}

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

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

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

sunhw0725 · 发表于 2007-10-8 14:31:21

CSS继承性在应用中存在，那么在样式表中可能会有些读者搞不清，多个样式表同时应用到一个元素对象上会发生什么情形呢？先举个简单的例子，请运行下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>www.chinahtml.com</title><style type="text/css"></style></head><body><h1 class="aaa">CSS网页布局 - www.chinahtml.com</h1></body></html>

　　我们会看到运行的效果：因为选择符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具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。

		自动登录	找回密码
密码			注册

全国各地医院查询	重量转换换算	RGB颜色查询	交通标志大全	各类快递查询
简体繁体转换	黄金价格实时走势	万年历查询	实时汇率转换	列车时刻查询
在线翻译工具	CSS中文手册	HTML学习教程	MySQL中文手册	JavaScript中文手册
PHP安全基础手册	PHP5面向对象编程教程	正则表达式系统教程	SQL Server精华	Apache 2.2 中文手册
DOS命令全集指南	windows脚本技术中文版	股票行情查询	历史上的今天	邮编区号查询
长度转换换算	货币汇率转换	常用电话号码	体育彩票查询	手机位置查询
域名Whois信息查询	谷歌PR值查询	台州网站建设	台州网站开发	台州域名注册
天气预报查询	长度转换换算器	在线电子地图	车牌号码查询	中国百家姓查询

CSS继承----深入剖析（1）

相关帖子

CSS继承---深入剖析（2）

CSS继承----深入剖析（3）