CSS style inheritance (goto)

Source: http://www.yesky.com/356/1830356.shtml Thanks for sharing

Editor: the so-called CSS inheritance refers to the interior of the label will have an external label style properties. The most typical application of inheritance features is a style preset for the entire Web page, which needs to be specified as part of the other styles in the individual elements. This feature gives web designers a better place to play. But at the same time there are many rules of succession, the application of the time is easy to confuse, Donger today, specifically and everyone talk about this application.

Body

CSS is the abbreviation for Cascading style sheets (cascading style Sheets), and its specification represents a unique stage of development in the history of the Internet. Now for the web-making friends, seldom 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 easier-to-modify look for the document, reducing the burden on web designers. Here we mainly want to and friends with the inheritance of CSS and the particularity of a bit in-depth discussion.

　　First, inheritance

One of the main features of CSS is inheritance, which is dependent on the ancestor-descendant relationship. 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 body-defined color value is also applied to the text of a paragraph. The following examples illustrate:

　　style definition:body{color:red;}

　　Application Example code:<p>css <strong> cascading and inheritance </strong> in-depth discussion </p>

　　Examples of application effects:

The application result of this code is: "CSS cascading and inheritance in-depth discussion" This paragraph is red color, "cascade and inherit" because of the application of strong elements, it is bold. This is in line with the creator's intentions and why inheritance is part of the CSS.

　　Ii. Limitations of CSS Inheritance

In CSS, inheritance is a very natural behavior, and we don't even have to consider whether we can do it, but inheritance has its limitations.

First, some properties are not inherited. There's no reason for that, just because it's set up. For example: Border property, as you know, the border property is used to set the bounding rectangle of an element, and it has no inheritance. As shown, if you inherit the border property, the document looks strange unless you take another step to turn off the inheritance property of the border.

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

Iii. mistakes easily caused by inheritance

Sometimes inheritance also brings some errors, such as the following CSS definition:

Body{color:blue}

In some browsers, this definition makes the text in addition to the table blue. Technically, this is not true, but it does exist. So we often need to help with some techniques, such as defining CSS like this:

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

The text in this form will also turn blue.

　　Four, multi-style hybrid applications

Now that there is inheritance, there may be some readers in the stylesheet that might not be able to understand what happens when multiple stylesheets are applied to an object at the same time. Let's give a simple example:

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

　　Application Example code:

　　Apply An example effect : Because the selector H1 and. Apple match the above H1 element, which one does the browser apply to? By observing it in the browser, we found that the text was applied to the. Apple style, so it shows red. This is because the specifics of the two rules are different, and CSS rules must be handled this way.

The particularity of the style sheet describes the relative weights of the different rules, and its 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
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 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.

Five, the precedence problem of CSS inheritance

Above we discussed the inheritance and particularity of CSS, under the special framework, the inherited attribute value is 0, which means that any rule that shows the declaration will overwrite its inheritance style. Therefore, no matter how high the weight of a rule, if no other rules can be applied to the inherited element, then it is only an inherited rule, for example.

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

　　Application example code:
<ul>
<li> Example List one </li>
<li> Example List two </li>
<li> Example List III </li>
<li> Example List four </li>
</ul>

　　Examples of application effects:

Some readers may think that except for the list items that contain the. White class, all the remaining list items should be grayed out. However, this is not the case.

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

There may be some places are not very good understanding, you can think more about it will understand, usually in the application of style sheet when more attention to think about.

Let's take a look at an example where the EM accent will be gray rather than black, given the markup shown below, because the EM rule's weights are greater than the weights 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:
<H1 id= "id316" > in-depth discussion on the inheritance of <em>css </EM></H1>

　　examples of application effects :

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

　　Tips:

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

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

Given this rule, any em text except in the H1 element is red, and the EM text inside the 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) There are two attribute values-one for each rule.

In the above we discuss some of the cases where multiple style rules are applied to the same object at the same time and which rules are eventually used, perhaps some attentive readers will say, what about the style element? Yes, you can apply inline style styles directly in the HTML code. So what is its characteristic value?

The answer is this: the element with the style has a value of 100 under CSS1, although the attribute value of the ID selector, similar to #id316, is 100, but in practice the style has a higher weight because the value of the style element looks larger than the weight of most ordinary rules. So we can see that the inline style has a high property value, the specific example we do not give, you can try it yourself.

VI. human-defined CSS inheritance precedence

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, which are called important rules (important rule). This is named according to the way they are declared and their natural properties. By inserting a semicolon in front of a rule! Important such 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 required, then each rule needs to be labeled!important.

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

A rule marked as!important has the highest weight, which means that he has no specific attribute value, but is larger than the other weights. Note that while a producer-defined style has a higher weight than a user-defined style, the!important rule is the opposite: important user-defined rules have a higher weight than the producer-defined style, even for important rules labeled!important.

After reading so many text introductions, let's take a look at the following example:

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

　　Application example code:

　　examples of application effects :
The!important rule overrides the contents of the inline style property, so the resulting text is gray rather than black.

There is one last thing to consider: the inherited value always has the characteristic value 0, even if it is inherited from a rule with!important, and in addition to the elements that match the important rules, the importance will disappear, which is something we should pay special attention to!

CSS style inheritance (goto)