Three common ways to embed CSS in HTML documents

The following three methods are commonly used to define CSS in HTML: Embedding, Linking, and Inline

1. Embedded

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

Copy code

The code is as follows:

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

2. Inline

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

Copy code

The code is as follows:

<p style="color:#FFF;font-weight:bold;">Inline style</p>

3. External reference

External reference means that the HTML document itself does not contain CSS styles, but dynamically references external CSS files to define the document's presentation.

1. Use style sheet processing instruction statements

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

Copy code

The code is as follows:

<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
Instruction Statement
</html>

However, only HTML documents written in XML syntax format support the use of this directive. Most browsers are only effective when saved in XHTML or XML format, and JS cannot process this kind of CSS, so it is not recommended.

2. Use @import command

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

Copy code

The code is as follows:

Any @import rules must appear before all other @import rules. The parameter is the URL 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 code

The code is as follows:

This is also the most commonly used method.

4. Use HTTP message headers to link to style sheets

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:<mystyle.css>;rel=stylesheet;
//Equivalent to <link rel="stylesheet" href="css的url" type="text/css" >

Multiple links can be used in the HTTP header to link multiple style sheets, and the link in the HTTP header has priority over the link in the HTML document (in the head element).

<<: The whole process of IDEA integrating docker to deploy springboot project

>>: CSS float property diagram float property details