页面导入样式时，使用 link 和 @import 区别-阿里云开发者社区

页面导入样式时，使用 link 和 @import 区别

2024-10-09 48

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

本文涉及的产品

云原生数据库 PolarDB 分布式版，标准版 2核8GB

云原生数据库 PolarDB PostgreSQL 版，标准版 2核4GB 50GB

云原生数据库 PolarDB MySQL 版，通用型 2核4GB 50GB

简介： 在页面导入样式时，`<link>` 标签和 `@import` 语句有以下几点区别

在页面导入样式时，使用 link 标签和 @import 语句有以下几个区别：

用法：
- <link> 标签：直接在 HTML 文档的 <head> 部分使用，例如：
```
<link rel="stylesheet" type="text/css" href="styles.css">
```
- @import：在 CSS 文件中使用，例如：
```
@import url('styles.css');
```
  或者：
```
@import 'styles.css';
```
加载顺序：
- 使用 <link> 标签，可以并行加载多个样式，而使用 @import 会导致样式表按顺序加载，第一个 @import 的样式需要加载完成后，后面的样式才能开始加载。这可能会导致页面加载变慢。
适用范围：
- <link> 是标准的 HTML 标签，可以在 HTML 页面中直接使用，适用于所有网页。
- @import 是 CSS 规则，只能用于 CSS 文件中，不能直接在 HTML 中使用。
浏览器兼容性：
- <link> 标签支持所有现代浏览器，使用广泛。
- @import 虽然也被广泛支持，但在某些旧版浏览器中可能存在问题，尤其是在 CSS 文件的加载顺序上，可能不如 <link> 标签稳定。
CSS 优先级：
- 在优先级方面，<link> 和 @import 导入的样式表具有相同的优先级，但由于加载顺序可能不同，可以导致样式的应用有所区别。

总结来说，通常推荐使用 <link> 标签来导入样式，因为它更高效且加载顺序不影响样式的应用。如果有需要在 CSS 中引入其他样式文件的情况，则可以考虑使用 @import，但要注意其对性能的影响。

页面导入样式时，使用 link 和 @import 区别