css三大特性
2020-07-22 本文已影响0人
web_jianshu
５.1 层叠性
当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码(后边代码层叠前边的代码)。和标签调用选择器的顺序没有关系。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.box2 {
font-size: 200px;
color: blue;
}
.box {
font-size: 60px;
color: red;
}
</style>
</head>
<body>
<div class="box box2 ">14威武</div>
</body>
</html>
层叠性
５.2 继承性
继承性发生的前提是包含（嵌套关系）
★文字颜色可以继承
★文字大小可以继承
★字体可以继续
★字体粗细可以继承
★文字风格可以继承
★行高可以继承
总结：文字的所有属性都可以继承。(风格 粗细 大小/行高 字体) + 颜色
◆特殊情况：
h系列不能继承文字大小。
a标签不能继承文字颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.father {
color: red;
font: italic 700 40px/40px microsoft yahei;
}
.box {
font-size: 30px;
color: yellow;
}
</style>
</head>
<body>
<div class="father">
<p>14期威武</p>
</div>
<div class="box">
<h1>14期威武</h1>
<h2>14期威武</h2>
<p>14期霸气</p>
</div>
<div class="box">
<a href="#">14期高薪</a>
</div>
</body>
</html>
继承性
５.3 优先级
默认样式<标签选择器<类选择器<id选择器<行内样式<!important
0 1 10 100 1000 1000以上
◆优先级特点
★继承的权重为0
★权重会叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.box {
color: green;
font-size: 60px;
}
#con {
color: pink;
font-size: 100px;
}
div {
color: red !important;
font-size: 60px !important;
}
</style>
</head>
<body>
<div class="box" id="con" style="font-size:12px; color:yellow;">
14期威武
</div>
</body>
</html>
优先级
继承的权重为0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
.father {
font-size: 60px;
color: red;
}
#box {
color: green;
font-size: 500px;
}
p {
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<div class="father" id="box">
<p>14期威武</p>
</div>
</body>
</html>
继承的权重为0
权重会叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
/* 1 + 10 */
p.son {
font-size: 120px;
color: yellow;
}
/* 1 */
p {
font-size: 30px;
color: red;
}
/* 10 + 10 */
.father .son {
font-size: 500px;
color: pink;
}
/* 10 */
.son {
font-size: 60px;
color: blue;
}
/* 10 + 100 */
.father #baby {
font-size: 12px;
color: orange;
}
</style>
</head>
<body>
<div class="father">
<p class="son" id="baby">14期威武</p>
</div>
</body>
</html>
权重会叠加
