What does @import mean in CSS?

In CSS, @import is to import CSS style sheets. This method is usually used in CSS files. The advantage of this is that multiple style sheets can be imported into one style sheet, so that on the page You only need to import a style sheet.

Video tutorial recommendation: "CSS Video Tutorial-Jade Girl Heart Sutra Edition"

Introduction There are two CSS methods, one is @import and the other is link

@import url('地址');

<link href="地址" rel="stylesheet" type="text/css" />

Now most websites use the latter link method because

@import is loaded first HTML, then CSS

link loads CSS first, then HTML.

So the former will load the web page in a format that is not surprising to the viewer, while the latter will load the web page with formatting.

Several import methods of @import

@import The default introduction is less mode reading, out of css:

@import "foo"; // foo.less 导入为less文件 
@import "foo.less"; // foo.less 导入为less文件
@import "foo.php"; // foo.php 导入为less文件
@import "foo.css"; // 语句保持原样，导入为css文件

##referenceUse the less file but Do not output itUse @import (reference) to import external files, imported styles are not added to the compilation output unless the style is referenced. inlineInclude output in the source file, but do not process itWhen a css file may not be compatible with lessless Treat the file as a less file, regardless of the extension css Treat the file as a css file, regardless of extension onceThe file can only be imported once (default)The file will only be imported once, and subsequent statements that import the same file will be ignored. multipleThe file can be imported multiple timesThe file can be imported multiple timesoptional Still compile when no file is foundAvoid importing non-existent less files. Without this parameter, a File Error will be reported

Attribute	Function	Definition

Recommended tutorial: "

CSS Tutorial"

The above is the detailed content of What does @import mean in CSS?. For more information, please follow other related articles on the PHP Chinese website!