在CSS中有兩個(gè)特殊值可以賦給任意屬性，用于控制層疊：inherit和initial。我們來(lái)看看這兩個(gè)特殊值。

使用inherit關(guān)鍵字

有時(shí)，我們想用繼承代替一個(gè)層疊值。這時(shí)候可以用 inherit 關(guān)鍵字?？梢杂盟鼇?lái)覆蓋另一個(gè)值，這樣該元素就會(huì)繼承其父元素的值。

假設(shè)我們要給網(wǎng)頁(yè)加上一個(gè)淺灰色的頁(yè)腳。在頁(yè)腳上有一些鏈接，但我們不希望這些鏈接太顯眼，因?yàn)轫?yè)腳不是網(wǎng)頁(yè)的重點(diǎn)。因此要將頁(yè)腳的鏈接變成深灰色(如圖下圖)。

繼承了灰色文本顏色的 “Terms of use” 鏈接

通常我們會(huì)給網(wǎng)頁(yè)的所有鏈接加上一個(gè)字體顏色(如果不加的話，就會(huì)以用戶代理樣式為準(zhǔn))。這個(gè)顏色也會(huì)作用于頁(yè)腳的“Terms of use”鏈接。為了讓頁(yè)腳的鏈接變成灰色，需要覆蓋顏色值。將下列代碼添加到你的樣式表。

a:link{                     /* (一下3行)全局的網(wǎng)頁(yè)鏈接顏色 */ 
  color: blue; 
} 
... 
.footer{ 
  color: #666;      /* 頁(yè)腳的文本設(shè)置位灰色 */ 
  background-color: #ccc; 
  padding: 15px 0; 
  text-align: center; 
  font-size: 14px; 
} 
.footer a{ 
  color: inherit;   /* 從頁(yè)腳繼承文本顏色 */ 
  text-decoration: underline; 
} 

第三個(gè)規(guī)則集覆蓋了藍(lán)色的鏈接色，讓頁(yè)腳鏈接的層疊值為 inherit。因此，它繼承了父元素的顏色。

總結(jié)

到此這篇關(guān)于CSS中的兩個(gè)特殊值用于控制層疊的inherit和initial的文章就介紹到這了,更多相關(guān)css 特殊值控制層疊的inherit和initial內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論