HTML+CSS 轻松入门之继承
css是层叠样式表(cascading style sheets)的简称,它的规范代表了互联网历史上一个独特的发展阶段。现在对于从事网页制作的朋友来说,很少没有听说过css了吧,因为在制作网页过程中我们经常需要用到。
css允许我们为文档设置更为丰富且便于修改的外观,可以减轻网页设计者的工作负担。这里我们主要想和朋友们一起对css的继承性和特殊性进行一点深入的探讨
一、继承
css的一个主要特征就是继承,它是依赖于祖先-后代的关系的。继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代
继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代。比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签,还应用于p标签中的所有子元素文本
p{color:red}
当我们有一个p标签,p标签内有元素都会使用p 标签的样式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>继承</title> <style type="text/css"> p{ color:red; } </style> </head> <body> <p> css继承性 <span>重要性</span> </p> </body> </html>
二、css继承的局限性
在css中,继承是一种非常自然的行为,我们甚至不需要考虑是否能够这样去做,但是继承也有其局限性。
首先,有些属性是不能继承的。这没有任何原因,只是因为它就是这么设置的。举个例子来说:border属性,大家都知道,border属性是用来设置元素的边框的,它就没有继承性。多数边框类属性,比如象padding(补白),margin(边界),背景和边框的属性都是不能继承的。
三、继承中容易引起的错误
有时候继承也会带来些错误
四、多种样式混合应用
既然有了继承性,那么在样式表中的应用上可能会有些读者搞不清,多个样式表同时应用到一个对象上会发生什么情形呢
五、css继承的优先级问题
使用离文档近的css 样式