Search [Great Move to the World] on WeChat, and I will share with you the front-end industry trends, learning paths, etc. as soon as possible. This article GitHub github.com/qq449245884 ... has been included, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.
Come and experience the ChatGpt plus version for free, we paid the experience address: chat.waixingyun.cn You can join the technical group at the bottom of the website to find bugs together, and the new version of the drawing artifact has been launched cube.waixingyun.cn/home
CSS (Cascading Style Sheets) is a powerful tool for styling and formatting web documents. In this comprehensive guide, we'll explore four special keywords: inherit, initial, unsetand revert.
Inherit: passing values from parent elements
inheritThe keyword is used to explicitly indicate that an element inherits the value of a CSS property from its parent element. When the attribute is set to inherit, the element will take on the same value as its parent element. This behavior is especially useful when you want consistent styling across your document or when you want specific elements to inherit certain styles from their parent elements.
For example, consider a scenario where you have an element with an assigned text color <div>. By default, the text-color property ( color) is inherited, meaning that child elements will have the same text color as the parent element. However, you can use inheritthe keyword to explicitly enforce this behavior, even if it is not explicitly specified in the parent element's CSS.
div {
color: black; /* Text color of the parent div */
}
a {
color: inherit; /* 从父div继承文本颜色 */
}
In some cases inheritit might be a good idea to use to set the font size or color, but be aware that not all properties are inherited by default. inheritKnowing the difference between inherited and non-inherited properties is critical to using keywords effectively .
Initial: reset to default
initialkeyword used to reset a CSS property to its initial value as specified in the CSS specification. Each CSS property has an initial value defined by the W3C specification as a default value. By using initial, you can override any previous styling and set properties back to their initial state.
The initial value defined in the specification may vary. Some initial values make intuitive sense, while others may seem arbitrary. For example, float: noneand background-color: transparent are examples of initial values that meet common expectations. However, display: inlinproperties like e may seem counterintuitive, but these initial values were chosen for historical reasons or the need to establish a starting point.
button {
color: initial; /* 将颜色属性重置为初始值 */
}
Keep in mind that initialkeywords only reset the value applied to a specific property and will not affect other properties or inherited values. Also, be aware that the initial values defined in the specification may not always be consistent with the desired behavior.
Unset: Full reset
unsetKeywords are a powerful tool for resetting CSS properties across the board. It combines the functionality of inheritthe and initialkeywords to provide more flexible reset options.
For non-inherited properties, unsetworks like initialthe keyword. It resets the property to its initial value as defined in the CSS specification. This ensures that the property starts over without any previous style effects.
div {
margin: unset; /* Resets the margin property to its initial value */
}
However, for inherited properties, unsetthe behavior is different. It does not reset the property to its initial value, but restores the natural behavior of the property, including inheriting the value from the parent element.
p {
color: unset; /* Allows the color property to inherit from its parent */
}
unsetThe keyword is especially useful when you want to reset a property across the board, whether inherited or not
Revert: Return to browser style
revertKeywords are the newest member of the CSS keyword family. Similar to unset, it allows you to reset CSS properties. However, revertthe cascading nature of style sheets is taken into account and the browser's default styles are respected.
When applied to a property, revertcancels any previous styling and restores the property to the value defined by the browser's default style sheet. It essentially returns the property to its original state as determined by the browser.
h1 {
font-size: revert; /* Reverts the font-size property to the browser's default */
}
In the example above, font-sizethe element's <h1>attribute is set to revert, which makes it take the font size defined in the browser's default style sheet. This ensures consistency with the overall style of the page and respects user preferences.
Summarize
In this comprehensive guide, we've explored the special CSS keywords inherit, initial, unsetand revert. These keywords provide valuable control over CSS properties, allowing you to propagate values from parent elements, reset properties to their initial or default state, and manipulate cascading styles.
comminicate
If you have dreams and dry goods, search [Daqian World] on WeChat to pay attention to this dishwashing wisdom who is still washing dishes in the early morning.
This article GitHub github.com/qq449245884 ... has been included, and there are complete test sites, materials and my series of articles for interviews with first-line manufacturers.