ICode9

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

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

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

标签: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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

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

ICode9版权所有