CSS之link 标签与@import 的异同
在CSS中,有两种方式可以在.html文件中引入外部样式表。
- link 标签
常见方式为 :
<link rel = "stylesheet" href = "main.css">
- @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请求也是提高浏览器性能的一种重要方式。