页面引入css用link和import的区别

假设有一个css文件a.css,文件里的内容如下：

p {
   font-size: 18px;
}

现在分别使用两种方式引入a.css：

1.使用html的link标签

<link  rel="stylesheet" type="text/css" href="a.css">

2.使用import

<style type="text/css">
  @import url(a.css);
</style>

3.我们再看一下平常使用的内嵌样式：

<style>
   p {
       font-size: 18px;    
   }
</style>

很明显第二种和第三种方式是形如<style>css语句</style>的，也就是说其实第二种方式中的@import url(a.css)是css的语句而非html的语句。

所以我们可以这样在b.css文件中使用import语句来引入a.css的内容：

@import url(a.css);

这样b.css就把另外一个文件a.css的内容引入到了b.css中。

其实总结就是一句话：link是html的一个标签，而import是css的语句，他们老大不同。

link与@import的区别：加载顺序不一样，link会在页面显示之前全部加载完成，而@import是读取完文件再加载，这也就导致了他们显示上的区别,使用@import会出现闪烁，原因就是先显示无css样式的页面，加载了import的样式又会重新排版，所以导致闪烁。而link是加载完才显示，所以不会出现闪烁的问题。