一点关于CSS中样式继承的问题

我们在做网页的时候可能会发现,对于一个已经做好的网页如果我只需要去修改其中某一块的样式,例如颜色的时候发现去修改样式表文件往往不起作用,而如果写一个行内样式的话就可以得到想要的效果,很多时候我们还找不到原因,其实这里面很大程度是样式继承做的怪,所以这里我们有必要来共同来探讨一下CSS样式的继承。

CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的应用通常发挥在整个网页的样式预设,即整体布局声明。而需要要指定为其它样式的部份设定在个别元素里即可达到效果。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应用的时候容易让人迷惑。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代。例如一个BODY定义了的颜色值也会应用到段落的文本中。

如:

 <html>

<head><titile><?title></head>

<style type="text/css">

<!-- body{color:blue;}-->

</style>

</head>

<body>

<p><strong>内容文字</strong></p>

</body>

</html>

运行上面的代码,我们看到的结果是:“内容文字”由于应用了strong元素,所以是粗体。这很符合,但是同时它也是蓝色,这就是CSS继承了一部分的原因。

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

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

因为我们可以看到,在默认情况下,浏览器是有一个默认边距的,这对我们在做网页的时候造成了很多不方便,所以这些代码的真正用意在于,在缺省定义的情况下,所有无素的margin、padding、border的值都为零。当需要应用不同的样式的时候,再单独的对某元素进行定义即可。也就是整个网页的样式预设、整体布局声明。而需要指定为其它样式的部份设定在个别元素里即可达到效果。

但是需要看到的是,并不是所有的样式会被继承,有些属性是不能继承的。这似乎也没有什么道理可讲,只是因为它就是这么设置的,标准就是如此。举个例子来说:border属性就没有,我们为UL设置了border但是LI也没有这个样式,这里需要说明的是多数边框类的属性,如:Border(边框)、Padding(补白)、Margin(边界)、背景等等,都是没有继承性的。

但是一定需要说明的是继承并不是一直传递的,比如说下面这条CSS定义:

  Body{color:blue}

  这是定义了Body中的文本颜色为蓝色。如果Body中含有表格,在有些浏览器中这句定义会使除表格之外的文本变成蓝色,而表格内部的文本颜色并不是蓝色。

这似乎说明了继承只是往下传递一级,如果你需要多个级别的标签这个样式,那需要这么写

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

这个效果就是你需要的了。

继承是一个比较麻烦的东西,很多时候出现了与我们常规思维不一致的效果的时候就应该考虑是不是继承在里面作怪了!

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值