1.6 CSS Cascading features

As the last section of this chapter, the CSS's cascading properties are mainly explained here. The full name of CSS is called "Cascading style Sheets", has the reader ever thought about it, what does "cascade" mean here? Why the word is so important that it appears in its name. CSS cascading features are really important, but be aware that you should not be confused with the previous introduction of the "Inheritance", the two have an essential difference. In fact, the cascade can simply be understood as a "conflict" solution. For example, there is the following code, the sample file is located in the Web Learning Web CSS Tutorial Resource "chapter 1th \16.htm". < HTML >   < Head >   < title > Cascading Properties </ title >   < style type="text/css"> p{ Color:green; } . red{ color:red; } . purple{ Color:purple; } #line3 { Color:blue; } </ style >   </ Head >   < Body >   < p > This is the 1th line of text </p>   < P class="Red"> This is the 2nd line of text </ P >        < p   id = "Line3"   class = "red" > This is the 3rd line of text </ p >   < p style="color:orange;" id="line3"> This is the 4th line of text </p >   < P class="Purple red"> This is the 5th line of text </p> </ Body >   </ HTML >   In the code, there are 5 sets of text defined by the P tag, and 4 selectors are declared in the head section, declared as a different color. The following task is to determine the color of each line of text. The 1th line of text does not use the category sample and Id*f style, so this is displayed as the green defined in the tag selection a*8p. The 2nd line of text uses a category style, so a "conflict" has already been created. So, do you follow the green display defined in the tag Selector p, or do you follow the red display defined in the category selector? The answer is that the category selector has a higher precedence than the tag selector and is therefore displayed as red defined in the category selector. The 3rd line of text uses both the category style and the ID style, which in turn creates a "conflict." Do you follow the red display defined in the category selector or the blue one defined in the ID selector? The answer is that the ID selector has a higher precedence than the category selector, so it appears as the blue defined in the ID selector. The 4th line of text uses both inline style and ID style. Then which one will prevail? The answer is that the inline style has a higher precedence than the ID style, so it appears as an orange in the inline style definition. The 5th line of text, the use of two classes of different martial, which should prevail? The answer is that the two type selectors have the same precedence, whichever is the former, ". Purple" is defined in front of ". Red" and therefore displayed as ". Purpie" The purple of righteousness. So, in summary, the above code shows the most effective 1. Lodidance.com Figure 1 Cascading properties Summary: Precedence rules can be expressed as: inline style > ID style > Category style > Marker style In a complex page, it is possible for an element to get a style from many places, such as a headline in a Web site that is set to use green, and blue for a particular column, so that you need to override the common styling settings in that column. In a very simple page, such special requirements will not be difficult to implement, but if the structure of the site is complex, it is entirely possible to make the code very confusing, there may be no way to find the style of an element from which rule is the case. Therefore, it is necessary to fully understand the "cascade" principle in CSS. Note: The precedence of the calculated conflict style is 10 more complex, and not just the simple precedence rule above that can be fully described. But the reader can hammer a big principle, that is. The more special the style. The higher the priority level. For example, an inline style affects only one of the specified elements, so it is very special, some element of the category must be part of all of that element, so it must be more special than the markup style, and so on, so it must be specific to the category style applied to more than one element. The higher the specificity of the element. The higher the priority level is. Finally remind the reader again, do not confuse the cascade and inheritance, the two are completely different. This chapter highlights This chapter focuses on 4 aspects of the problem. This paper introduces the development process of HTML and XHTML and the problems needing attention, then introduces how to introduce CSS into HTML, then explains the various selectors of CSS and their respective usage methods, and finally emphasizes the inheritance and cascading characteristics of CSS, and their functions. As the core foundation of CSS Design, readers must really understand these basic and core fundamentals. Click to download the 1th to 7th CSS Tutorial resource to return to the tutorial list of CSS Tutorial layout

Editor: Web Learning Network

This address: http://www.lodidance.com/css/jc/660.html