HTML+CSS 轻松入门之继...LOGIN

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 样式

下一节
<!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>
提交重置代码
章节课件