From scratch, I learned the basic knowledge of html (7) CSS styles and css styles.

From scratch, I learned the basic knowledge of html (7) CSS styles and css styles.
1. inline css styles are directly written in existing HTML tags.

1 <! Doctype html> 2 Inline css style, directly written in existing HTML tags
Where can CSS styles be written?
From the perspective of CSS style code insertion, there are three types: inline, embedded, and external.
InlineThe css style sheet directly writes the css code in the existing HTML Tag, as shown in the following code:
<P> the text here is red. </P> <p>;Font-size: 12px "> the text here is red. </P>
Try: Use the inline css style to set the font color to blue for the words "Cool Internet ".
In the editor13Write code to the first span label in the row:
style="color:blue"
The code you write or not is as follows:
<Span>

Ii. Embedded css styles, written in the current file
1 <! Doctype html> 2 Embedded css style, written in the current file
Now, we have a task to change the font size of the "cool Internet", "timely and considerate services", and "fun and easy to learn" text in the editor to 18px.
If we use the inline css style method we learned to set it, it will be a headache (add sytle = "font-size for each <span> tag: 18px "Statement ).
Embedded css styles can be written between <style type = "text/css"> </style> labels. The following code sets the text in the three <span> labels to Red:
<style type="text/css">span{color:red;}</style>
Embedded css styles must be written between <style> </style> and generally between 
Try it: Use the embedded css style to set the font color
There are three <span> labels in the section in the code editor. Set the text color in the three <span> labels to blue.

  

 
   


  
Do you want to enter code like the following:
Span
{Color: blue;
}
Iii. external css styles, written in a separate file
1 <! Doctype html> 2 External css style, written in a separate file
1 span{2    color:red;3    4 }
External css style, written in a separate file
The external css style (also known as the external style) is to write the css code into a separate external file. This css style File.css"Is the extension,
Use the <link> label in 
<link href="base.css" rel="stylesheet" type="text/css" />
Note:
1. the css style file name should be named with meaningful English letters, such as main.css.
2. rel = "stylesheet" type = "text/css" is a fixed writing method that cannot be modified.
3. The <link> tag location is generally written in the 
Try it: Set the text font size with an external css style
1. Click Openstyle.cssFile (under the html file ),3Line input codefont-size:20px;Observe the text size changes in the result window.
The code in the style.css file is the same as the following:
Span
{Color: red;
Font-size: 20px;
}
Inline: <span> embed: <style type = "text/css"> span {color: red; font-size: 10px ;}</style>
External: <link href = "style.css" rel = "stylesheet" type = "text/css">
The rel attribute defines the relationship between a linked file and an HTML document. StyleSheet, which means style call,
Inline Applicability: local specialization
Embedded Application: unified label style format
External Application: facilitates code reuse and Management
Rel is the abbreviation of relationship.
In stylesheet, style indicates the style, and sheet indicates the table. In general, style indicates the style table.
Rel = "stylesheet" describes the relationship between the current page and the document specified by href. That is, the document connected by href is a new table.
Link declares the external link css file, href path, rel is the relationship between the external link document and this document, that is, relative, and type is the type of the external link document.
Iv. Priority of the three methods
1 <! Doctype html> 2 Priority of the three methods
1 span{2    color:blue;3 }
Priority of the three methods
If we use three methods to set css styles for the same element at the same time, which method is really effective? This occurs in the editor.
1. UseInlineSet "Awesome Internet" text in CSSPink.
2. UseEmbeddedCSS to set the textRed.
3. Finally, useExternal StyleSet textBlue(In the style.css file ).
But in the end, you can see that the text of the word "Cool Internet" is setPink.
Because these three styles have priorities, remember their priorities:Inline> embedded> external
But embedded> external style has a premise: the position of the embedded css style must be behind the external style.
As the code editor does, <link href = "style.css"...> code in <style type = "text/css">... </style> code (this is also written in actual development ).
If you are interested, you can try them and change their order to see if their priorities have changed.
In summary-- Proximity principle (the closer the element to be set, the higher the priority level).
However, note that the priorities summarized above have one premise: the css styles in inline, embedded, and external style tables share the same weights.
Task
Use inline, embedded, and external CSS styles to set the font size of "Awesome Internet" text and feel the priority of these three methods.
Don't forget to set the css style code for the font size:
font-size:20px;
Some friends asked, if there is a situation: For the same element, we have used three methods to set css styles at the same time, which method is really effective? This occurs in the editor on the right.
1. UseInlineSet "Awesome Internet" text in CSSPink.
2. UseEmbeddedCSS to set the textRed.
3. Finally, useExternal StyleSet textBlue(In the style.css file ).
But in the end, you can see that the text of the word "Cool Internet" is setPink. Because these three styles have priorities, remember their priorities:Inline> embedded> external
But embedded> external style has a premise: the position of the embedded css style must be behind the external style. As shown in the right code editor, <link href = "style.css"...> code in <style type = "text/css">... </style> code (this is also written in actual development ). If you are interested, you can try them and change their order to see if their priorities have changed.
In summary-- Proximity principle (the closer the element to be set, the higher the priority level).
However, note that the priority summarized above has one premise: When the css styles in inline, embedded, and external style tables share the same weight value, what is the weight? This will be explained in the 9-2 section later.
Task:
Use inline, embedded, and external CSS styles to set the font size of "Awesome Internet" text and feel the priority of these three methods.
Don't forget to set the css style code for the font size:
font-size:20px;
 
Review:

CSS is chained in Html tags.

The CSS external chain is written in the exclusive. CSS file, and the path (href) must be declared in the Html header ).

CSS is embedded in the Html header.
 
1. The Inline style sheet has a maximum weight of 1000.

2. The weight of the ID selector is 100

3. The weight of the Class selector is 10.

4. the HTML Tag selector has a weight of 1.
 
In general, the inline style level is the highest, the inline style level is the second, and the external level is the lowest. If the same element is set in all three styles, the multiple styles are used.

If the weights are the same, use the proximity principle.

"!" Is marked in the same group of attribute settings. The important rule has the highest priority.

CSS priority rules:

Each selector has A weight value. The larger the weight, the higher the priority.

B. When the weights are equal, the subsequent style sheet settings are better than the first style sheet settings.

The C creator's rule is higher than the viewer: that is, the priority of the CSS style set by the webpage writer is higher than that set by the browser.

The CSS style inherited by D is not as good as the CSS style later specified

E. Mark "!" in the same group of attribute settings. The important rule has the highest priority.
 
If you do not care about the weight, the closer it is to the css modifier object, the more it will be modified according to its rules. However, for example, to modify <span>
① Adding the style of the inner chain within the span must be closest, so this is used.
② Even if there is a class selector in the header, such as. lei {font-size: 20px;}, and this class must be declared in the <span> label,
<Span class = "lei"> </span>,
Because none of the three CSS selector weights have an inner chain <span> the priority of inline CSS is higher than that of embedded CSS. That is to say, adding style = "color: blue" to spen is no problem, it takes precedence over the above style table execution.