在CSS中，@import规则用于引入其他CSS文件。它类似于HTML中的link标签和JavaScript中的import语句。通过@import规则，我们可以将多个CSS文件组织在一起，实现代码的模块化和重用。
@import规则的语法如下：
@import url('style.css');
@import "style.css";
@import url('http://example.com/style.css');
其中，url()函数用于指定要引入的CSS文件的路径。可以使用相对路径或*路径，也可以直接使用URL。
@import规则通常放在CSS文件的头部，也可以放在其他地方，不影响引入效果。
@import规则的引入是按照顺序进行的，后面引入的CSS文件将覆盖前面引入的CSS文件的样式规则。因此，如果有多个CSS文件中存在相同的选择器，后面引入的CSS文件中的样式规则将优先生效。
@import规则还支持媒体查询，可以在引入规则中添加媒体查询条件，使得引入的CSS文件只在特定的设备或屏幕尺寸下生效。例如：
@import url('style.css') screen and (max-width: 768px);
这个规则表示只在屏幕宽度小于等于768像素时才引入style.css文件。
需要注意的是，@import规则的引入是同步进行的，也就是说，浏览器在解析CSS文件时会停下来，等待引入的CSS文件下载和解析完成后再继续解析下面的内容。这可能会导致页面加载速度变慢，因此在实际开发中，建议尽量减少使用@import规则，而优先使用link标签来引入CSS文件，因为link标签的引入是异步进行的，不会阻塞页面的加载。
总结来说，@import规则是CSS中用于引入其他CSS文件的一种方式。它可以实现代码的模块化和重用，但需要注意引入顺序和加载速度的影响。在实际开发中，应根据具体情况选择使用@import规则还是link标签来引入CSS文件。
QQ客服