How to import multiple CSS files into one CSS file-CSS Tutorial-php.cn

How to import multiple CSS files into one CSS file

高洛峰

Release： 2016-12-16 15:48:02

Original

1511 people have browsed it

Two methods of introducing css into HTML:

The purpose of importing and linking is to introduce an independent css file into a file. There is not much difference between the two. In fact, the biggest difference between the two is The link type uses HTML tags to introduce external css files, while the import type uses css rules to introduce external css files. Therefore their syntax is also different.

1. If you use link style, you need to use the following statement to introduce the external css file:

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

````In addition, use The actual effects of these two methods are also slightly different. When using the link type, the css file will be loaded before loading the main part of the page, so that the actual page will have style effects from the beginning. When using the import type, the css file will be loaded after the entire page is loaded. For For some browsers, in some cases, if the page file is relatively large, an unstyled page will appear first, and then the effect of setting the style will appear after a flash. From the perspective of the viewer, this is a drawback of using import.
``For a larger website, in order to facilitate maintenance, you may want to put all css styles in several css files. In this way, if you use link import, you need several statements to import the css files separately. If you want to adjust the classification of css files, you need to adjust the html files at the same time. This is a drawback for maintenance work. If you use the import method, you can only import a general css file, and then import other independent css files in this file; while the link method does not have this feature.
````So the suggestion to you here is that if you only introduce one css file, use the link method; if you need to introduce multiple css files, first use the link method to introduce a "directory" css file. This "directory" Use import in the css file to introduce other css files.
````But if you want to dynamically decide which css file to import through JavaScript, you must use linking to achieve this.

How to import multiple CSS files into one CSS file?

Answer:

You can write three css style sheets
css_red.css , css_blue.css , css_green.css
In this way, you can write a main style style.css and install all three style sheets:
@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";

Just call style.css when calling.

Specific code:

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字体属性</title>
<link rel="stylesheet"  type="text/css" href="style.css" />
</head>

<body>
<p class="red">红色</p>
<p class="blue">蓝色</p>
<p class="green">绿色</p>
</body>
</html>

Copy after login

style.css

@charset "utf-8";


@import "css_red.css";
@import "css_blue.css";
@import "css_green.css";

Copy after login

css_red.css

@charset "utf-8";


.red {
color:red;
}

Copy after login

css_blue.css

@charset "utf-8";


.blue{
color:blue;
}

Copy after login

css_green.css

@charset "utf-8";


.green{
color:green;
}

Copy after login

More How to import multiple CSS files into one For related articles in CSS files, please pay attention to the PHP Chinese website!