Four ways to import CSS

CSS overview

CSS is the abbreviation of Cascading Style Sheets, which is called Cascading Style Sheets in Chinese. It is used to control the performance of web page data and can separate the performance of web pages from the data content.

1. Four ways to import CSS

1, in-line formula

Inline is the CSS style set in the style attribute of the tag. This method does not reflect the advantages of CSS and is not recommended

<p style="background-color: aqua;font-family: 'Arial Narrow'">hello world</p>

2. Embedded

Embedded is to centrally write CSS styles in the <style></style> tag pair of the <head></head> tag pair of the web page. The format is as follows

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    div{
        color:red;
        font-size:50px
        }
        p{
            background-color: aqua;
            font-family: 'Arial Narrow'
        }
    </style>
</head>

3. Linked

Import a .css file into the HTML file

mystyle.css

p{
    background-color: bisque;
    font-size: 20px;
}
a{
    color: aquamarine;
    font-family: "Cambria Math";
}

use mystyle.css in the HTML file

<link href="mystyle.css" rel="stylesheet">
<!--href is the linked css file (absolute path), rel indicates the file type (can be imported anywhere)-->

4. Imported

A separate .css file is introduced into the HTML file. The import type uses CSS rules to import external CSS files. The <style> tag is also written in the <head> tag. The syntax used is as follows:

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "mystyle.css";<!--absolute path-->
    </style>
</head>

Note:
The import type will load the CSS file after the entire webpage is loaded, so this causes a problem. If the webpage is relatively large, the unstyled page will appear first, and after a flash, the style of the webpage will appear. This is an inherent flaw of import. The difference between the link type and the import type is that it will load the CSS file before loading the main body of the web page file, so the displayed web page is styled from the beginning, and it will not display the unstyled web page like the import type. , and then display the styled web page, which is the advantage of linking. The import type has a limited number of imports, and there is no limit to the number of link types