教育行業(yè)A股IPO第一股(股票代碼 003032)

全國(guó)咨詢(xún)/投訴熱線:400-618-4000

CSS的三大特性介紹

更新時(shí)間:2021年08月31日13時(shí)58分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

CSS 有三個(gè)非常重要的三個(gè)特性:層疊性、繼承性、優(yōu)先級(jí)。

1. 層疊性

相同選擇器給設(shè)置相同的樣式,此時(shí)一個(gè)樣式就會(huì)覆蓋(層疊)另一個(gè)沖突的樣式。層疊性主要解決樣式?jīng)_突的問(wèn)題。 

層疊性原則: 

樣式?jīng)_突,遵循的原則是就近原則,哪個(gè)樣式離結(jié)構(gòu)近,就執(zhí)行哪個(gè)樣式。 

樣式不沖突,不會(huì)層疊。

CSS 三大特性:層疊性、繼承性、優(yōu)先級(jí)

CSS 層疊性口訣:長(zhǎng)江后浪推前浪,前浪死在沙灘上。

2.繼承性

現(xiàn)實(shí)中的繼承: 我們繼承了父親的姓

CSS中的繼承: 子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式,如文本顏色和字號(hào)。簡(jiǎn)單的理解就是:子承父業(yè)。

恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼,降低 CSS 樣式的復(fù)雜性

子元素可以繼承父元素的樣式(text-,font-,line-這些元素開(kāi)頭的可以繼承,以及color屬性)

CSS 三大特性:層疊性、繼承性、優(yōu)先級(jí)

繼承性口訣:龍生龍,鳳生鳳,老鼠生的孩子會(huì)打洞。

行高的繼承性

body { 
font:12px/1.5 Microsoft YaHei; 
}

注意:
 行高可以跟單位也可以不跟單位

 如果子元素沒(méi)有設(shè)置行高,則會(huì)繼承父元素的行高為 1.5

 此時(shí)子元素的行高是:當(dāng)前子元素的文字大小 * 1.5

 body 行高 1.5 這樣寫(xiě)法最大的優(yōu)勢(shì)就是里面子元素可以根據(jù)自己文字大小自動(dòng)調(diào)整行高

3.優(yōu)先級(jí)

優(yōu)先級(jí)的選擇器權(quán)重如下表所示。

CSS 三大特性:層疊性、繼承性、優(yōu)先級(jí)

優(yōu)先級(jí)注意點(diǎn):

1. 權(quán)重是有4組數(shù)字組成,但是不會(huì)有進(jìn)位。

1. 可以理解為類(lèi)選擇器永遠(yuǎn)大于元素選擇器, id選擇器永遠(yuǎn)大于類(lèi)選擇器,以此類(lèi)推..

2. 等級(jí)判斷從左向右,如果某一位數(shù)值相同,則判斷下一位數(shù)值。

3. 可以簡(jiǎn)單記憶法: 通配符和繼承權(quán)重為0, 標(biāo)簽選擇器為1,類(lèi)(偽類(lèi))選擇器為10, id選擇器100, 行內(nèi)樣式表為1000, !important 無(wú)窮大.

4. 繼承的權(quán)重是0,如果該元素沒(méi)有直接選中,不管父元素權(quán)重多高,子元素得到的權(quán)重都是0。

權(quán)重疊加:如果是復(fù)合選擇器,則會(huì)有權(quán)重疊加,需要計(jì)算權(quán)重。

div ul li ------> 0,0,0,3 .nav ul li ------> 0,0,1,2 
a:hover -----—> 0,0,1,1 
.nav a ------> 0,0,1,1




猜你喜歡:

CSS中overflow屬性是怎樣處理溢出內(nèi)容的?

什么是transform?【CSS transform屬性】

CSS3的三種屬性選擇器介紹

傳智教育前端與移動(dòng)開(kāi)發(fā)培訓(xùn)

0 分享到:
和我們?cè)诰€交談!