CSS的三大特性

時間 2019-12-12

標籤 css 三大特性欄目 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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。