@import

@import

导入样式表，css样式

//在html源代码中使用
<style type="text/css">
@import url(/css/typograph.css);
</style>
//在CSS文件中使用
@charset "utf-8";
@import url(/css/typograph.css);
div{}

link

链接样式表，html标签

//只能在html源代码中使用
<link rel="stylesheet" href="css/typograph.css" />

link VS @import

最好使用单一CSS文件取代多个小文件。

• 语法结构不同。link只能在html源代码中使用，@import可放入html中，也可放入css中引入其他css文件
• 加载时间不同。@import比link慢，link在页面加载的同时加载，@import在页面加载完成后才加载
• 下载时间不同。@import会影响下载时间。
  
  • 多个文件会导致服务器发送多个据包，数据包的数量而非内容会影响下载时间。
  • 浏览器只能从同一个域同时下载数量有限的文件，对于老式浏览器，限制为2个，现代浏览器为8个。
• 兼容性问题。@import只有IE5 以上的浏览器才能识别，而link没有兼容问题。
• 权重不同。link的权重高于@import