@import 和 link 的区别

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

1、<style></style>

2、link

href="my.css" type="text/css" rel="stylesheet" />

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代码 

media="print" href="/css/styles.css" type="text/css" rel="stylesheet" /> 
@import代码 

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