网站首页 » 前端开发 » div+css » link 和 @import 引入样式表你真的了解吗?
上一篇:
下一篇:

link 和 @import 引入样式表你真的了解吗?

前言

样式表的引入相信你已经不陌生,link 姿势引入你早已用得炉火纯青,虽然这样,但关于 link 和 import 之间的关系或者说区别你又知道多少?这篇文章就是要把它们之间的细微差别给挑出来,让你过目的。

  • link 是 html 中的语法,而 import 是样式表中的语法,两者虽然作用一样,但使用的场景有所不同。
  • 还有一个就是加载时机的不同,如果 import 是写在样式表中的,那么 impot 命令就会等到父样式表加载完后才会去请求加载。
  • 兼容性的差异,link 没有兼容性问题,而 import 是 css2.1 才开始有的语法。所以对于一些老古董浏览器就得慎用了,但当下感觉这个兼容性已经不是什么大问题了。

如果仅仅像网上千篇一律地这么写,我感觉这篇文章也没什么必要存在了,下面我们来点更细微的研究,关于 link 和 import 的加载问题。

1、通过 import 引入样式表,命令要写在文件的最顶部,import 前不可以有样式代码的,比如下面:

body{
    background: red
}
@import url(index-import.css);

这样 imoprt 中的样式表会引入失败。但是方法还是有的,换个姿势就可以。

2、在 .html 文件中分别引入样式表就可以了。

<link rel="stylesheet" href="index.css">
<style>
    @import url(index-import.css);
</style>

这种写法,就没有引入顺序的说法了,不管是link 在前 import 在后,还是 import 在前,link 在后都没问题,但依然遵守后者覆盖前者的规则。

3、在 index.css 【1】中 import 进来的样式表(index-import.css)【2】会在 index.css 下载完之后才会去请求并下载,并且【1】到【2】之间还有一段空白区,
如果 index-import.css 中有引入图片的,那么图片会在 index-import.css 加载完成后才会去请求,
如果 index.css 中的样式代码很多,那么阻塞好长一段时间才会去请求 index-import.css,请看图:

link 和 import 引入样式表你真的了解吗?

4、如果在 index.css 中 通过 import 引入其它样式表,那么请求数就会对应的增加,因为每一个 import 的样式表都需要发送一次请求。

5、但是放在 .html 文件中引入时,情况就有所不同了。此时不管是 link 引入还是 import 引入都会同时请求并加载

<link rel="stylesheet" href="index.css">
<style>
    @import url(index-import.css);
</style>

图示如下:

link 和 import 引入样式表你真的了解吗?

所以 import 的加载不会像网上大多说人说的那样总是在父样式表加载完之后才会请求下载,还得看你在哪里写 @import 语句,比如:在.html 中写的话,它跟 link 的是同时请求并加载的。

备注

以上是在谷歌浏览器中进行测试的。

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/link-import-usage/

评论1
  1. essaypinglun 2018年5月10日 at pm8:11 回复

    收藏了,赞赞。

Leave a Reply

Your email address will not be published. Required fields are marked *

评论 END