Inheritance

📗 參考

• 🗣 Which CSS properties are inherited?

• 📗 SitePoint ⟩ CSS Inheritance: An Introduction

Second Tab

inherit

• inheritance flows down the DOM tree.

• use inherit to make inheritance take precedence over the cascaded value.

• use inherit to force inheritance of a property not normally inherited, such as border or padding. 👉See: border-box fix

intial

• Every CSS property has an initial (default) value. If you assign initial to that property, then it resets to its default value.

• remove a border: border: initial

• restore default width: width: initial

property	default value	note
width	auto
display	inline

examples

inherit

/* global link color */
a:link { color: blue; }

/* parent */
.footer { 
    color: #666; 
    background-color: #ccc; 
    padding: 15px 0; 
    text-align: center; 
    font-size: 14px; 
}

/* child */
.footer a { 
    color: inherit;             /* inherit from parent: #666 */
    text-decoration: underline; 
}

initial

.footer a { 
    color: initial;             /* = `color: black` */
    text-decoration: underline; 
}

inherited properties

參考

• Which CSS properties are inherited?

text

font-family
font-size
font-style
font-variant
font-weight
font

letter-spacing
line-height

text-align
text-indent
text-transform

white-space
word-spacing

list

list-style-image
list-style-position
list-style-type
list-style

table

/* control border behavior of tables */
border-collapse
border-spacing

others

azimuth

caption-side
color
cursor
direction
elevation
empty-cells
orphans
pitch-range
pitch
quotes
richness
speak-header
speak-numeral
speak-punctuation
speak
speech-rate
stress
visibility
voice-family
volume
widows

references

📘 官方

• Inheritance

🗣 討論

• Which CSS properties are inherited?