ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
上海网站建设 网站建设 域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg ACG玩家 品牌设计
求创科技
网站建设
中国互联
投稿
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 深入了解CSS的继承性及其应用

深入了解CSS的继承性及其应用

来源:中国设计秀    作者:    点击:20     加入收藏

  所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容易让人迷惑,donger今天就专门和大家聊聊这方面的应用。

  正文

  CSS是层叠样式表(Cascading Style Sheets)的简称,它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,很少没有听说过CSS了吧,因为在制作网页过程中我们经常需要用到。

  CSS允许我们为文档设置更为丰富且便于修改的外观,可以减轻网页设计者的工作负担。这里我们主要想和朋友们一起对CSS的继承性和特殊性进行一点深入的探讨。

  一、继承

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

  样式定义:body{color:red;}

  应用举例代码:

CSS的层叠和继承深入探讨

  应用举例效果:

  这段代码的应用结果是:“CSS的层叠和继承深入探讨”这段话是红颜色的,“层叠和继承”由于应用了strong元素,所以是粗体。这很符合制作者的意图,也是为什么继承是CSS的一部分的原因。

  二、CSS继承的局限性

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

  首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。如下图所示,如果继承了边框属性,那么文档看起来就会很奇怪,除非采取另外的措施关掉边框的继承属性。

  

  如上图所示,多数边框类属性,比如象Padding(补白),Margin(边界),背景和边框的属性都是不能继承的。
三、继承中容易引起的错误

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

  Body{color:blue}

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

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

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

  四、多种样式混合应用

  既然有了继承性,那么在样式表中的应用上可能会有些读者搞不清,多个样式表同时应用到一个对象上会发生什么情形呢?先举个简单的例子:

  样式定义:.apple{color:red;}  H1{color:yellow;}

  应用举例代码:

这儿的苹果好红啊

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

  

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

  统计选择符中的ID属性个数。
  统计选择符中的CLASS属性个数。
  统计选择符中的HTML标记名格式。

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

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

  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具有更高的特殊性,因而它有更高的权重。当有多个规则都能应用于同一个元素时,权重越高的样式将被优先采用。


六、人为定义CSS继承优先级

  在制作网页的过程中,我们可能想要设置某个规则比其他的规则更重要,CSS中允许这样设置,它们被称为重要规则(important rule)。这是根据其声明的方式和它们的自然属性来命名的。通过在一条规则的分号前插入!important这样一个短语来标记一条重要规则,比如说:

  P.apple {color:#red !important; background:white;}

  颜色值#red被标记为!important,而背景色white未被标记,如果需要二条规则都是重要的话,那么每条规则都需要标上!important。

  正确地放置!important的位置是很重要的,否则整条规则将为无效。!important总是放在规则声明的最后,在分号之前。

  标记为!important的规则具有最高的权值,也就是说他没有具体的特性值,但是比其他的权值都要大。需要注意的是,虽然制作者定义的样式比用户定义的样式具有更高权值时,但!important规则恰恰相反:重要的用户定义规则要比制作者定义的样式具有更高权值,即使是标记为!important的重要规则也是如此。

  看了这么多文字介绍后,我们来举个例子看一下:

  样式定义:
  H1 {color:gray !important;}

  
应用举例代码:
  

看这儿!



  应用举例效果:
  !important规则会覆盖内联STYLE属性的内容,所以结果文字是灰色的而不是黑色的。

  

  还有最后一种需要考虑的情况:继承值总是具有特性值0的特点,即使是从带有!important的规则继承的值也是如此,在匹配重要规则的元素之外,重要性也会随之消失,这点是需要我们特别注意的!

0
顶一下
2005-09-21 17:01:00    出处:http://www.cnwebshow.com
Google
热点文章/相关文章

音乐
嫁衣 画心 放生 天亮了 牡丹江 那滋味 擦肩而过 怀念过去 北京欢迎你 突然好想你 吻的太逼真 说好的幸福呢 坐上火车去拉萨 没有人比我更爱你
愚爱 心碎 稻香 带我走 醉赤壁 魔杰座 我还想她 明天过后 一定要爱你 等爱的玫瑰 原谅我一次 越单纯越幸福 最后一次的温柔 给我一首歌的时间
白狐 光荣 降临 下雨天 小酒窝 樱花草 恋爱新手 说唱脸谱 红色高跟鞋 寂寞才说爱 深深爱过你 爱上你是个错 即使知道要见面 不是因为寂寞才想你
城府 假如 花海 兰亭序 棉花糖 舍不得 最后一次 女人如烟 外滩十八号 我们的纪念 我们的无奈 心在跳情在烧 爱上你是我的错 爱情里没有谁对谁错
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口