Examples of inheritance in CSS

The inheritance of a CSS is defined by the style attributes that are used. In other words, when you look at CSS properties Backgruound-color, you see a column of "inheritance," and maybe you barely care about it, but it's still very useful.

What is CSS inheritance

Each element is part of the document tree, except for the top-level HTML element, each element has its corresponding parent element, and the CSS attribute value of each parent element can be applied to its child elements.

For a chestnut, the H1 tag contains an EM tag:

EM is the child element of the H1 tag, and the CSS attribute values inherited in any H1 will automatically take effect in the EM tag, such as:

CSS code copy content to clipboard

h1{font-size:120%;}

Because Font-size is the default inherited CSS property, the "big" font will be magnified to 120%, just like H1.

How to use CSS inheritance

The easiest way is to know that all of the CSS attributes are inherited by default, and if this property is inherited, it will know that it will take effect in all child elements of the element.

We often define the underlying style on very top-level elements, such as the body tag, and if you set the font in body, because inheritance, all elements in the document will apply the font:

CSS code copy content to clipboard

h1{font-size:120%;}

Using "inherit" values

The value of each CSS property is inherit, and after the attribute is defined, the value of the CSS property of the parent element is applied even if the property is not inherited by default, such as:

CSS code copy content to clipboard

body {margin:1em;}

p {margin:inherit;}

Inherit using computed values (computed values)

A computed value is defined by the value relative to other values in the Web page, which is particularly important for inherited properties. If you define font-size:1em in the body, the font size of all elements in the document is not 1em, because the font-size value of such elements as H1-H6 is relative size. H1 default is the largest font element in a Web page, and when you set the BODY element font size, H1-h6 calculates the actual font size based on this "average" font size.

Let me cite one more example:

As described earlier, Font-size is the default inherited CSS property, but the span font size is not p 80%, but is as big as p, precisely because inheritance uses computed values, and if the parent element of P has a font size of 30px,p that evaluates to 24PX, Span inherits from 24px, not 80%.

More about computed values can read CSS computed value.

Background is "inherited"

If you view the Backgruound property, you will see that its inheritance is no and that it is not inherited by default. But browsers still default to "inherit" this attribute, such as writing a paragraph:

"Big" still has a yellow background, because the Background property's initial value (initial value) is transparent (transparent), so the yellow background you see is actually the background of the H1 tag.