在页面导入样式时,使用link和@import有以下区别:
-
位置:
link标签可以放置在HTML文档的head或body中的任何位置,而@import规则必须出现在CSS样式表的顶部。 -
加载方式:当浏览器解析到
link标签时,会立即请求并加载该样式表,并在渲染页面时应用样式。而@import是在CSS文件加载完毕后才会开始下载被引入的样式文件,因此可能会造成页面闪烁,加载时间更长。 -
兼容性:
link标签是HTML标准的一部分,几乎所有的浏览器都支持。而@import是CSS2.1提供的语法规则,较旧的浏览器可能不支持它。
下面是一个示例:
<!DOCTYPE html>
<html>
<head><!-- 使用link标签导入样式 --><link rel="stylesheet" href="styles.css"><style>/* 在CSS样式表中使用@import导入样式 */@import url("https://fonts.googleapis.com/css?family=Roboto&display=swap");</style>
</head>
<body><!-- 页面内容 -->
</body>
</html>
在上面的示例中,link标签用于导入外部样式表styles.css,而@import规则用于引入Google Fonts提供的字体样式表。