CSS style sheet inheritance detailed

The basics of CSS style sheets that are recently in a bad patch. The last time we studied the conflict problem of CSS style sheet. This is the learning of CSS inheritance features.

What is CSS inheritance?
To understand the inheritance of CSS style sheets, we start with the document tree (HTML DOM). The document tree is made up of HTML elements.

The document tree is similar to the family tree and also has ancestors, descendants, fathers, children, and brothers ^_^. This is easy to understand, I do not repeat here. Want to know more about the friend please Google.

CSS style sheet inheritance, then, refers to a specific CSS property being passed down to the descendant element.

Here is an example of the following HTML code snippet:

<p>
Presentation code for CSS style sheets <em> inheritance features </em>
</p>

It is important to note that EM is contained within p.

When we specify the CSS style of p, see what happens to em?

<style>
p {color:red;}
</style>

The P and EM fonts turn red at the same time in the browser. We do not specify the EM style, but EM inherits the style attributes of its father element p.

Perhaps you see later think this is taken for granted, it is not worth a sinewy ^_^. In fact, this is inheritance. Unknowingly affect this our code (imagine that if there is no inheritance feature, you need to define a color attribute for each element, this is how painful one thing!!! =_=!).

Of course, not all CSS properties will be inherited by the quilt class, such as the border property. Continue to use the preceding section of code. We add the Border property to the P element

p {border:1px solid red;}

Fortunately, P's border attribute is not inherited by EM, otherwise it is not strange?! ^_^

So, what are the attributes that can be inherited? CSS style sheet properties can inherit from the following:

Azimuth, Border-collapse, border-spacing,
Caption-side, color, cursor, direction, elevation,
Empty-cells, font-family, Font-size, Font-style,
Font-variant, Font-weight, font, letter-spacing,
Line-height, List-style-image, List-style-position,
List-style-type, List-style, orphans, Pitch-range,
Pitch, quotes, richness, Speak-header, speaknumeral,
Speak-punctuation, speak, Speechrate,
Stress, text-align, text-indent, Texttransform,
Visibility, voice-family, volume, whitespace,
Widows, word-spacing

Scared?! So much?! How do you remember living? Don't worry, let's take a minute. These attributes.

Text-related properties:

Azimuth, Border-collapse, border-spacing,
Caption-side, color, cursor, direction, elevation,
Empty-cells, font-family, Font-size, Font-style,
Font-variant, Font-weight, font, letter-spacing,
Line-height, List-style-image, List-style-position,
List-style-type, List-style, orphans, Pitch-range,
Pitch, quotes, richness, Speak-header, speaknumeral,
Speak-punctuation, speak, Speechrate,
Stress, text-align, text-indent, Texttransform,
Visibility, voice-family, volume, whitespace,
Widows, word-spacing

List-related properties:

Azimuth, Border-collapse, border-spacing,
Caption-side, color, cursor, direction, elevation,
Empty-cells, font-family, Font-size, Font-style,
Font-variant, Font-weight, font, letter-spacing,
Line-height, List-style-image, List-style-position,
List-style-type, List-style, orphans, Pitch-range,
Pitch, quotes, richness, Speak-header, speaknumeral,
Speak-punctuation, speak, Speechrate,
Stress, text-align, text-indent, Texttransform,
Visibility, voice-family, volume, whitespace,
Widows, word-spacing

There is also an attribute that is more important than the color property.

It is worth talking about the font-size. It is obvious that font-size can be inherited. But there are some special ways of it. The subclass of Font-size inherits not the actual value, but the computed value. Explain why Font-size is so special?

See an example:

<p>
Presentation code for font Size properties <em> Inheritance Properties </em>
</p>

Defines the font size for p as 80% of the default font.

p {font-size:80%}

If font-size inherits relative values, what happens to the results? According to this logic, the font-size of EM is 80%x80%=64%, and the Web page should look like this.

However, the reality is not so. The text in EM does not change size, but is aligned with P.

Let's give you an intuitive understanding of the three examples below.

p {font-size:14px;}

Because the browser default font size is 16px, and p defines the font 14px, so em inherits the P font size attribute, also 14px;

Elements	value	Calculated Value
Default font Size	Approx. 16 megapixels
<body>	Not specified	Approx. 16px
<p>	14px	14px
<em>	Not specified	Inherited value =14px

p {font-size:85%;}

Browse Chess The default font size is 16px, and p defines the font size (16px X 85% = 13.6px). 13.6px This value will inherit the quilt element em.

Elements	value	Calculated Value
Default font Size	Approx. 16 megapixels
<body>	Not specified	Approx. 16px
<p>	85%	16px X 85% = 13.6px
<em>	Not specified	Inherited value =13.6px

p {font-size:0.85em;}

Browse Chess The default font size is 16px, and p defines the font size (16px X 0.85em = 13.6px). 13.6px This value will inherit the quilt element em.

Elements	value	Calculated Value
Default font Size	Approx. 16 megapixels
<body>	Not specified	Approx. 16px
<p>	0.85em	16px X 0.85em= 13.6px
<em>	Not specified	Inherited value =13.6px

The above examples are relatively simple answers, and then a complex

body {font-size:85%;}
h1 {font-size:200%;}
h2 {font-size:150%;}

Browse Chess The default font size is 16px, and body defines the font size (16px X 85% = 13.6px). If the child element does not specify a font size of 13.6px This value will inherit the quilt element.

Elements	value	Calculated Value
Default font Size	Approx. 16 megapixels
<body>	85%	16px X 85% = 13.6px
	200%	Inherited value =13.6px X 200%= 27.2px
	150%	Inherited value =13.6px X 150%= 20.4px
<p>	Not specified	Inherited value =13.6px
<em>	Not specified	Inherited value =13.6px

Speaking of which, the inheritance of CSS stylesheets is basically finished. In practice, there is also an attribute value that needs to be explained, which is closely related to inherited applications.

The attribute values in the style sheet describe the relative weights of the different rules, and the basic rules are:

The number of ID attributes in the statistics selector.

The number of class attributes in the statistics selector.

The HTML tag name format in the statistics selector.

Finally, write three numbers in the correct order, without spaces or commas, to get a three-digit number. (Note that you need to convert the number to a larger number that ends with three digits). A list of final numbers corresponding to selectors can easily be used to determine that a higher number attribute overrides a lower number.

The following is a list of selectors categorized by attributes:

H1{color:blue;} The attribute value is: 1
pem{color:purple;} attribute value is: 2
. apple{red;} The attribute value is: 10
P.bright{color:yellow;} The attribute value is: 11
P.brightem.dark{color:brown;} The attribute value is: 22
#id316 {Color:yellow} attribute value is: 100

From the above table we can see that #id316 has a higher specificity, so it has a higher weight. When more than one rule can be applied to the same element, the higher the weight of the style will be taken precedence. The attribute value of the inherited property is 0, which means that any property value that violates the CSS inheritance value overrides the inherited property value!!!

This is something you need to be aware of, Enjoy it!!

CSS style sheet inheritance detailed