CSS的三大特性


繼承性

<!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>

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM