HTML imports css files (four methods)

1. Embedded style sheets

Add a css style to the <style> tag in the HTML <head> tag. The CSS style defined by the embedded style sheet can only be used in the current web page.

<!DOCTYPE html>
<html>
    <head>
        <title>内嵌样式</title>
        <style>
            body {
                background-color: linen;
            }
            h1 {
                color: maroon;
                margin-left: 40px;
            }
        </style>
    </head>  
    <body>
        <h1>样式</h1>
    </body>
</html>

Because the embedded style sheet needs to define the CSS style inside the HTML document, it will increase the size of the document, and when other documents also need to use the same style in the embedded style sheet, it cannot be imported into other documents. Redefinition in other documents will lead to code redundancy, which is not conducive to later maintenance.

2. Inline styles

The inline style is to define the style information directly in the style attribute of the HTML tag. Since the inline style is defined inside the tag, it is only valid for the tag where it is located.

<!DOCTYPE html>
<html>
    <head>
        <title>内联式</title>
    </head>  
    <body>
        <h1 style="color: maroon; margin-left: 40px">内联式</h1>
    </body>
</html>

Although inline style can easily give CSS style to HTML tags, its shortcomings are also very obvious, so it is not recommended to use it too much.

Defining inline styles requires defining the style attribute in each HTML tag, which is inconvenient;
Be especially careful when using double or single quotes in inline styles, because attributes of HTML tags usually use double quotes to wrap the value of the attribute, for example <input type="text">;
Styles defined in inline styles cannot be reused anywhere else;
Inline styles are very inconvenient for later maintenance, because a website usually consists of many pages, and when modifying the page style, you need to modify the pages one by one;
Adding too many inline styles can increase the size of the HTML document.

3. External style sheet

An external style sheet is the most common and recommended way to reference CSS. You only need to define the CSS style in a .css file, and then use HTML tags to <link>apply the .css style file to the HTML document.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="./style.css">
    </head>  
    <body>
        <h1>外部样式表</h1>
    </body>
</html>

Because the CSS style is defined in a separate .css file, it can be referenced between multiple pages. If you want to modify the style of a web page, you only need to modify the CSS style file, which is very convenient.

4. Import style sheet

You can also @importrefer to external style sheets using , which <link>is similar to using tags. Create a general style.css first, and import all styles into style.css first.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="style.css">
    </head>  
    <body>
        <h1>外部样式表</h1>
    </body>
</html>

style.css:

@import "1.css";
@import "2.css";
@import "3.css";
@import "4.css";

1.css: (css from 1 to 4 are the same, all add styles)

.top1{
    list-style-type: none;
    margin: 0;
    padding: 0;
}