Web Front end Sixth session

IE8 How compatible:

IE8 has been out for a while, but after using a lot of DSS or rolling picture incompatibility problems, such as scrolling picture in IE7 completely so, but IE8 can only show static, and format problems, there are two ways to solve: the first is to open the IE8, select [Tools] [Compatibility view] option, Adapt yourself when you see incompatible websites. The second is the production of the site, in the header file [head] Add code [meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/] on the [title] above, note: replace [] with < >

inline element and block element transformations:

<div style= "Display:inline" > block element variable inline element

</div><span style= "Display:block" > inline element block element </span>

The four principles of CSS precedence:

Principle one: Inheritance is inferior to the specified

If a style is inherited, it is never as high as the specified priority.
Example 1:
CODE:
<style type= "Text/css" >
<!--
*{font-size:20px}
. class3{font-size:12px;}
-
</style>
<span class= "CLASS3" > How big is my size? </span>

Running result:. class3{font-size:12px;}

Example 2:

CODE:
<style type= "Text/css" >
<!--
#id1 #id2 {font-size:20px}
. class3{font-size:12px}
-
</style>

<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my font size? </span> </p>
</div>

Running result:. class3{font-size:12px;}

Note: The following major principles are based on "designations".

Principle two: #ID >. class > Tag Selector

Example:
CODE:
<style type= "Text/css" >
<!--
#id3 {font-size:25px;}
. class3{font-size:18px;}
SPAN{FONT-SIZE:12PX}
-
</style>

<span id= "ID3" class= "CLASS3" > How big is my size? </span>

Run Result: #id3 {font-size:25px;}

Principle three: The more concrete the more powerful.

Explanation: The more specific the CSS selector style definition for an element, the more explicit the hierarchy, the higher the priority of the definition.
CODE:
<style type= "Text/css" >
<!--
. Class1. Class2. class3{font-size:25px;}
. Class2. class3{font-size:18px}
. class3 {font-size:12px;}
-
</style>

<div class= "Class1" >
<p class= "Class2" > <span class= "CLASS3" > How big is my size? </span> </p>
</div>

Running results:. Class1. Class2. class3{font-size:25px;}

Principle four: Label #id > #id; tags. class >. class

The above principle should also be known to everyone, see examples
CODE:
<style type= "Text/css" >
<!--
SPAN#ID3{FONT-SIZE:18PX}
#id3 {font-size:12px}
SPAN.CLASS3{FONT-SIZE:18PX}
. class3{font-size:12px}
-
</style>
<span id= "ID3" > How big is my size? </span>
<span class= "CLASS3" > How big is my size? </span>

Run result: span#id3{font-size:18px} | SPAN.CLASS3{FONT-SIZE:18PX}

Many people will have this question, why not put this principle four into principle one formation:
"Tags #id > #ID > tags. class >. class > tag Selector > Wildcard"? or "label. Class" As a more specific ". Class" so as to fall into principle two? Later I will answer your doubts, this involves the parsing rules of CSS---------The four principles are also priority, is not some confused? Don't worry, keep looking.

* The weights of the four principles

Believe that a lot of people know the four principles above, do not think that you know the four principles can tell the CSS that code is working, do not believe? Then you have 5 seconds to know the following code, test the size of the text?
CODE:
<style type= "Text/css" >
<!--
. Class1 P#id2. class3{font-size:25px}
Div. Class2 span#id3{font-size:18px}
#id1. class3{font-size:14px}
. Class1 #id2. class3{font-size:12px}
#id1 #id2 {font-size:10px}
-
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my font size? </span> </p>
</div>
I removed some code for the convenience of everyone.

The weight of the four principles is: Principle One > Principle two > Principle three > Principle Four

Explain:

First, follow principle one

There is a designation to start using the following principle, and no designation inherits the nearest definition from him.

And then start principle two

