@import 和 link 的区别

在页面里有三种引用方式：

1、<style></style>

2、link

3、@import

第一种是直接在html页面上进行css书写，而第二种和第三种是采用外部引用样式单独提取文件。

@import  
指定导入的外部样式表及目标设备类型。  
其实link和@import的最根本区别就是，link是一个html的一个标签，而@import是css的一个标签,  link除了调用css外还可以有其他作用譬如声明页面链接属性，声明目录，rss等等，而@import就只能调用css。如果单独从外部引用css来说，他们的作用是基本一样，只不过上面的老大不一样而已。

1)我要用javascript进行样式选择；  
这个时候就要用link,因为link是html元素，可用javascript去控制dom元素最后达到改变样式的效果。  

我们先来看看link里面个个属性都是表达了什么意思：  
[1]rel:用来声明链接对象的作用或者类型。  
譬如上面的的代码：”stylesheet”表示链接一个默认的css,而”alternate stylesheet”折表示备选的css  
[2]href:这个就不用我说了吧，引用css的文件路径。  
[3]tyle:文件类型  
[4]media:应用的设备，”screen”是说明应用在屏幕上。  
[5]title:是css的名称。  
这段代码中一共有5个css,第一个是基本样式，而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。  

我要在应用打印样式；  
打印样式顾名思义就是打印页面时候的样式。  
这个样式在普通浏览下是没有效果的，只有在打印的时候生效。  
如果要为页面单独引用打印样式的话，link和@import都可以的。  
link代码  

  
@import代码  

  
另外对于css来说还有一种方式@media：  
@media print {  
@import “print.css”  
}  
用@media先制定设备为 print,然后再用@impor链接  
3）我要引用多个样式；  
如果要在一个页面上引用多个样式组合产生效果的话，永link和@import也是都可以的。  
link代码
  
  
@import代码
  
不过个人觉得，用@import引用多文件的时候更加清晰一些另外对于多样式还有一种link于@import的组合用法。  
先用link引用一个css文件  
  
然后在这个css文件里面再引用。  
  
这样做的好处是，如果你一个站点所有页面引用的样式都是一样的，而有又多个css，如果你每个页面都加4,5个一样的css样式，却是浪费代码和精力，所以莫不如这样做，所有一个页面都引用一个css，然后一个css在引用多个css，方便。