If you want to display the expected CSS style sheet effect in the browser, you must let the browser recognize and call CSS correctly. When the browser reads the style sheet, it must read it in text format. Here are four methods of inserting CSS style sheets into the page: linking to external style sheets, internal style sheets, importing appearance style sheets, and embedded styles.
1. Link to an external style sheet
To link to an external style sheet is to save the style sheet as a style sheet file, and then add it to the page Use the <link> tag to link to this style sheet file. The <link> tag must be placed in the <head> area of the page, as follows:
##<head>
...... <link href="mystyle.css" rel="stylesheet" type="text/css" media="all" >
……
</head>
The above example indicates that the browser reads the defined style sheet in document format from the mystyle.css file. rel="stylesheet" refers to using this external style sheet in the page. type="text/css" means that the file type is style sheet text. href="mystyle.css" is where the file is located. media is to select the media type. These media include: screen, paper, speech synthesis device, Braille reading device, etc.
An external style sheet file can be applied to multiple pages. When you change this style sheet file, the styles of all pages are changed accordingly. It is very useful when making a large number of websites with the same style pages. It not only reduces the workload of duplication, but also facilitates future modification and editing, and also reduces repeated downloading of codes when browsing.
Note
Style sheet files can be opened and edited with any text editor (for example: Notepad). Generally, style sheet files have a .css extension. The content is a defined style sheet and does not contain HTML tags. The content of the mystyle.css file is as follows:
##hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
/*Definition The color of the horizontal line is earthy yellow; the margin on the left side of the paragraph is 20 pixels; the background image of the page is the back40.gif file in the images directory */
2. Internal style sheetThe internal style sheet places the style sheet in the <head> area of the page. These defined styles are applied to the page. Styles The table is inserted using the <style> tag. The usage of the <style> tag can be seen from the following example:
<head>
……
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background- image: url("images/back40.gif")}
</style>
......
</head>
##3. Importing external style sheets
Importing external style sheets refers to < ;style> to import an external style sheet, use @import when importing, see the following example: <head>
##…… <style type=”text/css”> <!--
@import “mystyle.css”
Declaration of other style sheets
-->
</style>
......
</head>
In the example, @import "mystyle.css" means importing mystyle .css style sheet, pay attention to the path of the external style sheet when using it. The method is very similar to the method of linking into a style sheet, but the importing external style sheet input method has more advantages. Essentially it's equivalent to being stored in an internal style sheet. Note: Importing external style sheets must be at the beginning of the style sheet, above other internal style sheets.
4. Inline style Inline style It is used mixed in HTML tags. In this way, it is very simple to define a separate style for a certain element. The use of inline styles is to directly add the style parameter to the HTML tag. The content of the style parameter is the CSS properties and values, as in the following example:
<p style="color: sienna;margin-left: 20px;">
This is a paragraph </p>
<!--The color of this paragraph is earthy yellow, and the left margin is 20 pixels- ->
The content in the quotation marks after the style parameter is equivalent to the content in the curly brackets of the style sheet.
Note: The style parameter can be applied to any element within the BODY (including the BODY itself), except BASEFONT, PARAM and SCRIPT.
#Overlay of multiple style sheets CSS style sheets have a cascading order. Here we discuss the superposition of these methods of inserting style sheets. If several different style sheets are used on the same selector, this attribute value will overlap several times. If there is a conflict between style sheets, the last defined one will prevail. For example, we first link to an external style sheet, which defines the color, text-alig and font-size properties of the h3 selector:
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
/*The text color of title 3 is red; Left-aligned; the text size is size 8*/
Then the text-align and font-size attributes of the h3 selector are also defined in the internal style sheet:
h3
{
text-align: right;
font-size: 20pt;
}
/*The text of title 3 is aligned to the right; the size is 20-point font*/
Then the superimposed style of this page is:
color: red;
text-align: right;
## font-size: 20pt; /*Text color is red; aligned to the right; size is 20pt*/
The font color is retained from the external style sheet, and When both alignment and font size are defined, the later definition takes precedence over the internal style sheet.
##Cascading order
When the same HTML element is styled by more than one When defining, which style will be used?
Generally speaking, all styles will be cascaded in a new virtual style sheet according to the following rules, with number 4 having the highest priority.
1. Browser default settings
2. External style sheet
3. Internal style sheet (located inside the <head> tag)
4. Inline styles (inside HTML elements)
Therefore, inline styles (inside HTML elements) have the highest priority, which means that it will take precedence over the following style declarations: Styles in tags declaration, a style declaration in an external style sheet, or a style declaration in the browser (the default).
Next Section