1. Compare the highest priority selectors
Example:
CODE:
<style type= "Text/css" >
<!--
#id3 {font-size:18px}
. Class1. Class2. class3{font-size:12px}
. class3{font-size:18px}
div P SPAN{FONT-SIZE:12PX}
-
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my font size? </span> </p>
</div>

Run Result: #id3 {font-size:18px}

By deleting the first two lines in the CSS above, it can be concluded that if there is no top-level #id will be looking for. Class even if the following CSS is described in terms of "Principle II", it cannot break the principle one.
2, if the two CSS if the highest selector priority, then compare their number
Example:
CODE:
<style type= "Text/css" >
<!--
. Class1 #id3 {font-size:12px}
. Class1. Class2 #id3 {font-size:14px}
-
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my font size? </span> </p>
</div>

Run result:. Class1. class2 #id3 {font-size:14px}

3, if the highest selector level and quantity are the same, then according to the principle of the second comparison of their next level, and so on.
Example 1:
CODE:
<style type= "Text/css" >
<!--
#id1. Class2. class3{font-size:14px}
Div. class2 #id3 {font-size:12px}
-
</style>
<div id= "Id1" class= "Class1" >
<p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my font size? </span> </p>

Run result: #id1. Class2. class3{font-size:14px}

* The position of the top selector does not rank, demonstrating:  code:<style type= "text/css" ><!--#id1. Class2. Class3{font-size:18px}.class1 # Id2. Class3{font-size:14px}.class1. Class2 #id3 {font-size:12px}--></style><div id= "id1" class= "Class1" ><p id= "Id2" class= "Class2" > <span id= "id3" class= "CLASS3" > How big is my font size? </span> </p></div> Replace 3 css in the previous example can be drawn, which is located at the end, which works. Show them the same level, and the back will overwrite the previous one. * The irrationality of principle II is attributed to principle two, argumentation: Code:<style type= "Text/css" ><!--. Class1 span#id3{font-size:14px} #id1. Class2. class3{ Font-size:12px}--></style><div id= "Id1" class= "Class1" ><p id= "Id2" class= "Class2" > <span id= "ID3" class= "CLASS3" > How big is my size? </span> </p></div> #id1. Class2. class3{font-size:12px} You can see that SPAN#ID3 is not one level higher than #id1. No result start principle three if the comparison results, the selectors correspond from the highest level, and the number of levels is the same, then start comparing who is more specific. Example: Code:<style type= "Text/css" ><!--#id1. Class2 span{font-size:14px}.class1 #id3 {font-size:12px}--> </style><div id= "Id1" class= "Class1" ><p id= "Id2" class= "Class2" > <sPan id= "ID3" class= "CLASS3" > How big is my size? </span> </p></div> #id1. Class2 span{font-size:14px} Of course it can also be understood as "less than one level of style" in the principle two layer comparison, the missing level is not " A more hierarchical style "the higher the level of that level." (Tongue twister) * The irrationality of principle three is classified into principles, argumentation: Code:<style type= "Text/css" ><!--. class2. class3{font-size:14px}span.class3{ Font-size:12px}--></style><div id= "Id1" class= "Class1" ><p id= "Id2" class= "Class2" > <span id= "ID3" class= "CLASS3" > How big is my size? </span> </p></div> The above example can be seen, if the principle of four into principle three, the SPAN.CLASS3 as two layers, then should be as many as the. Class2 CLASS3 level, then should display 12px, And that's not the case. Final Showdown principle four if the result is not yet, then the comparison of principle four begins: Example 1:code:<style type= "Text/css" ><!--. Class1 p.class2. class3{font-size:14px}. Class1. Class2 class3{font-size:12px}--></style><div id= "Id1" class= "Class1" ><p id= "Id2" class= " Class2 "> <span id=" id3 "class=" CLASS3 "> How big is my size? </span> </p></div>.class1 p.class2. class3{font-size:14px}

Web Front end Sixth session