CSS tutorial (4) How to insert CSS into a web page

In the first two chapters, we learned about the syntax of CSS, 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.

Linking to an external style sheet

Linking to an external style sheet means saving the style sheet as a style sheet file, and then linking to the style sheet file with the ?lt;link> tag on the page. This tag must be placed in the area of ​​the page, as follows:

……

......

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.

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 repeated work, 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 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")}
(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)

Internal style sheet

The internal style sheet places the style sheet in the head> area of ​​the page. These defined styles are applied to the page. The style sheet is marked with
……


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 replace the content in the style tag as text. displayed directly on the page. In order to avoid this situation, we use HTML comments () to hide the content without letting it display:

……
< ;style type="text/css">


……


Importing external style sheet

Importing an external style sheet means importing an external style sheet in the