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

In this issue, the editor will bring you about how to understand the inheritance and application of CSS. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Do you understand the concept and use of CSS inheritance, here to share with you, the most typical application of CSS inheritance features usually play in the entire page style preset, need to be specified for other styles of the part set in individual elements, while CSS inheritance is a mechanism that allows styles not only to be applied to a specific element, but also to its future generations.

Inheritance of CSS and its Application

The so-called CSS inheritance means that the tag wrapped inside will have the style nature of the external tag. The most typical application of the CSS inheritance feature is usually the style preset for the entire page, which needs to be specified for other styles to be set in individual elements. This feature can provide web designers with a better space to play. But at the same time, there are many rules of inheritance, and it is easy to be confused when applied. Today, donger will talk to you about the application in this area.

Text

CSS is the abbreviation of cascading style sheet (CascadingStyleSheets), and its specification represents a unique stage of development in the history of the Internet. Now for those who are engaged in making web pages, it is rare that they have not heard of CSS, because we often need to use it in the process of making web pages.

CSS allows us to set a richer and easier-to-modify look and feel for documents, reducing the burden on web designers. Here we mainly want to have an in-depth discussion on the inheritance and particularity of CSS with our friends.

I. CSS inheritance

One of the main features of CSS is inheritance, which depends on the ancestor-descendant relationship. CSS inheritance is a mechanism that allows styles to be applied not only to a particular element, but also to its descendants. For example, a color value defined by BODY is also applied to the text of a paragraph.

II. Limitations of CSS inheritance

Inheritance is a very natural behavior in CSS, and we don't even need to consider whether we can do it or not, but inheritance has its limitations.

First of all, some properties cannot be inherited. There's no reason for this, just because that's how it's set up. For example: the border attribute, as we all know, is used to set the border of the element, so it has no inheritance. As shown in the following figure, if you inherit the border properties, the document will look strange unless you take additional steps to turn off the border's inheritance properties.

As shown in the figure above, most border class properties, such as Padding, Margin, background and border properties, cannot be inherited.

III. Errors easily caused in CSS inheritance

Sometimes inheritance can lead to errors, such as the following CSS definition:

Body {color:blue}

In some browsers, this definition turns the text except the table blue. Technically, this is not true, but it does exist. So we often need to resort to some techniques, such as defining CSS like this:

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

In this way, the text in the table will turn blue.

IV. Mixed application of multiple styles

Now that you have CSS inheritance, some readers may wonder what happens when multiple stylesheets are applied to a single object at the same time. Let's start with a simple example:

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

Application example code: the apples here are so red.

Application example effect:

Because the selector H1 and .apple both match the H1 element above, which one will the browser apply? By looking at it in the browser, we find that the .apple style is applied to this text, so it shows red. This is because the particularity of the two rules is different, and CSS rules must be handled in this way.

The particularity in the stylesheet describes the relative weights of different rules, and its basic rules are:

◆ counts the number of ID attributes in the selector.

◆ counts the number of CLASS attributes in the selector.

The HTML tag name format in the ◆ statistical selector.

* write three numbers in the correct order without adding 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 numbers. The final number list corresponding to the selector can easily determine that the higher number characteristic overrides the lower number.

The following is a list of selectors classified by property:

H1 {color:blue;} attribute value is: 1

The property value of PEM {color:purple;} is: 2

.apple {red;} attribute value: 10

The property value of P.bright {color:yellow;} is: 11

P.brightEM.dark {color:brown;} attribute value is: 22

# id316 {color:yellow} attribute value: 100

We can see from the above table that # id316 has a higher particularity, so it has a higher weight. When there are multiple rules that can be applied to the same element, the style with higher weight will be preferred.

V. priority of CSS inheritance

Above we discussed the inheritance and particularity of CSS. In the framework of particularity, the inherited property value is 0, which means that any rule that displays the declaration will override its inheritance style. Therefore, no matter how weighted a rule is, if no other rule can be applied to this inherited element, it is just an inherited rule, as an example.

Style definition:

BODY {background:black;} LI {color:gray;} UL.white {color:white}

Application example code:

Example list 1 example list 2 example list 3 example list 4

Application example effect:

Some readers may think that all list items should be gray except for the list items that contain the .white class. However, this is not the case.

Why did this happen? Because the weights explicitly declared with the selector Li are larger than those inherited by CSS from the UL.white rule, each list item is grayed out.

There may be some places that are not easy to understand, so if you think about it, you will understand that you should pay more attention to it when you apply the stylesheet.

Let's look at another example. Given the tag shown below, the EM emphasis text will be gray, not black, because the weight of the EM rule is greater than the weight inherited from the H1 element:

Style definition:

The attribute value of H1#id316 {color:black;} is: 101

The EM {color:gray;} property value is: 1

Application example code:

In-depth discussion on the inheritance of CSS

Application example effect:

This is because the property value (1) of the second EM rule is larger than the property value (0) inherited by CSS. In fact, the original property value (101) of H1#id316 has no effect on its inheritance value, which is still 0.

Tips:

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

The property values of H1MagneH1EM {color:black;} are: 1Precedence 2

The property value of EM {color:red;} is: 1

Given this rule, any EM text except in the H1 element is red, while the EM text in H1 is still black. Because of its selector grouping, there are two valid rules in the * * rule (one for H1 and the other for H1EM) and two characteristic values. One for each rule.

Above we discussed which rules will eventually be applied when multiple style rules are applied to the same object at the same time. Some careful readers may say, what about the STYLE element? The answer is this: an element with STYLE has a property value of 100 under CSS1, and although an ID selector like # ID316 also has a property value of 100, in practice, the weight of STYLE is higher because the value of the STYLE element appears to be higher than the weight of most common rules. So we can see that the inline style has a high characteristic value, we will not cite specific examples, we can try it yourself.

VI. Artificially define 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 (importantrule). This is named according to the way they are declared and their natural attributes. By inserting in front of a regular semicolon! The phrase important marks an important rule, such as:

P.apple {colorRedBackgroundWhitec;}

The color value # red is marked as! important, while the background color white is not marked, so if both rules are important, then each rule needs to be marked with! important.

The correct placement of the important is important, otherwise the entire rule will be invalid. ! important is always placed in the rule declaration *, before the semicolon.

The rule labeled! important has a weight, that is, it has no specific property value, but it is larger than any other weight. It is important to note that although producer-defined styles have higher weights than user-defined styles,! important rules are just the opposite: important user-defined rules have higher weights than maker-defined styles, even important rules marked! important.

After reading so many text introductions, let's give an example:

Style definition:

H1 {colorbank grayweight importance;}

Application example code:

Look here!

Application example effect:

! the important rule overrides the contents of the inline STYLE attribute, so the resulting text is gray instead of black.

There is also a situation to consider: CSS inheritance values always have the characteristic of property value 0, even if they are inherited from rules with! important, and the importance disappears in addition to the elements that match the important rules, which requires our special attention!

Style definition: body {color:red;}

Application example code:

An in-depth discussion on cascading and inheritance of CSS

Application example effect:

The result of the application of this code is that the phrase "cascading and inheritance of CSS" is red, and "cascading and inheritance" is bold because of the application of the strong element. This is very much in line with the intention of the producer, and that's why inheritance is part of CSS.

The above is the editor for you to share how to understand CSS inheritance and its application, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

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.