CSS中@import是什么意思？

Guanhui 原创: 2020-06-28 13:23:28 8816浏览

在CSS中@import是导入CSS样式表，这种方式通常会在CSS文件中使用，这样做的好处是，可以把多个样式表导入到一个样式表中，从而在页面里面只需要导入一个样式表即可。

视频教程推荐：《CSS视频教程-玉女心经版》

引入CSS的方法有两种，一种是@import，一种是link

@import url('//m.sbmmt.com/m/faq/地址');

<link href="//m.sbmmt.com/m/faq/地址" rel="stylesheet" type="text/css" />

现在绝大部分的网站都采用后一种link方式，原因在于

@import先加载HTML，后加载CSS

link先加载CSS，后加载HTML。

所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。

@import 的几种引入方式

@import 默认引入less方式读取，出css之外：

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

属性	作用	释义
reference	使用该less文件但是不输出它	使用@import (reference) 导入外部文件，导入的样式不会添加到编译输出，除非该样式被引用。
inline	包括在源文件中输出，但是不作处理	当一个css文件可能无法被less所兼容时
less	将该文件视为less文件，无论扩展名是什么
css	将文件视为css文件，无论扩展名是什么
once	该文件仅可导入一次 (默认)	文件只会被导入一次，后续的导入相同文件的语句会被忽略。
multiple	该文件可以多次导入	文件重复被引入多次
optional	当没有发现文件时仍然编译	避免导入不存在的less文件，如果没有这个参数会报 File Error 错误