前端开发：CSS中@import指令详解

三掌柜
1,483 阅读5分钟

我正在参加「掘金·启航计划」

前言

在前端开发过程中，关于CSS的使用也是非常的，尤其是样式相关的设置等操作。作为前端开发者关于@import指令都会有所了解，尤其是在导入CSS样式的时候会用到，但是刚入行不久的前端开发者对应@import指令会有所陌生。那么本文就来分享一下关于@import指令的使用详情，总结一下，方便后期查阅使用。

CSS文件引入方式

众所周知，CSS文件引入的方式有两种：第一种就是通过HTML中使用link标签，第二种就是通过使用CSS中的@import指令。下面举一个示例，复制内容到剪贴板，具体方式如下所示。

1、HTML中使用link标签

<link rel="stylesheet" href="style.css" />

2、使用CSS中的@import指令

@import "style.css";  

@import指令

首先来看一下@import指令的含义：@import导入指令其实是CSS提供的一个实用命令，主要功能是根据路径导入一个样式表的文件，且能够指定样式表所服务的设备类型，即可以将别的样式表导入当前样式表中，使样式表文件不必写在同一个文件当中。

1、属性定义及使用说明

CSS的@import是用于从其他样式表导入样式规则。需要注意的是：

  • @import 规则必须在 CSS 文档的头部，但可以在 @charset 规则的后面；
  • @import 规则不是一个嵌套语句，@import不能在条件组的规则中使用；
  • @import 规则支持媒体查询，所以可以根据不同屏幕尺寸导入不同的样式文件。

2、@import指令的语法

@import url|string list-of-mediaqueries;

3、@import指令的属性值

image.png

4、@import指令的实例

导入"theme.css"样式到当前到样式表中，具体如下所示：

@import "theme.css"; // 使用字符串

或者

@import url("theme.css"); // 使用 url 地址

5、@import指令的用法

关于@import指令的用法，具体写法如下所示：

@import url(“public.css”)； //释义：通过该命令，能够将public.css导入当前的样式表文件中

除了上面的用法，@import指令还可以给导入的样式表指定一个设备类型，标明当前的样式是做什么用途的，比如：

import url(“print.css”) print；//释义：通过该命令，可导入一个print.css样式表文件，且该样式表用于打印机设备的打印样式。

6、@import指令的注意点

@import指令的注意点，具体如下所示：

  • 在使用@import语句引入样式时，在一行样式的结尾需要加分号;
  • 在html文档中使用@import时，需要在style标签里面；
  • 不建议使用@import语句，因为@import引入的 CSS 将在页面加载完毕后才被加载。

@import指令和link的区别

上文已经介绍了@import指令和link的对比使用，这里再来做一下二者的对比，具体如下所示：

1、可以知道link属于HTML标签，但@import 是CSS提供的一种方式。link标签不仅可以加载CSS，还可以定义RSS、定义rel连接属性等；但是@import 只能加载CSS。

2、兼容性的差别。@import是CSS2.1提出的，所以在此之前的旧浏览器不支持，即@import只能在IE5以上才能被识别；但是link标签不存上述的问题。

3、在使用JS控制DOM去改变样式的时候，只能用link标签，不能使用@import指令原因是DOM不可控的。

拓展：CSS中的!import

虽然上面讲的是关于@import指令的用法，但是!import也是关于CSS的使用的另一个知识点，虽然它们比较像，但是用法不同，就拿来放一起做对比分享。

1、CSS中的!import的用法

一般情况下在CSS中的样式后面加上 “!import ”，就是为了提升该样式规则的应用优先级。

2、CSS中的!import的语法

选择器{ 样式:值 !important;}

注意：虽然!import为使用者提供了一个增加样式权重的方法，但是应当注意!import对整条样式的声明，包括该样式的属性和属性值。

3、CSS中的!import的使用示例

CSS中的!import的使用示例，具体如下所示：


<div id="body">
<a>import</a>
</div>
<style type="text/css">
a {
    color: red !important;
}
#body a{
color: black;
}
</style>

上面的代码段中，如果不加import特性，则超链接的颜色为黑色，但是加上import之后优先级提高了，会显示红色。

注意：

  •  若!import被用于一个简写的样式属性，那么该简写的样式属性所代表的子属性都会被作用上!import；
  •  关键字!import必需放在一行样式的末尾且要放在该行分号之前，否则就没有效果；
  •  在某些特殊情况下，需要在一个代码块中声明两个同样的属性，那么需要把!import加在第一个属性的后面，因为会让所有浏览器中第一个属性的权重更大。

最后

通过本文关于前端开发中的CSS中import指令的详细介绍，在实际的前端开发工作中还是要知道了解的，所以作为前端开发者来要掌握它相关的内容，尤其是从事前端开发不久的开发者来说尤为重要，是一篇值得阅读的文章，重要性就不在赘述。欢迎关注，一起交流，共同进步。

avatar
文章
阅读
粉丝