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

This article introduces the relevant knowledge of "inheritance and application case analysis of CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

CSS is the abbreviation of cascading style sheet (Cascading Style Sheets), 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 friends.

I. inheritance

One of the main features of CSS is inheritance, which depends on the ancestor-descendant relationship. 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. The following examples are given:

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.

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 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, hot potato SS is defined 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 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.

Apply the example effect: because the selector H1 and. Apple matches the H1 element above, so which one will the browser apply? By observing it in the browser, we find that this text has been applied. Apple is the style, so it shows red. This is because the particularity of the two rules is different, and CSS rules must be handled in this way.

Build a new front-end learning qun438905713, most of them are zero-based learners in the group, we help each other, answer each other, and prepare a lot of learning materials. Welcome zero-basic partners to communicate with each other.

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

Count the number of ID attributes in the selector.

Count the number of CLASS attributes in the selector.

The HTML tag name format in the statistical selector.

Finally, 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

P EM {color:purple;} attribute value is: 2

. The property value of apple {red;} is: 10?

P.bright {color:yellow;}? Property value: 11

P.bright EM.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:

List 1 for example

List 2 for example

List 3 for example

Listing 4 gives an example

Application example effect:

Some readers may think that apart from containing. The list items of the white class are displayed in white, and all other list items should be grayed out. However, this is not the case.

Why did this happen? Because the weights explicitly declared with the selector Li are larger than those inherited 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 property value of EM {color:gray;} 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 inherited property value (0). 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 H1 EM {color:black;} are: 1, 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 first rule (one for H1 and the other for H1 EM) and 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? Yes, inline style STYLE can be directly applied to HTML code. So what is the characteristic value of it?

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 (important rule). 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 {color:#red! important; background:white;}

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

Place it correctly! The location of the important is important, otherwise the whole rule will be invalid.! Important is always placed at the end of the rule declaration, before the semicolon.

Mark it as! Important's rule has the highest weight, that is, it has no specific property value, but it is larger than any other weight. It should be noted that although the producer-defined style has a higher weight than the user-defined style,! Important rules are just the opposite: important user-defined rules have higher weights than producer-defined styles, even if marked as! The same is true of important's important rules.

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

Style definition:

H1 {color:gray! important;}

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 one last situation to consider: the inheritance value always has the characteristic of the property value 0, even if it comes with! The same is true of the values inherited by important rules, and the importance disappears in addition to the elements that match the important rules, which requires our special attention!

This is the end of the content of "inheritance and Application case Analysis of CSS". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.