自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

開發(fā) 前端
在CSS中有兩個特殊值可以賦給任意屬性,用于控制層疊:inherit和initial。我們來看看這兩個特殊值。

在CSS中有兩個特殊值可以賦給任意屬性,用于控制層疊:inherit和initial。我們來看看這兩個特殊值。

[[336144]]

使用inherit關鍵字

有時,我們想用繼承代替一個層疊值。這時候可以用 inherit 關鍵字??梢杂盟鼇砀采w另一個值,這樣該元素就會繼承其父元素的值。

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

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

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

  1. a:link{                     /* (一下3行)全局的網(wǎng)頁鏈接顏色 */ 
  2.   color: blue; 
  3. ... 
  4. .footer{ 
  5.   color: #666;      /* 頁腳的文本設置位灰色 */ 
  6.   background-color: #ccc; 
  7.   padding: 15px 0; 
  8.   text-align: center; 
  9.   font-size: 14px; 
  10. .footer a{ 
  11.   color: inherit;   /* 從頁腳繼承文本顏色 */ 
  12.   text-decoration: underline; 

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

這么做的好處是,如果頁腳發(fā)生任何樣式改變的話(比如修改第二個規(guī)則集,或者被別的樣式覆蓋),頁腳鏈接的顏色就會跟著頁腳其他內容一起改變。比如,當頁腳文本變?yōu)楦畹幕疑珪r,其中的鏈接也會跟著改變。

還可以使用 inherit 關鍵字強制繼承一個通常不會被繼承的屬性,比如邊框和內邊距。

使用initial關鍵字

有時,你需要撤銷作用于某個元素的樣式。這可以用 initial 關鍵字來實現(xiàn)。每一個CSS屬性都有初始(默認)值。如果將 initial 值賦給某個屬性,那么就會有效地將其重置為默認值,這種操作相當于硬復位了該值。下圖展示了給頁腳鏈接賦以 initial 而不是 inherit 時的效果。

默認的顏色值位黑色

上圖對應的CSS代碼如下

  1. .footer a{ 
  2.   color: initial; 
  3.   text-decoration: underline; 

因為在大多數(shù)瀏覽器中,黑色是color屬性的初始值,所以 color: initial 等價于 color: black。

這么做的好處是不需要思考太多。如果想刪除一個元素的邊框,設置 border: initial 即可。如果想讓一個元素恢復到默認寬度,設置 width: initial 即可。

你可能已經(jīng)習慣了使用 auto 來實現(xiàn)這種重置效果。實際上,用 width: auto 是一樣的,因為width的默認值就是 auto。

但是要注意,auto 不是所有屬性的默認值,對很多屬性來說甚至不是合法的值。比如 border-width: auto 和 padding: auto 是非法的,因此不會生效??梢曰c時間研究一下這些屬性的初始值,不過使用 initial 更簡單。

說明:聲明display: initial等價于display: inline。不管應用于哪種類型的元素,它都不會等于display: block。這是因為initial重置為屬性的初始值,而不是元素的初始值。inline才是display屬性的初始值。

 

責任編輯:趙寧寧 來源: 前端全棧開發(fā)者
相關推薦

2023-07-21 08:01:13

CSSInherit?

2024-04-26 08:27:15

JavaScriptCSSHTML元素

2015-10-09 09:43:28

CSS CSS3

2021-07-22 23:27:45

Python工具算法

2010-09-06 14:11:32

CSS

2024-12-16 18:04:11

2010-08-06 14:52:35

FlexCSS層疊樣式表

2010-08-19 11:22:19

marginpadding

2019-08-28 10:00:34

Python測試工具命令

2020-04-17 10:13:51

Python開發(fā)工具

2010-09-01 09:29:51

CSS層疊CSS繼承

2011-05-18 14:29:49

XML層疊樣式

2021-11-17 08:43:17

LeetCode有序數(shù)組算法

2011-04-19 16:06:57

typedef

2009-11-03 17:24:01

VB.NET特殊形狀窗

2011-08-29 18:17:58

Ubuntu

2009-06-30 09:37:02

對象比較Java

2010-04-06 18:04:09

Oracle數(shù)據(jù)庫

2022-10-17 16:17:24

機器學習算法標簽傳播

2023-08-07 15:49:59

CSS顏色插值算法
點贊
收藏

51CTO技術棧公眾號