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-spacing
- 字幕
- 顏色
- 遊標
- 方向
- 空白儲存格
- font-family
- font-size
- 字型樣式
- 字型變化版本
- 字型粗細
- 字型
- letter-spacing
- line-height
- list-style-image
- list-style-position
- list-style-type
- list-style
- 孤兒
- 引文
- 文字對齊
- 文字縮排
- text-transform
- 瀏覽權限
- 空白字元
- 喪偶
- word-spacing
繼承的運作方式
每個 HTML 元素都有預設使用初始值定義的每個 CSS 屬性。 初始值是未沿用的屬性,因此無法顯示為預設值 就會知道序列圖無法計算該元素的值。
可以沿用而來的屬性
子項元素會取得代表其父項值的計算值。
也就是說,如果父項將 font-weight
設為 bold
,所有子元素都會以粗體顯示
除非其 font-weight
設為不同的值
或是使用者代理程式樣式表,則具有該元素的 font-weight
值。
如何明確沿用和控管繼承
沿用機制可能會以非預期的方式影響元素,讓 CSS 提供以下工具:
inherit
關鍵字
您可以使用 inherit
關鍵字,讓任何屬性沿用其父項計算的值。
這個關鍵字相當實用的實用做法,就是建立例外狀況。
strong {
font-weight: 900;
}
這個 CSS 程式碼片段會將所有 <strong>
元素的 font-weight
設為 900
。
而不是預設的 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
color
line-height
font-size
text-align
除非沒有可以繼承的值,否則哪個值的運作方式與 inherit
相同,
那麼運作情形就像「initial
」?
unset
superset
reset