P18-前端基础-CSS样式的继承
【摘要】
P18-前端基础-CSS样式的继承
1.概述
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上 继承是发生在祖先后后代之间的 继承的设计是为了方便我们的开发，
利用继承我们可...
P18-前端基础-CSS样式的继承
1.概述
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发，
- 利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
- 这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：
比如 背景相关的，布局相关等的这些样式都不会被继承
2.CSS样式的继承案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>样式的继承</title>
<style>
/*
样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上
继承是发生在祖先后后代之间的
继承的设计是为了方便我们的开发，
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，
这样只需设置一次即可让所有的元素都具有该样式
注意：并不是所有的样式都会被继承：
比如 背景相关的，布局相关等的这些样式都不会被继承。
*/
/* 将一些通用的样式统一设置到共同的祖先元素上 */
body {
font-size: 20px;
}
/* span继承了p元素的样式 */
p {
color: springgreen;
}
/* span和em分别继承了div元素的样式 */
div {
color: steelblue;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>我是p元素外的span</span>
<div>
我是div
<span>
我是div中的span
<em>我是span中的em</em>
</span>
</div>
</body>
</html>
3.预览效果
文章来源: brucelong.blog.csdn.net，作者：Bruce小鬼，版权归原作者所有，如需转载，请联系作者。
原文链接：brucelong.blog.csdn.net/article/details/112777672
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）