Discover four ways to use CSS style sheets in web pages_Experience exchange

How to insert CSS into a web page

We have learned about the syntax of CSS before, but if we want to display the effect in the browser, we must let the browser recognize and call it. When the browser reads the style sheet, it must read it in text format. Here are four methods of inserting style sheets into the page: linking to external style sheets, internal style sheets, importing external 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 use the tag to link to the style sheet file on the page. This tag It must be placed in the area of ​​the page, as follows:

Copy code The code is as follows:

……

……
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.

Style sheet files can be opened and edited with any text editor (for example: Notepad). Generally, style sheet file extensions are .css. The content is the 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")} /*Define the color of the horizontal line to be earthy yellow; the blank 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 sheet
Internal style sheet is to put the style sheet in the area of ​​the page. These defined styles are applied to the page. The style sheet is inserted using the tag. From The usage of tag can be seen in the following example:

Copy code The code is as follows:

……

……


Note: Some lower version browsers cannot recognize the style tag, which means that the lower version browser will ignore the content in the style tag and display the content in the style tag directly on the page as text. In order to avoid this situation, we use HTML comments () to hide the content without letting it display:

Copy code The code is as follows :

……

3. Importing external style sheets
Importing external style sheets means importing a External style sheets, use @import when importing, see the following example:

......

……
In the example, @import “mystyle.css” means import 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 styles
Inline styles are mixed in HTML tags. In this way, you can easily define a separate style for an 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:

This is a paragraph

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 in BODY (including BODY itself), except BASEFONT, PARAM and SCRIPT.​