Three common ways to embed CSS in HTML documents_HTML/Xhtml_Web page production

CSS is commonly defined in HTML in the following three ways: Embedding, Linking, Inline

1. Embedded

Use the HTML style element to define CSS styles in the document.

Copy code

The code is as follows:

< style type="text/css">
h1{color:red}
p{color:blue}

2. Inline

Each HTML element contains a style attribute, which can directly define the style. This style can only be applied to the content of this element and has no effect on another element with the same name.

Copy code

The code is as follows:

Inline style

3. External reference

External reference refers to HTML document It does not contain CSS styles, but dynamically references external CSS files to define the presentation of the document.

1. Use the style sheet processing instruction statement

Write a style sheet instruction processing statement at the beginning of the HTML document

Copy code

The code is as follows:

Instruction statement

However, only HTML documents written using It is only valid when saved in xhtml or xml format, and JS cannot handle this kind of CSS, so it is not recommended to use it.

2. Use the @import command

Use the @import command between style elements to import external css files

Copy the code

The code is as follows:

< ;/head>

Any @import rule must appear before all rules. The parameter is the URL address of a css file. You can also use the @import directive in a css file to import another css file.

3. Use the link element

Copy the code

The code is as follows:

This is also the most commonly used method.

4. Use the HTTP message header to link to the style sheet

You can use the link field of the HTTP message header to link to an external style sheet.

Copy code

The code is as follows:

link:; rel=stylesheet;
//Equivalent to

You can use multiple HTTP headers A link, thereby linking multiple style sheets, and the link in the HTTP header has priority over the link in the HTML document (in the head element).