How to import multiple CSS files into a CSS file

There are two ways to introduce CSS in HTML:

The purpose of import and link is to introduce a separate CSS file into a file, the difference between the two is not very big, in fact, the most important difference is the use of HTML tags linked to the external CSS file, while using the import is the use of CSS rules to introduce external CSS files. So their syntax is different.

1. If you use a link, you need to use the following statement to introduce an external CSS file:

<link href= "Style.css" rel= "stylesheet" type= "Text/css"/>

2. If you are using an import, you need to use the following statement:

<style type= "Text/css" >
@import "Style.css"
</style>

In addition, the actual effect of these two methods is slightly different. When using a link, the CSS file is loaded before the body of the page is loaded, so that the realistic page is styled from the beginning, and when the import is loaded, the CSS file is loaded after the entire page is mounted, and for some browsers, in some cases, if the size of the paging file is larger, There will be a realistic no-style page, flashing a bit before the effect of setting style. From the perspective of the visitors, this is a flaw in the use of the import type.
"For a larger site, for ease of maintenance, you might want to put all CSS styles in several CSS files, so if you use the link, you need to import a few statements into the CSS file. If you want to adjust the classification of CSS files, you need to adjust the HTML file at the same time. This is a flaw in maintenance work. If you use an import, you can introduce only one total CSS file, and then import the other standalone CSS files in this file, while the links do not have this feature.
So the suggestion here is that if only one CSS file is introduced, the link is used, and if more than one CSS file is introduced, the first is to introduce a "directory" CSS file by linking, and the "directory" CSS file is used to introduce other CSS files using the imported type.
"But if you want to dynamically decide which CSS file to introduce through JavaScript, you must use the link method to do so."

How do I import multiple CSS files into a CSS file?

Answer:

You can write three CSS style sheets.
Css_red.css, Css_blue.css, css_green.css
So you can write a master style style.css put three stylesheets in:
@import "Css_red.css";
@import "Css_blue.css";
@import "Css_green.css";

Call Style.css just call on the line.

Specific code:

Index.html

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
@charset "Utf-8", @import "Css_red.css", @import "Css_blue.css", @import "css_green.css";
Css_red.css

@charset "Utf-8";. Red {color:red;}
Css_blue.css

@charset "Utf-8";. Blue{color:blue;}
Css_green.css

@charset "Utf-8";. Green{color:green;}