
web前端技術(shù)中,css樣式是非常常見的一個內(nèi)容,我們在學(xué)習(xí)web前端技術(shù)的時候css樣式也是會學(xué)到的,本期給大家介紹的就是CSS層疊性和繼承性的概念區(qū)別,來看看下面的詳細內(nèi)容吧。
CSS是層疊式樣式表的簡稱,層疊性和繼承性是其基本特征。對于網(wǎng)頁設(shè)計師來說,應(yīng)深刻理解和靈活運用這兩個概念。
1.層疊性
層疊性是指多種CSS樣式的疊加。例如,當(dāng)使用內(nèi)嵌式CSS樣式表定義標(biāo)記字號大小為12m,外鏈式定義標(biāo)記顏色為紅色,那么段落文本將顯示為12p既這兩種樣式產(chǎn)生了疊加。
2.繼承性
繼承性是指書寫CSS樣式表時,子標(biāo)記會繼承父標(biāo)記的某些樣式,如文本顏色和字號。例如,定義主體標(biāo)記body的文本顏色為黑色,那么頁面中所有的文本都將顯示為黑色,這是因為其他標(biāo)記都嵌套在標(biāo)記中,是標(biāo)記的子標(biāo)記。繼承非常有用,可以不必在標(biāo)記的每個后代上添加相同的樣式。如果設(shè)置的屬性是一個可繼承的屬性,只需將它應(yīng)用于父標(biāo)記即可。
恰當(dāng)?shù)厥褂美^承可以簡化代碼,降低CSS樣式的復(fù)雜性。但是,如果在網(wǎng)頁中所有的標(biāo)記都大量繼承樣式,那么判斷樣式的來源就會很困難,所以對于字體、文本屬性等網(wǎng)頁中通用的樣式可以選用繼承。例如,字體、字號、顏色等可以在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è)置字號屬性時,標(biāo)題文本不會采用這個樣式,可能會認為標(biāo)題沒有繼承文本字號,這種認識是錯誤的。標(biāo)題文本之所以不采用body標(biāo)記設(shè)置的字號,是因為標(biāo)題標(biāo)記h1~h6有默認字號樣式,這時默認字號覆蓋了繼承的字號。 注:尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://elsolbar.com/news-id-15570.html 違者必究!部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實性請自行核實或聯(lián)系我們,了解更多相關(guān)資訊請關(guān)注web前端頻道查看更多,了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費申請試課。關(guān)注官方微信了解更多:150 3333 6050