CSS3 Learning notes -1:css style inheritance

When I write CSS always encounter the problem of CSS style inheritance, fortunately, the general problem is not big, but has not understood the CSS style inheritance rules, recently found an article about the good, so reproduced here:

The so-called CSS inheritance refers to the style of the external label that is wrapped inside the label. 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 there are many rules in succession, and it's easy to confuse when applied.

CSS one of the main features of inheritance is that it relies on ancestors - offspring of the 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> cascade and Inheritance </strong> in- depth Discussion </p>

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.

1. 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,theborder 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.

Most border class properties, such as Padding(filler),margin(boundary), background, and border properties, are not inherited.

2. Errors 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.

3. 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:

"Apple"> The apple here is so red </H1>

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, andCSS 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:ten

　　p.bright {color:yellow;} attribute values are: One

　　p.bright Em.dark {color:brown;} The attribute value is:

　　#id316 {Color:yellow} the attribute values are: -

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 with 4.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 three </li>

<li> Example List four </li>

</ul>

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 has a weight greater than the value from H1 The weight of the element inheritance:

Style definition:

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

　　EM {Color:gray;} The attribute value is:1

Application example code:

　　

" id316 " > In- depth discussion <em>css the inheritance of </EM></H1>

This is because the characteristic value ofthe second EM rule (1) is greaterthan the inherited attribute value (0), which in fact stipulates h1#id316 the original attribute value ( 101 ) has no effect on its inherited value and remains 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 values are:1,2

　　EM {color:red;} The attribute value is:1

Given this rule, except in h1 Any em The text is all red, and inside em The text is still black, because of its selector grouping, there are two valid rules in the first rule (one for H1 h1 em The

above we discussed some of the cases where multiple style rules were applied to the same object at the same time, and some of the rules that would eventually apply, perhaps some attentive readers would say, that style What about the elements? Yes, html inline styles can be applied directly in code

answer is this: with style Elements in css1 100 Although similar to #ID316 this id 100 style This weight is a bit higher because style

5. 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 (importantrule). 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, if it is important to need two rules, Then every 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 creator-defined style, even if they are marked as The same is true of!important's important rules.

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

Style definition:

　　H1 {Color:gray!important;}

Application example code:

　　

" Color:black; " > look here! </H1>

Examples of application effects :

　　!important rules will overwrite inline STYLE the contents of the 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 the importance disappears beyond the element that matches the important rule. , this is a need for our special attention!

Reprint Address: http://www.360doc.com/content/10/0312/12/495229_18463787.shtml#

CSS3 Learning notes -1:css style inheritance