Deep understanding of the inheritance of CSS and its application

Css| inherits the so-called CSS inheritedA label that is wrapped inside will have the style properties of an external label. The most typical application of an inheritance feature is usually the style preset for the entire page, which needs to be specified as part of the other style in the individual element. This feature can provide web designers with a more ideal space to play. But at the same time there are many rules of inheritance, the application of the time is easy to confuse, Donger today is dedicated to talk about this application.

Body

CSS is the abbreviation for Cascading style sheets (cascading style Sheets), whose specifications represent a unique development phase in internet history. Now for the web-making friends, rarely have heard of CSS, because in the process of making Web pages we often need to use.

CSS allows us to set a richer and more easily modified look for our documents, which can ease the workload of web designers. Here we want to work with friends on the inheritance of CSS and the particularity of a little in-depth discussion.

  1. Inheritance

One of the main features of CSS is inheritance, which relies on ancestor-descendant relationships. Inheritance is a mechanism that allows a style to be applied not only to a particular element, but also to its descendants. For example, a color value defined by a body is also applied to the text of a paragraph. The following examples illustrate:

  style definition:body{color:red;}

  Application example code:

CSS layering and inheritance in depth discussion

  Application Example effect:

The result of this code is: "Cascading and inheriting CSS" is a red color, "cascade and Inheritance" because of the application of the strong element, so it is bold. This fits the creator's intent and is why inheritance is part of the CSS.

  2, the limitations of CSS inheritance

In CSS, inheritance is a very natural behavior, we do not even need to consider whether to do so, but inheritance has its limitations.

First, some properties are not inherited. There is no reason for this, just because it is so set. For example: The border attribute, as we all know, border property is used to set the border of an element, and it has no inheritance. As the following illustration shows, if you inherit the border property, the document will look strange unless you take another step to turn off the inherited properties of the border.

As shown in the figure above, most border class properties, such as padding (filler), Margin (boundary), background and border properties, are not inherited.

  3  mistakes that are easily caused by inheritance

Sometimes inheritance can also bring some mistakes, such as the following CSS definition:

Body{color:blue}

In some browsers, this definition makes text other than tables blue. Technically, this is not true, but it does exist. So we often need to use some techniques, such as defining CSS as this:

Body,table,th,td{color:blue}

The text in the table will also turn blue.

  4, a variety of styles mixed application

Now that you have inheritance, there may be some readers in the stylesheet who can't figure out what happens when multiple style sheets are applied to an object. Let's give you a simple example:

  style definition:. apple{color:red;} H1{color:yellow;}

  Application Example code:

  Application Example : Because the selector H1 and. Apple all match the H1 element above, which one does the browser apply to? By looking in the browser, we found that the text applied the. Apple style, so it shows red. This is because the specificity of the two rules is not the same, CSS rules must be handled this way.

The specificity of the style sheet describes the relative weights of the different rules, and its basic rule is:

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, and get a three-digit number. (Note that you need to convert the number to a larger number that ends with three digits). A final list of numbers corresponding to the selector can easily determine that higher numeric attributes are above the lower digits.

The following is a list of the selectors sorted by attribute:

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

From the table above 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.

  priority issues for CSS inheritance

Above we discussed the inheritance and particularity of CSS, in the framework of specificity, the inherited attribute value is 0, which means that any rule that displays a declaration will overwrite its inherited style. Therefore, no matter how high the weight of a rule, if no other rule can apply to this inherited element, then it is only a inherited rule, for example.

  Style definition:
  body {background:black;}
LI {Color:gray;}
Ul.white {Color:white}

  Application example code:
<ul>
<li> examples List One </li>
<li> Examples List two </li>
<li> Examples List three </li>
<li> Examples List four </li>
</ul>

  Application Example effect:

Some readers may think that all the other list items should be grayed out except that the list items that contain the. White class are displayed as whites. However, this is not the case.

Why is there such a situation? Each list item is grayed out because the weighted value of an explicit declaration with the selector Li is greater than the weight inherited from the ul.white rule.

Maybe some places are not very good understanding, we think about it will understand, usually in the application of the style sheet when more attention to think about it.

Let's take another example, if given the tag shown below, the EM accent will be gray, not black, because the EM rule has a weighted value greater than the weight inherited from the H1 element:

  style definition:
h1#id316 {color:black;} The attribute value is: 101
EM {Color:gray;} The attribute value is: 1

  Application example code:

   Application Example Effect :

This is because the attribute value (1) of the second EM rule is larger than the inherited attribute value (0), which in fact stipulates that the original attribute value (101) of the h1#id316 has no effect on its inherited value, still 0.

  Small tips:

If you want H1 to always be black, and EM text is red in other cases, the following style sheet settings are a good way to do this:

H1,h1 EM {color:black;} The attribute value is: 1,2
EM {color:red;} The attribute value is: 1

Given this rule, any em text except within the H1 element is red, and the EM text inside the H1 is still black, because of its selector grouping, in the first rule there are two effective rules (one is to H1, the other is H1 EM) also has two attribute values?? Each rule one.

Above we discussed how many style rules can be applied to the same object at the same time, and perhaps some attentive readers will say, what about the style element? Yes, you can apply inline style styles directly in HTML code. So what is its characteristic value?

The answer is this: the element with style has an attribute value of 100 under CSS1, although the attribute value of an ID selector like #id316 is also 100, in practice, style is a higher weight, because the style element's value looks larger than most common rules. So we can see the inline style has a high characteristic value, the concrete example we do not lift, we can try.

  5. human-defined CSS inheritance priority

In the process of making a Web page, we may want to set a rule that is more important than other rules, which are allowed in CSS and are called important rules (important rule). This is named according to the way they are declared and their natural attributes. By inserting the semicolon in front of a rule! Important a phrase to mark an important rule, such as:

p.apple {color: #red!important; background:white;}

The color value #red is marked as!important, and the background color white is not marked, and if two rules are important, then each rule needs to be labeled!important.

It is important to place the!important correctly, otherwise the entire rule will be invalid.!important is always placed at the end of the rule declaration, before the semicolon.

A rule labeled!important has the highest weight, which means that he does not have a specific attribute value, but is larger than any other weights. It is important to note that although the creator defines a style that has a higher weight than a user-defined style, the!important rule is the exact opposite: important user-defined rules have higher weights than the style defined by the creator, even if they are significant rules marked as!important.

After reading so many text introductions, let's take an example to see:

  Style definition:
H1 {Color:gray!important;}

  Application example code:

  Application Example Effect :
The!important rule overwrites the contents of the inline style property, so the resulting text is gray rather than black.

There is also a final case to consider: the inherited value is always characteristic of the attribute value 0, even if it is inherited from a rule with!important, the importance of matching the elements of an important rule disappears, which is something we should pay special attention to!