CSS的三大特性
2017-11-26 11:23
555 查看
继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
div {
color:red;
font-size:30px;
background:skyblue;
text-decoration: none;
}
</style>
</head>
<body>
<!--
1：什么是继承性？给父元素设置一些属性，子元素也可以使用
注意点：
1：并不是所有的属性都可以继承，只有以color/font-/text-/line开头的才可以继承
2：在CSS的继承中不仅仅是儿子可以继承，只要是后代都可以继承
3：CSS继承性中的特殊性：
a标签的文字颜色和下划线是不能继承的
h标签的文字大小是不能继承的
-->
<div>
<p>CSS的继承性（继承DIV属性，但不继承background属性）</p>
</div>
<div>
<ul>
<li>
<p>这是一个段落（继承DIV属性，但不继承background属性）</p>
</li>
</ul>
</div>
<div>
<a href="#">这是一个超链接（不继承DIV属性）</a>
</div>
<div>
<h1>这是一个标题（不继承DIV文字大小的属性）</h1>
</div>
</body>
</html>层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
p {
color:red;
}
.para {
color:blue;
}
</style>
</head>
<body>
<!--
1：什么是层叠性？层叠性就是CSS处理冲突的一种能力
注意点：
层叠性只有在多个选择器选中“同一标签”，然后又设置了“相同的属性”，才会发生层叠性
CSS全称：Cascading StyleSheet
-->
<p id="identity" class="para">这是段落</p>
</body>
</html>优先级
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
/*
ul {
color:red;
}
li {
color:blue;
}*/
</style>
</head>
<body>
<!--
1：什么是优先级？当多个选择器选中同一个标签，并且给同一个标签设置相同的属性时，如何层叠就由优先级来确定
2：优先级判断的三种方式
2.1 是否是直接选中（间接选中就是指继承）；如果是间接选中，那么就是谁离目标近就继承谁
2.2 是否是相同的选择器，如果都是直接选中并且都是同类型的选择器，那么就是谁写在后面就听谁的
2.3 不同选择器：如果都是直接选中，并且不是相同类型的选择器，那么就会按照选择器的优先级来层叠
id > 类 > 标签 > 通配符 > 继承 > 浏览器默认
-->
<ul>
<li>
<p id="identity" class="para">这是段落</p>
</li>
</ul>
</body>
</html>!important
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5+CSS3</title>
<style>
* {
margin:0;
padding:0;
font-family: "Microsoft YaHei";
}
#identity {
color:purple;
}
p {
color:green !important;
}
</style>
</head>
<body>
<!--
1：什么是important
作用：用于提升某个直接选中标签的选择器中的某个属性的优先级的，可以将被指定的属性的优先级提升为最高
注意点：
1：important只能用于直接选中，不能用于间接选中
2：通配符选择器选中的标签也是直接选中的
3：!important只能提升被指定的属性的优先级，其它的属性的优先级不会被提升
4：!important必须要写到分号的前面且感叹号不能省略
-->
<ul>
<li>
<p id="identity" class="para">这是段落</p>
</li>
</ul>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 