在CSS中，有两种方式可以在.html文件中引入外部样式表。
- link 标签
常见方式为 :
<link rel = "stylesheet" href = "main.css">
- @import 指令
@import url(../main.css)
两种方式的异同
相同点
都可以在.html文件中用来导入外部样式表。
不同点
- @import 是一种规则，因此其也可以用于在.css文件中导入另一个css样式表，而link 是标签，只能在.html中使用。
- 通过在link标签中添加media属性，可以指定样式表在哪些设备上应用。
<link rel = "stylesheet" href = "main.css" media = "screen, print">
这代表main.css中的样式只会在屏幕显示和打印上应用。
-
页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
-
使用@import可能会导致性能问题。
在链接外部样式表时，保证链接的文件数量最少至关重要。因为，每个文件都需要单独发送一次HTTP请求。请求到之后，浏览器需要花费一定的时间来下载、应用等。两个文件比一个包含相同的CSS规则的文件在浏览器和服务器中传递的数据更多。因此，减少HTTP请求也是提高浏览器性能的一种重要方式。
网友评论