CSS样式继承性
原文:CSS样式继承性
CSS样式继承介绍
- 外层元素身上的样式会被内层元素所继承。
- 当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式。
- 并不是所有的样式都能够继承，只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承。
CSS样式继承实践
外层元素身上的样式会被内层元素所继承，这句话的实践。
代码块
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>继承性</title>
<style>
body{
color: red;
}
</style>
</head>
<body>
<div>
<h2>微笑是最初的信仰</h2>
<p>微笑是最初的信仰</p>
</div>
</body>
</html>结果图
当内层元素身上的样式与外层的元素身上的样式相同时内层元素样式会覆盖外层元素样式，这句话的实践。
代码块
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>继承性</title>
<style>
body{
color: red;
font-size: 18px;
}
div{
color: springgreen;
}
</style>
</head>
<body>
<div>
<h2>微笑是最初的信仰</h2>
<p>微笑是最初的信仰</p>
</div>
</body>
</html>结果图
并不是所有的样式都能够继承，只有文本与字体样式属性才能够被继承，其余的样式属性不可以被继承，这句话的实践。
代码块
Copy<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>继承性</title>
<style>
body{
color: red;
font-size: 18px;
}
div{
color: springgreen;
border: 1px solid red;
}
</style>
</head>
<body>
<div>
<h2>微笑是最初的信仰</h2>
<p>微笑是最初的信仰</p>
</div>
</body>
</html>结果图
相关推荐
opspider 2020-06-28
ZHANGRENXIANG00 2020-06-28
明瞳 2020-06-10
lanzhusiyu 2020-06-09
HSdiana 2020-06-03
PengQ 2020-05-26
lengyu0 2020-05-20
HSdiana 2020-05-11
haidaoxianzi 2020-04-18
PioneerFan 2020-04-09
HSdiana 2020-03-28
百年da孤独 2020-03-27
lwb 2020-03-26
haocxy 2020-03-08
spinachcqb 2020-03-06
柳永法的个人 2020-02-13
qsdnet我想学编程 2020-01-29
wwwxuewen 2020-01-19