CSS的三大特性
阿新 • • 發佈：2017-11-26
title oct shee font 相同 ati 優先 charset 並不是
繼承性
<!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>
CSS的三大特性