CSS中的兩個特殊值用于控制層疊的inherit和initial的方法

在CSS中有兩個特殊值可以賦給任意屬性,用于控制層疊:inherit和initial。我們來看看這兩個特殊值。
使用inherit關(guān)鍵字
有時,我們想用繼承代替一個層疊值。這時候可以用 inherit 關(guān)鍵字??梢杂盟鼇砀采w另一個值,這樣該元素就會繼承其父元素的值。
假設(shè)我們要給網(wǎng)頁加上一個淺灰色的頁腳。在頁腳上有一些鏈接,但我們不希望這些鏈接太顯眼,因為頁腳不是網(wǎng)頁的重點。因此要將頁腳的鏈接變成深灰色(如圖下圖)。
繼承了灰色文本顏色的 “Terms of use” 鏈接
通常我們會給網(wǎng)頁的所有鏈接加上一個字體顏色(如果不加的話,就會以用戶代理樣式為準)。這個顏色也會作用于頁腳的“Terms of use”鏈接。為了讓頁腳的鏈接變成灰色,需要覆蓋顏色值。將下列代碼添加到你的樣式表。
a:link{ /* (一下3行)全局的網(wǎng)頁鏈接顏色 */ color: blue; } ... .footer{ color: #666; /* 頁腳的文本設(shè)置位灰色 */ background-color: #ccc; padding: 15px 0; text-align: center; font-size: 14px; } .footer a{ color: inherit; /* 從頁腳繼承文本顏色 */ text-decoration: underline; }
第三個規(guī)則集覆蓋了藍色的鏈接色,讓頁腳鏈接的層疊值為 inherit。因此,它繼承了父元素的顏色。
總結(jié)
到此這篇關(guān)于CSS中的兩個特殊值用于控制層疊的inherit和initial的文章就介紹到這了,更多相關(guān)css 特殊值控制層疊的inherit和initial內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
- 這篇文章主要介紹了CSS 繼承 inherit屬性的方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-09
- 這篇文章主要介紹了CSS中的inherit使用技巧小結(jié),CSS中的繼承關(guān)鍵字的使用是CSS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-07-09
深入理解CSS的height:100%和height:inherit之間的使用區(qū)別
這篇文章主要介紹了深入理解CSS的height:100%和height:inherit之間的使用區(qū)別,作者給出了頁面設(shè)計時的實際示例對比,需要的朋友可以參考下2015-06-08