web前端技術(shù)中，css樣式是非常常見的一個(gè)內(nèi)容，我們在學(xué)習(xí)web前端技術(shù)的時(shí)候css樣式也是會(huì)學(xué)到的，本期小編給大家介紹的web前端培訓(xùn)教程就是CSS層疊性和繼承性的概念區(qū)別，來看看下面的詳細(xì)內(nèi)容吧。

　　web前端培訓(xùn)教程：CSS層疊性和繼承性的概念區(qū)別

　　CSS是層疊式樣式表的簡稱，層疊性和繼承性是其基本特征。對(duì)于網(wǎng)頁設(shè)計(jì)師來說，應(yīng)深刻理解和靈活運(yùn)用這兩個(gè)概念。

　　1.層疊性

　　層疊性是指多種CSS樣式的疊加。例如，當(dāng)使用內(nèi)嵌式CSS樣式表定義

標(biāo)記字號(hào)大小為12m，外鏈?zhǔn)蕉x

標(biāo)記顏色為紅色，那么段落文本將顯示為12p既這兩種樣式產(chǎn)生了疊加。

　　2.繼承性

　　繼承性是指書寫CSS樣式表時(shí)，子標(biāo)記會(huì)繼承父標(biāo)記的某些樣式，如文本顏色和字號(hào)。例如，定義主體標(biāo)記body的文本顏色為黑色，那么頁面中所有的文本都將顯示為黑色，這是因?yàn)槠渌麡?biāo)記都嵌套在標(biāo)記中，是標(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á)到相同的控制效果，且代碼更簡潔(第一種寫法中有一些陌生的標(biāo)記，了解即可)。

　　恰當(dāng)?shù)厥褂美^承可以簡化代碼，降低CSS樣式的復(fù)雜性。但是，如果在網(wǎng)頁中所有的標(biāo)記都大量繼承樣式，那么判斷樣式的來源就會(huì)很困難，所以對(duì)于字體、文本屬性等網(wǎng)頁中通用的樣式可以選用繼承。例如，字體、字號(hào)、顏色等可以在body標(biāo)記中統(tǒng)一設(shè)置，然后通過繼承影響文檔中所有文本。

　　需要注意的是，并不是所有的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)題沒有繼承文本字號(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)。

　　關(guān)于“CSS層疊性和繼承性的概念區(qū)別”的web前端培訓(xùn)教程就是以上介紹的這些了，如果對(duì)于web前端培訓(xùn)課程還有具體想了解的問題，可以咨詢我們的客服小姐姐，他們會(huì)為您做一對(duì)一的解答哦。