CSS之link 标签与@import 的异同

CSS之link 标签与@import 的异同

在CSS中，有两种方式可以在.html文件中引入外部样式表。

1. link 标签
   常见方式为 :

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

2. @import 指令

@import url(../main.css)

两种方式的异同

相同点

• 都可以在.html文件中用来导入外部样式表。
• 均可以指定导入的样式表应用于何种媒体

<link rel = "stylesheet" href = "main.css" media  = "screen, print">
@import url(sheet.css) screen;

不同点

• @import 是一种规则，因此其也可以用于在.css文件中导入另一个css样式表，而link 是标签，只能在.html中使用。

注意：@import指令写在样式表的开头。CSS要求样式表中的@ import指令必须在所有样式规则前面。遵守规范的用户代理会忽略放在样式规则（如body{ width:200px})后面的@import指令。

• @import 指令导入的样式表每个都会被应用，无法指定候选样式表。

• 页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;

• 使用@import可能会导致性能问题。

在链接外部样式表时，保证链接的文件数量最少至关重要。因为，每个文件都需要单独发送一次HTTP请求。请求到之后，浏览器需要花费一定的时间来下载、应用等。两个文件比一个包含相同的CSS规则的文件在浏览器和服务器中传递的数据更多。因此，减少HTTP请求也是提高浏览器性能的一种重要方式。