ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

【H5/CSS】简单介绍样式的继承

2022-08-06 13:01:23  阅读:33  来源: 互联网

标签:span 样式 继承 元素 H5 color div CSS


样式的继承的意思:

我们为一个元素设置的样式同时也会应用到它的后代元素上,如下的案例可以看到继承是发生在祖先后代之间的,而不会作用到元素外。

案例一:p标签中镶嵌span标签

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			p {
				color: red;
			}
		</style>
	</head>
	<body>
		<p>
			我是一个p元素
			<span>我是p元素中的span</span>
		</p>

		<span>我是p元素外的span</span>
	</body>
</html>

案例二:div中镶嵌spanspan中镶嵌em标签

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			div {
				color: yellowgreen;
			}
		</style>
	</head>
	<body>
		<div>
			我是div
			<span>
				我是div中的span
				<em>我是span中的em</em>
			</span>
		</div>
	</body>
</html>

优点:

  1. 方便开发,可将一些通用的样式统一设置到到共同的祖先元素上

注意点:

并不是所有的样式都会被继承,比如 背景相关的,布局相关等的这些样式都不会被继承。
比如案例一改写CSS的样式如下:

p {
    color: red;
    background-color: orange;
}

尽管可以发现后代都有橙色的背景(使用换行测试<br/>),但是认为后代是因为它们本身的背景就是透明的,所以不认为这背景能继承。

参考(P38)

尚硅谷Web前端零基础入门HTML5+CSS3基础教程丨初学者从入门到精通
视频讲得不是很多,只是粗略地讲解了两个小案例。

标签:span,样式,继承,元素,H5,color,div,CSS
来源: https://www.cnblogs.com/PaturNax/p/16556878.html

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有