Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use inherit and initial in CSS to control cascading". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use inherit and initial in CSS to control cascading.

Use the inherit keyword

Sometimes we want to replace a cascading value with inheritance. The inherit keyword can be used at this time. You can use it to override another value so that the element inherits the value of its parent element.

Suppose we want to add a light gray footer to the page. There are some links on the footer, but we don't want them to be too conspicuous, because the footer is not the focus of the page. So change the link in the footer to dark gray (as shown in the figure below).

"Terms of use" links that inherit the color of gray text

Usually we add a font color to all the links on the page (if not, the user agent style will prevail). This color also works on the "Terms of use" link in the footer. In order to make the footer link gray, you need to override the color value. Add the following code to your style sheet.

A:link {/ * (the following 3 lines) the global page link color * / color: blue;}. Footer {color: # 666; / * footer text setting bit gray * / background-color: # ccc; padding: 15px 0; text-align: center; font-size: 14px;} .footer a {color: inherit / * inherit text color from footer * / text-decoration: underline;}

The third rule set overrides the blue link color so that the cascading value of the footer link is inherit. Therefore, it inherits the color of the parent element.

The advantage of this is that if there is any style change in the footer (such as changing the second rule set, or being overwritten by another style), the color of the footer link will change along with the rest of the footer. For example, when the footer text changes to a darker gray, the links change accordingly.

You can also use the inherit keyword to force inheritance of a property that would not normally be inherited, such as borders and inner margins.

Use the initial keyword

Sometimes you need to undo the style that acts on an element. This can be done with the initial keyword. Each CSS property has an initial (default) value. If you assign an initial value to an attribute, it is effectively reset to the default value, which is equivalent to a hard reset of the value. The following figure shows what happens when a footer link is assigned initial instead of inherit.

The default color value is black

The corresponding CSS code in the above figure is as follows

.footer a {color: initial; text-decoration: underline;}

Because black is the initial value of the color property in most browsers, color: initial is equivalent to color: black.

The advantage of this is that you don't need to think too much. If you want to delete the border of an element, set border: initial. If you want to restore an element to its default width, set width: initial.

You may be used to using auto to achieve this reset effect. In fact, using width: auto is the same, because the default value of width is auto.

Note, however, that auto is not the default value for all properties and is not even a legal value for many properties. For example, border-width: auto and padding: auto are illegal and therefore will not take effect. You can take a moment to study the initial values of these properties, but it's easier to use initial.

Description: declare that display: initial is equivalent to display: inline. No matter what type of element it is applied to, it is not equal to display: block. This is because the initial resets to the initial value of the attribute, not the initial value of the element. Inline is the initial value of the display property.

At this point, I believe you have a deeper understanding of "how to use inherit and initial in CSS to control cascading". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.