CSS的三大特性
2018-02-13 本文已影响2人
追逐_chase
timg.jpg
继承性
- 子标签可以继承父类的标签的样式
- 并不是所有的属性都可以继承的
- color,text-开头，line-开头，font-开头的 可以继承，关于文字样式的可以继承，所有关于盒子的，定位的，布局的属性不可以继承
- a标签是不可以继承父类的color和font的
- div设置文字样式，它的子类就会继承这些样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
div{
color: red;
text-decoration: underline;
font-size: 40px;
}
</style>
</head>
<body>
<div>
<a>这是一个标题</a>
<p>是一个段落</p>
<ul>
<li>这是个列表</li>
</ul>
</div>
</body>
</html>
继承性.png
层叠性 和 权重
- 层叠性是css解决冲突的能力
- 层叠性能力大小要根据权重的高低来决定
-
权重的大小是要数 Id选择器，class选择器，标签选择器的数量来决定的
权重.png
权重.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS之选择器</title>
<!-- 样式-->
<style type="text/css">
#box1 .hezi2 p {
color: red;
}
div div #box3 p {
color: green;
}
div.hezi1 div.hezi2 div.hezi3 {
color: blue;
}
</style>
</head>
<body>
<div class="hezi1" id="box1">
<div class="hezi2" id="box2">
<div class="hezi3" id="box3">
<p> 我是什么颜色</p>
</div>
</div>
</div>
</body>
</html>
- 如果权重一样，谁在后听谁的
权重一样，听后面的.png
-
在设置 文本的样式的时候，必须是选中的，如果没有选中的话，通过继承类的，那权重是0。
是否选中目标标签.png
-
在层叠性的继承中，如果都没有选中目标标签，那个描述的距离目标标签进，就听那个的。
-
!important注意点
-
! important的提升的是一个属性，并不是选择器
-
! important无法提升继承的权重
是否选中目标标签.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>important提升权重</title>
<style type="text/css">
p{
color: red !important;
font-size: 60px;
}
.pp{
color: purple;
font-size: 70px;
}
#op{
color: orange;
font-size: 80px;
}
</style>
</head>
<body>
<div>
<p class="pp" id="op" >
这是一个段落
</p>
</div>
</body>
</html>
提升的是咦个属性.png
