CSS引入的方式,link和@improt的相同和不同之处对比介绍

工作当中引入CSS是不可避免的工作，那最常用的link和import区别又是什么呢?

1.link的使用方式如下：

<link href="index.css" rel="stylesheet">  

2.import的使用方式如下：

@import 'style.css' 
@import "style.css" 
@import url(style.css) 
@import url('style.css') 
@import url("style.css") 

相同之处：

都可以引用CSS样式文件

不同之处：

1.引用的方式不同

link(外部引用):

@import(导入式):@import url(xxx.css);

2.放置的位置不同

link一般放在head标签中

@import必须放在style标签中

3.加载方式不同

link会和dom结构一同加载渲染

@import只能能dom结构加载完成以后才能渲染页面

4.当使用 Javascript 控制 DOM 去改变样式的时候，只能使用 link 方式，因为 @import 眼里只有 CSS ，不是 DOM 可以控制的;

5.兼容性不同

link是在xhtml的标签，兼容IE各个版本

@import是css2.1时提出来的，只能在IE6以上进行解析。

6.加载内容不同

link可以加载除了css文件外，还可以加载其他文件：

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />

@import只能加载css文件

@improt 引发的问题：

导致css无法并行下载，因为使用@import引用的文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。 在页面所有css下载并解析完成后才会开始渲染页面

因此。不建议使用@improt方式引入