一、什么是@import？
CSS 中的@import命令是用来在一个 CSS 文件中导入另一个 CSS 文件的命令。@import命令的语法如下：
@import url;
其中，url 是要导入的 CSS 文件的 URL 地址。
可以将@import命令添加到CSS文件的开头，也可以将它添加到 CSS 文件的中间。
在 CSS 文件中使用@import命令导入其他 CSS 文件，可以将多个 CSS 文件合并为一个文件，使 CSS 文件的引入更加简洁明了，也可以对不同的 CSS 文件进行分模块开发。
下面通过实例来进一步了解@import命令的用法：
/* main.css */
@import url("header.css"); /* 导入header.css */
@import url("nav.css"); /* 导入nav.css */
@import url("content.css"); /* 导入content.css */
@import url("footer.css"); /* 导入footer.css */
在 main.css 中，我们使用@import命令导入了四个 CSS 文件，即 header.css、nav.css、content.css 和 footer.css。这样我们只需要在HTML文件中引入 main.css 文件就可以了，不需要引入每一个 CSS 文件。
二、与<link>标签的区别
那么，@import命令和<link>标签有什么区别呢？它们两个的区别如下：
1. 加载顺序不同：
使用<link>标签导入 CSS 文件时，所有文件同时加载；而使用@import命令导入 CSS 文件时，主文件优先加载，导入的文件在主文件加载完再加载。
这就导致如果一个主文件中同时导入了多个 CSS 文件，那么在所有 CSS 文件都加载完之前，页面元素可能先出现，并且此时样式可能会发生变化。这种情况称为样式闪烁，会对用户体验造成一定影响。
2. 浏览器兼容性不同：
当一个页面中使用多个<link>标签导入 CSS 文件时，浏览器会基于并行下载这些 CSS 文件，以提高页面加载速度。
但是使用@import命令导入 CSS 文件时，则会导致网页的渲染时间受到较大影响，特别是在旧版本的浏览器中，导入多个 CSS 文件时的响应时间会更长。
另外，@import 命令不能出现在<html>标签中，也不能嵌套在样式中。
综上所述，建议使用<link>标签导入 CSS 文件，不建议使用@import 命令。但如果需要使用@import命令的话，我们应该注意它们两个的不同点，并合理使用。
三、总结
@import命令是一种将多个 CSS 文件合并为一个文件的方式，使 CSS 文件的引入更加简便明了，并且可以进行模块化开发。
与<link>标签相比，@import命令支持延迟加载，更加灵活，但在旧版本的浏览器中响应时间可能会更长，同时也存在样式闪烁的问题。因此，我们应该根据实际情况合理使用。