CSS三大特性
2018-03-29 本文已影响0人
fdjiangwu
CSS有三大特性，分别是继承性，层叠性，优先级。
继承性
继承性是指指被包在内部的标签将拥有外部标签的样式性，即后代元素可以继承祖先元素的属性， 在CSS中以text-、font-、line- 开头的属性都是可以继承的。更详细的可以继承的属性如下：
/*常用*/
a
color
cursor
direction
font
letter-spacing
line-height
list-style
text-align
text-indent
text-shadow
text-transform
white-space
word-break
word-spacing
word-wrap
writing-mode
/*不常用*/
caption-side
empty-cells
text-combine-upright
text-orientation
text-rendering
text-underline-position
widows
请看下面的例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>
<p>苹果</p>
<p>香蕉</p>
<span>葡萄</span>
</div>
</body>
</html>
结果显示如下
20160825225937698.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>24-css三大特性之继承性.html</title>
<style>
div{
color: red;
font-size:30px;
/*background: green;*/
text-decoration: none;
}
</style>
</head>
<body>
<!--
继承性(inheeited)，子类可以使用父类的属性
注意点:
1.不是所有的属性都可以继承,只有以color/font-/text-/line开头的属性才可以继承
2.在css中的继承不仅是儿子才可以继承,只要是后代就可以继承
3.css继承性中的特殊性
a标签的文字颜色和下划线是不能被继承的
h标签的文字大小是不能被继承的
应用场景：一般用于设置网页上的一些共性信息 body{}
-->
<div>
<p>我是段落</p>
</div>
<div>
<ul>
<li>
<p>我是段落</p>
</li>
</ul>
</div>
<div>
<a href="#">我是超链接</a>
</div>
<div>
<h1>我是标题</h1>
</div>
</body>
</html>
层叠性
层叠性体现在处理css冲突的能力。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>25-css三大特性之层叠性.html</title>
<style>
p{
color: red;
}
.para{
color: aqua;
}
</style>
</head>
<body>
<!--
层叠性只有在多个选择器选中"同一个标签",然后又设置了"相同的属性",才会发生层叠性
CSS:Cascading Style Sheets 层叠样式表
-->
<p id="identity" class="para">我是段落</p>
</body>
</html>
优先级
当多个选择器选中同一个标签时,并且给同一个标签设置相同的属性时,如何层叠就由优先级来决定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>26-css三大特性之优先级.html</title>
<style>
#id1{
color: blue;
}
.para{
color: red;
}
</style>
</head>
<body>
<!--
判断条件:
1.是否是直接选中,就是直接第一次选中的就是要设置的标签,例如
p{}
#identity{}
.para
2.间接选中,就是继承,谁离目标标签近就会继承谁的属性,例如
ul{}
li{}
3.相同的选择器,如果都是直接选中,并且都是同类型的选择器,谁在后边就听谁的,例如
p{ }
p{}
4.不同选择器,如果都是直接选中,并且不是同类型的选择器,那么就会按照选择器的优先级来层叠,例如
id>类>标签>通配符>继承>浏览器
5.!important 用于提升某个直接选中标签的选择器的某个属性的优先级,可以将被指定的属性的优先级提升为最高
-->
</body>
<ul>
<li>
<p id="id1" class="para">我是段落</p>
</li>
</ul>
</html>
