CSS Podcast - 005:繼承
假設您剛編寫了一些 CSS 讓元素看起來像按鈕,
<a href="http://example.com" class="my-button">I am a button link</a>
.my-button {
display: inline-block;
padding: 1rem 2rem;
text-decoration: none;
background: pink;
font: inherit;
text-align: center;
}
接著,您可以在內容文章中新增連結元素,並將 class
的值設為 .my-button
。但是,發生問題,文字不是您預期的顏色。為什麼會發生這個問題?
部分 CSS 屬性如果未指定值,就會沿用。
在這個按鈕中,按鈕會沿用這個 CSS 的 color
:
article a {
color: maroon;
}
本課程將說明發生原因,以及繼承是一項強大功能,協助您減少編寫 CSS 內容。
繼承流程
我們來看一下沿用機制 使用以下 HTML 程式碼片段
<html>
<body>
<article>
<p>Lorem ipsum dolor sit amet.</p>
</article>
</body>
</html>
根元素 (<html>
) 是文件中的第一個元素,因此不會繼承任何元素。在 HTML 元素中加入一些 CSS
系統就會開始串聯文件
html {
color: lightslategray;
}
根據預設,其他元素會繼承 color
屬性。html
元素具有 color: lightslategray
,因此所有可沿用顏色的元素現在都會有 lightslategray
顏色。
body {
font-size: 1.2em;
}
p {
font-style: italic;
}
只有 <p>
是最深的巢狀元素,因此只有斜體文字。繼承只會向下流動,不會向上流到父項元素。
預設繼承哪些屬性?
預設不會繼承所有 CSS 屬性 但有很多項目。以下提供預設繼承的完整屬性清單,這些屬性擷取自所有 CSS 屬性的 W3 參考資料:
- 鉍
- border-collapse
- border-spacing
- 字幕端
- color [顏色]
- 遊標
- direction
- 空白儲存格
- 字型系列
- font-size
- font-style
- font-variant
- font-weight
- 字型
- 字母間距
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- 孤兒
- 引文
- text-align
- text-indent
- 文字轉換
- 瀏覽權限
- white-space
- 寡婦
- word-spacing
繼承的運作方式
每個 HTML 元素都已定義每個 CSS 屬性,並有初始值。初始值是不會沿用的屬性,且在 Cascade 無法計算該元素的值時,會以預設值顯示。
可向下繼承的屬性,且子項元素會取得代表其父項值的計算值。這表示如果父項將 font-weight
設為 bold
,所有子項元素都會變成粗體,除非子項元素的 font-weight
設為不同的值,或者使用者代理程式樣式表擁有該元素的 font-weight
值。
如何明確繼承及控制繼承
繼承可能以非預期方式影響元素,因此 CSS 提供實用工具。
inherit
關鍵字
您可以透過 inherit
關鍵字,讓任何屬性繼承父項的計算值。建立例外情況是使用這個關鍵字的實用方式。
strong {
font-weight: 900;
}
這個 CSS 程式碼片段會將所有 <strong>
元素設為 900
的 font-weight
,而非預設的 bold
值 (相當於 font-weight: 700
)。
.my-component {
font-weight: 500;
}
.my-component
類別會將 font-weight
設為 500
。如要讓 .my-component
內的 <strong>
元素也新增 font-weight: 500
:
.my-component strong {
font-weight: inherit;
}
現在,.my-component
中的 <strong>
元素會有 500
的 font-weight
。
您可以明確設定這個值,但如果您日後使用 inherit
和 .my-component
的 CSS 變更,就能確保 <strong>
會自動更新。
initial
關鍵字
繼承可能會導致元素發生問題,initial
則提供強大的重設選項。
之前,您學到 CSS 中的每個屬性都有預設值。
initial
關鍵字會將屬性設回該初始預設值。
aside strong {
font-weight: initial;
}
這段程式碼會將 <aside>
元素內所有 <strong>
元素的粗體粗細移除,改為設為一般權重,也就是初始值。
unset
關鍵字
如果預設是否沿用屬性,unset
屬性的行為會有所不同。如果預設沿用屬性,unset
關鍵字將與 inherit
相同,如果預設未沿用該屬性,unset
關鍵字會等於 initial
。
記住預設繼承的 CSS 屬性可能並不容易,而 unset
有助於在此情況中派上用場。例如,color
會預設繼承,但 margin
不是,因此您可以編寫:
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
}
/* The p needs to be reset in asides, so you can use unset */
aside p {
margin: unset;
color: unset;
}
現在,移除 margin
,color
會還原為繼承的計算值。
您也可以將 unset
值與 all
屬性搭配使用。回到上述範例,如果全域 p
樣式取得額外的屬性會怎麼樣?系統只會套用您為 margin
和 color
所設定的規則。
/* Global color styles for paragraph in authored CSS */
p {
margin-top: 2em;
color: goldenrod;
padding: 2em;
border: 1px solid;
}
/* Not all properties are accounted for anymore */
aside p {
margin: unset;
color: unset;
}
如果您將 aside p
規則改為 all: unset
,無論日後套用至 p
的全域樣式為何,系統一律會取消設定這些規則。
aside p {
margin: unset;
color: unset;
all: unset;
}
隨堂測驗
測驗您對於繼承的瞭解程度
下列何者是可沿用的屬性?
animation
font-size
color
text-align
line-height
除非沒有可沿用,而是 initial
,否則哪一個值的行為會像是 inherit
?
reset
unset
superset