CSS的特性
2020-08-28 本文已影响0人
GaoXiaoGao
CSS的特性
1.层叠性
在两个样式权限相同的情况下，同一个标签中如果样式属性发生冲突，后面的会将前面的属性覆盖掉。
与定义的顺序，与调用的顺序无关
例子如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.a{
color:red;
}
.b{
color:blue;
}
</style>
</head>
<body>
<div class="a b">测试文字</div>
</body>
</html>
//文字最终显示为蓝色，这是css的层叠性
2.继承性
默认情况下子元素未设置样式，会受到父元素的样式影响。
继承发生在嵌套结构中
宽度和高度不能被继承
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
div{
color:red;
font-size: 30px;
font-family: 宋体;
font-weight: 700;
}
</style>
</head>
<body>
<div>测试文字
<p>P元素中的内容</p>
</div>
</body>
</html>
1.color可以被继承
2.font相关的属性可以被继承
3.行高 line-height可以被继承
4.text-align可以被继承
继承中的特殊标签
标签a不能直接受父元素中的文字颜色影响
标题标签不能直接受父元素中的文字大小影响
3.CSS样式的优先级
1.标签选择器 < 类选择器 < id选择器 < 行内选择器 < !important
2.继承的权重为0
3.权重可以叠加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
.one{
color:red;
}
p{
color: blue;
}
</style>
</head>
<body>
<div class="one">测试文字
<p>P元素中的内容</p>
</div>
</body>
</html>
//分析，按照优先级 .one > p的优先级
//但p的 one样式是继承的div的，所以权重为0
//p 标签选择器大于0，所以p标签中的文字显示为蓝色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style type="text/css">
div p{
color:red;
}
p{
color: blue;
}
</style>
</head>
<body>
<div>
<p>P元素中的内容</p>
</div>
</body>
</html>
//分析，由于div p是两个标签 > p一个标签，所以文字显示为红色
//权重叠加导致了文字为红色
