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

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

CSS層疊性和繼承性的概念有什么不同

更新時(shí)間:2022年01月11日17時(shí)40分 來(lái)源:傳智教育 瀏覽次數(shù):

CSS是層疊式樣式表的簡(jiǎn)稱,層疊性和繼承性是其基本特征。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師來(lái)說(shuō),應(yīng)深刻理解和靈活運(yùn)用這兩個(gè)概念。
1.層疊性
層疊性是指多種CSS樣式的疊加。例如,當(dāng)使用內(nèi)嵌式CSS樣式表定義<p>標(biāo)記字號(hào)大小為12m,外鏈?zhǔn)蕉x<p>標(biāo)記顏色為紅色,那么段落文本將顯示為12p既這兩種樣式產(chǎn)生了疊加。


2.繼承性
繼承性是指書寫CSS樣式表時(shí),子標(biāo)記會(huì)繼承父標(biāo)記的某些樣式,如文本顏色和字號(hào)。例如,定義主體標(biāo)記body的文本顏色為黑色,那么頁(yè)面中所有的文本都將顯示為黑色,這是因?yàn)槠渌麡?biāo)記都嵌套在<body>標(biāo)記中,是<body>標(biāo)記的子標(biāo)記。
繼承非常有用,可以不必在標(biāo)記的每個(gè)后代上添加相同的樣式。如果設(shè)置的屬性是一個(gè)可繼承的屬性,只需將它應(yīng)用于父標(biāo)記即可,例如下面的代碼:
p, div, hl, h2, h3, h4, ul, ol, dl, li(color: black;}

就可以寫成:

body( color:black;}

第二種寫法可以達(dá)到相同的控制效果,且代碼更簡(jiǎn)潔(第一種寫法中有一些陌生的標(biāo)記,了解即可)。
恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼,降低CSS樣式的復(fù)雜性。但是,如果在網(wǎng)頁(yè)中所有的標(biāo)記都大量繼承樣式,那么判斷樣式的來(lái)源就會(huì)很困難,所以對(duì)于字體、文本屬性等網(wǎng)頁(yè)中通用的樣式可以選用繼承。例如,字體、字號(hào)、顏色等可以在body標(biāo)記中統(tǒng)一設(shè)置,然后通過(guò)繼承影響文檔中所有文本。
需要注意的是,并不是所有的CSS屬性都可以繼承,例如,下面的屬性就不具有繼承性。

邊框?qū)傩裕?如border、border-top、border-right、border-bottom等。
外邊距屬性,如margin、margin-top、margin-bottom、margin-left等。
內(nèi)邊距屬性,如padding、padding-top、padding-right、padding-bottom等。
背景屬性,如background、background-image、background-repeat等。
定位屬性,如position、top、right、bottom、left、z-index等。
布局屬性, 如clear、float、clip、display、overflow等。
元素寬高屬性,如width、height。


注意:當(dāng)為body標(biāo)記設(shè)置字號(hào)屬性時(shí),標(biāo)題文本不會(huì)采用這個(gè)樣式,可能會(huì)認(rèn)為標(biāo)題沒(méi)有繼承文本字號(hào),這種認(rèn)識(shí)是錯(cuò)誤的。標(biāo)題文本之所以不采用body標(biāo)記設(shè)置的字號(hào),是因?yàn)闃?biāo)題標(biāo)記h1~h6有默認(rèn)字號(hào)樣式,這時(shí)默認(rèn)字號(hào)覆蓋了繼承的字號(hào)。






猜你喜歡:

哪些css屬性可以繼承?哪些不可以繼承?

css浮動(dòng)布局的特點(diǎn)是什么?

常用css鼠標(biāo)樣式介紹

css link和@import的區(qū)別是什么?

傳智教育HTML前端開(kāi)發(fā)培訓(xùn)

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