国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

【CSS基礎(chǔ)學(xué)習(xí)】CSS的三大特性

2020-4-18    前端達(dá)人

文章目錄


CSS有三大特性,分別是 繼承性,層疊性,優(yōu)先級(jí)。CSS的主要特征是繼承性,這里先講解繼承性。

繼承性

繼承性的使用說(shuō)明

繼承性的描述:
繼承性是指被包在內(nèi)部的標(biāo)簽將擁有外部標(biāo)簽的樣式性,即子元素可以繼承父類的屬性。
例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color: blue;
        }
    </style>
</head>
<body>
    <div>父元素
        <div>子元素
            <p>我依舊是子元素</p>
        </div>
    </div>
</body>
</html>



效果如下:

有圖可見(jiàn),被div包裹住的元素,都具有了div的css樣式屬性,這被我們稱為繼承性。

在CSS中以,text-,font-,line-開(kāi)頭的屬性都是可以繼承的。

CSS繼承的局限性
并不是所有的CSS屬性都可以被繼承的,以下就不具有繼承性:

a標(biāo)簽的字體顏色不會(huì)被繼承,a標(biāo)簽的字體顏色是不會(huì)改變的,可以通過(guò)頁(yè)面的的F12可以查看到,a標(biāo)簽是有一個(gè)默認(rèn)的color:-webkit-link;字體顏色屬性,所以父元素設(shè)置顏色是不能發(fā)生改變a標(biāo)簽字體的顏色。
h標(biāo)簽的字體的大小也是不能被繼承的,如下代碼給父元素在設(shè)置一個(gè)字體屬性20px,再添加一個(gè)h標(biāo)簽,在瀏覽器中可以發(fā)現(xiàn)h標(biāo)簽中字體的大小是不會(huì)發(fā)生改變的,因?yàn)閔標(biāo)簽中有一個(gè)默認(rèn)的font-size:1.5em;字體大小屬性。
div標(biāo)簽的高度如果不設(shè)置由內(nèi)容來(lái)絕對(duì)(沒(méi)有內(nèi)容高度未0),寬度默認(rèn)由父元素繼承過(guò)來(lái)
邊框?qū)傩?br /> 外邊距屬性
內(nèi)邊距屬性
背景屬性
定位屬性
布局屬性
元素寬高屬性
層疊性
層疊性的使用說(shuō)明
層疊性的表述
所謂層疊性是指多種CSS樣式的疊加,例如,當(dāng)使用內(nèi)嵌式CSS樣式表定義p標(biāo)記字號(hào)大小為12像素,ID選擇器定義p標(biāo)記顏色為紅色,那么段落文本將顯示為12像素紅色,即這兩種樣式產(chǎn)生了疊加。
例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            font-size: 32px;
        }
    </style>
</head>
<body>
            <p style="color: blue;">我這里體現(xiàn)了層疊性呀</p>
</body>
</html>



使用結(jié)論
由于內(nèi)容有限,但是結(jié)論是一定的,所以我直接給出結(jié)論:

若多個(gè)選擇器定義的樣式不沖突,則元素應(yīng)用所有選擇器定義的樣式。
若多個(gè)選擇器定義的樣式發(fā)生沖突(比如:同時(shí)定義了字體顏色屬性),則CSS按照選擇器的優(yōu)先級(jí),讓元素應(yīng)用優(yōu)先級(jí)搞得選擇器樣式。
CSS定義的選擇器優(yōu)先級(jí)從高到低為:行內(nèi)樣式–>ID樣式–>類樣式–>標(biāo)記樣式。
如若想直接定義使用哪個(gè)樣式,不考慮優(yōu)先級(jí)的話,則使用!important,把這個(gè)加在樣式后面就行了。
優(yōu)先級(jí)
定義CSS樣式時(shí),經(jīng)常出現(xiàn)兩個(gè)或更多規(guī)則應(yīng)用在同一個(gè)元素上,這時(shí)就會(huì)出現(xiàn)優(yōu)先級(jí)的問(wèn)題。層疊性和選擇器的圈中有很大的關(guān)系。

優(yōu)先級(jí)的使用說(shuō)明
權(quán)重分析:

內(nèi)聯(lián)樣式:如:style="",權(quán)重為1000。
ID選擇器,如:#content,權(quán)重為100。
類,偽類和屬性選擇器,如.content,權(quán)重為10。
標(biāo)簽選擇器和偽元素選擇器,如div p,權(quán)重為1。
繼承樣式,權(quán)重為0。
將基本選擇器的權(quán)重相加之和,就是權(quán)重大小,值越大,權(quán)重越高。
計(jì)算權(quán)重方法
數(shù)標(biāo)簽:先數(shù)權(quán)重最高的標(biāo)簽,然后數(shù)第二高權(quán)重的標(biāo)簽,以此類推,就會(huì)生成一個(gè)數(shù)組,里面包含四個(gè)數(shù)字。
比如(0,0,0,0)分別對(duì)應(yīng)(行內(nèi)式個(gè)數(shù),id選擇器個(gè)數(shù),類選擇器個(gè)數(shù),標(biāo)簽選擇器個(gè)數(shù))
然后兩個(gè)選擇器通過(guò)對(duì)別四個(gè)數(shù)字的大小,確定權(quán)重關(guān)系。
例:
#box ul li a.cur有1個(gè)id標(biāo)簽,1個(gè)類,3個(gè)標(biāo)簽,那么4個(gè)0就是(0,1,1,3)
.nav ul .active .cur有0個(gè)id,3個(gè)類,1個(gè)標(biāo)簽,那么4個(gè)0就是(0,0,3,1)
例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .p1{
            color: blue;
        }
        #p1{
            color: red;
        }
    </style>
</head>
<body>
            <p id="p1" class="p1">我們來(lái)試一下優(yōu)先級(jí)</p>
</body>
</html>


先推測(cè)一波,因?yàn)榍懊嬷v到了ID選擇器的權(quán)重是大于類選擇器的,所以這里顏色應(yīng)該為red。
效果如下:

推測(cè)正確!優(yōu)先級(jí)GET!


日歷

鏈接

個(gè)人資料

存檔