首页  >  文章  >  web前端  >  CSS中@import是什么意思?

CSS中@import是什么意思?

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

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

CSS中@import是什么意思?

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

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

@import url('地址');
<link href="地址" 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 错误

推荐教程:《CSS教程

以上是CSS中@import是什么意思?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn