css@import

在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文件。