CSS中样式继承需要注意的一些问题

最新推荐文章于 2020-09-08 18:42:46 发布

trustnature

最新推荐文章于 2020-09-08 18:42:46 发布

阅读量159

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/trustnature/article/details/93036387

本文深入讲解CSS样式的继承机制，包括哪些属性可以被继承、如何避免不必要的继承影响以及如何利用继承特性提高网页设计效率。

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

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

如：

<html>

</style>

</head>

<body>

</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}

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

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