CSS中控制層疊的屬性是什么

這篇文章主要介紹了CSS中控制層疊的屬性是什么，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用inherit關(guān)鍵字

有時(shí)，我們想用繼承代替一個(gè)層疊值。這時(shí)候可以用 inherit 關(guān)鍵字?？梢杂盟鼇砀采w另一個(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。因此，它繼承了父元素的顏色。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“CSS中控制層疊的屬性是什么”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!