发布日期:2013-07-09 11:42 来源:张芳芳/侯俊杰 标签: CSS Web 开发 继承性
继承是CSS一个非常重要的特性,它是依赖于HTML中元素节点的父-子级关系(元素的包含关系)的。它允许样式不仅可以应用于当前指定的元素,还可以应用到当前元素下的子元素(当然也包括"孙子"级以上的元素)中。
 

1.5.2  CSS的继承性

继承是CSS一个非常重要的特性,它是依赖于HTML中元素节点的父-子级关系(元素的包含关系)的。它允许样式不仅可以应用于当前指定的元素,还可以应用到当前元素下的子元素(当然也包括"孙子"级以上的元素)中。

比如页面中有以下代码:

  <div id="recolor">

  当前元素的内容

  <div>

  子元素中的内容

  <div>

  下一级子节点(孙子级节点)中的内容

  </div>

  </div>

  </div>

然后为其添加样式:

  <style type="text/css">

  #recolor {

  color:red;

  }

  </style>

这样页面中的所有文本的样式都被设置为红色(red)了。

当然,也不是所有的CSS样式都能够被继承。

CSS提供了智能分析的功能,一些我们一定不想被继承的样式,则不会被子元素继承,比如border、margin、padding、background等。因为一旦这些样式被继承,则会对页面的样式产生非常大的影响,这些是我们不想看到的。

比如刚才的页面代码,我们为其添加一个边框样式,代码如下:

  <style type="text/css">

  #recolor {

  color:red;

  border:solid 3px blue;

  }

  </style>

这样如果border样式被继承,页面中每一行文字将会被一个蓝色的边框套住,但事实上并不是这样,如图1-4所示。

图1-4  样式继承运行结果

从图1-4中可以看到,虽然所有的文本都变成了红色,但是并不是所有的div元素都添加了边框,只是最外层的div(也就是样式设置的当前元素)被添加了一个3像素宽的蓝色实线边框。

 

相关评论

专题信息
    使用CSS样式设置页面的格式,可以将格式控制代码单独存放,对页面样式进行统一管理。页面内容存放在HTML文档中,定义表现形式的CSS规则在HTML文档的头部或另一个文件中声明。将内容与表现形式的声明相分离,不仅可以增加页面的可维护性,而且还可以使HTML文档代码更加简练,HTML文档结构更加清晰,而且能有效地缩短浏览器的加载时间。