Three ways to validate CSS control styles with priority comparisons

This article mainly introduces the three ways to verify the CSS control style by the priority contrast, has the certain reference value, now shares to everybody, has the need friend to refer to

As we all know, CSS in the Chinese name to do cascading style sheets, and CSS in the control style, there are three ways to introduce, here is a simple introduction of CSS control style of three ways

OK, straight into the topic, we all know that CSS in Chinese is called a cascading style sheet, and CSS in the control style, there are three ways to introduce, namely:

1> external style sheet: Write style rules directly in the *.css file and then *.html in the page by <link> tags
2> Internal style sheet: (located inside the 3> inline style: (inside HTML elements)

According to the W3school website (point here Direct), when the same HTML element is defined by more than one style, they are priority points, such as, the priority from small to large, where 4 of the highest priority:

1. Browser default settings
2. External style sheet
3. Internal style sheet (inside 4. Inline style (inside HTML elements)

For this conclusion, I believe you must have a lot of questions, and many online are directly on the website of the content of the copy and then paste the release even if we are very tired and trouble, so, here let us together to verify the comparison.

Note: This verification is mainly for the following 3 priority, about the browser default settings this, I believe we all know that he must be the lowest, we do not have too many examples to verify.

I. Description of the verification environment

Browser: FireFox 22.0
Language: HTML 4.01/css
Development tools: Aptana Studio 3

Second, the use of three ways to directly label the element definition style
1> First, we use an external style sheet directly to define the style of the P tag:

Xiaoxuetu.css

p {     Color:blue}

Xiaoxuetu.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Display effect:


Let's start by verifying it.

2> external style sheet VS internal style sheet (define internal style sheet, then introduce external style sheet definition file) to add an internal stylesheet, that is, define the style rules directly in the 
Xiaoxuetu.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >
Display effect:

Draw Priority results: External style sheets > internal style Sheets

3> external style sheet VS internal style sheet (introducing an external style sheet definition file and then defining an internal style sheet) This is a simple step, which is to move the link label cut directly to the front of the inner style sheet defined in the head tag:

Xiaoxuetu.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
Display effect:


Draw priority results: Internal style sheets > external style Sheets

From the <2> and <3> two Tests we can know that in the direct definition of the style of the label, the external style sheet and the internal style sheet is the priority of their introduction to the order concerned, hey, is not very fortunate not to fully believe that the official website said ...

4> the external style sheet VS inline style defines the style directly in the P tag, this time we modify the xiaoxuetu.html code:

Xiaoxuetu.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
Display effect:


Draw priority results: Inline style > External style sheet

5> inline style VS internal style sheet, this time we modify the following xiaoxuetu.html code:

Xiaoxuetu.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
Display effect:


Draw priority results: inline style > Internal style sheet

From the above steps <2> to <5>, we know that the precedence of the inner style is the largest, and the precedence of the inner style sheet and the external style sheet depends on the order in which they are introduced and defined, if the style is first defined with an internal style sheet, and then the style defined by the external style sheet is introduced. The style of your external style sheet will override the style of the inner style sheet definition, and vice versa.

Of course, this is the same thing when you choose the ID or class. If the style definition for a label has both a class and an ID selector, and contains three style definitions, you'll have to read the following priority tests first.

Iii. determining the priority of a style with ID, class, and Tag Selector
In this test, to reduce the impact of other factors, only the internal style sheet was used to define the style, and the ID selector and class selector were used to select the label using the style.

1> three different ways to coexist

 Xiaoxuetu.html 
 
 

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
Show effect: Draw priority result ID selector > class selector > tag Selector

2> when there are only two class or two IDs

Xiaoxuetu.html

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
Display effect:



Get priority results: who has precedence over who is in front when and only if there are two or more classes or IDs.

3> only when the label P selector

Xiaoxuetu.html (blue style first, red style after)

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
Display effect:



Xiaoxuetu2.html (red style first, after blue style)

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" > 
Display effect:

From the two results we can know that, when only the tag selector, the later defined style sheet priority is higher.
Iv. Summary
1. When using only the ID selector, class selector, or tag Selector, regardless of how many style sheet definitions are used, the inline style is the highest priority, and then the external style sheet and the internal style sheet will have to see their order of introduction;
2. When using only the ID selector or class selector, the same tag, regardless of the number of uses, is ranked higher priority;
3. When using only the tag Selector, if you define more than one, the tag selector you write on the last side takes effect, that is, it has the highest priority;
4. When the same tag has both an ID selector and a class selector, with the tag Selector, the priority order is the ID selector > class selector > tag Selector;
5. When every kind of time, it is specific to the specific analysis of the situation, hey, haha ...

Well, this article I very hard to write, oh, if you feel good, trouble click Like, or you have any questions or not the same opinion, welcome message discussion Oh, because the day to work, so I will be in the evening when the time to deal with, also please forgive ha.

 The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!