CSS 样式使用link和@import有什么区别
在页面导入样式时，使用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提供的字体样式表。