前端的学习之路:初级CSS---继承
程序员文章站
2022-05-10 11:03:13
...
继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>继承</title>
<!-- <link rel="stylesheet" href="../chujicss/css/11.18.01.css"> -->
<style>
/*
样式的继承,我们为一个元素设置的样式同时也会引用到他的后代元素上
继承是发生在祖先后代之间的
继承的设计是为了方便我们的开发
利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上
这样只需设置一次即可让所有的元素都具有该样式
注意:并不是所有的样式都会被继承:
比如 背景相关的,布局相关等的这些样式都不会被继承
*/
p {
color: blue;
background-color: brown;/*这个样式不会被span继承,因为它是背景样式*/
}
div {
color: darkgoldenrod;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span</span>
</p>
<div>
我是div
<span>
我是div中的span
<em>我是span中的em</em>
</span>
</div>
</body>
</html>
运行结果为:
上一篇: 2021/3/12--前端学习第5天笔记
下一篇: linux权限(特殊权限/高级权限)