在css中如何使用@import引入样式
@import用于CSS中引入其他样式表，需置于文件开头，支持带媒体查询的条件加载，但因性能问题和渲染延迟，建议优先使用link标签或构建工具替代。
在CSS中，@import 是一种用于从一个样式表文件中引入另一个样式表的方法。它通常用于将多个CSS文件合并到一个主样式表中，便于维护和组织代码。
基本语法
@import 的基本写法如下：
@import "styles.css";也可以使用URL形式（虽然不强制，但部分情况下推荐）：
@import url("styles.css");引入条件：媒体查询
你可以指定只在特定设备或屏幕条件下加载某个样式文件。例如：
@import url("print.css") print;@import url("screen.css") screen and (max-width: 1200px);
这表示 print.css 只在打印时加载，而 screen.css 仅在屏幕显示且宽度不超过1200px时加载。
使用位置限制
@import 必须写在CSS文件的最前面，任何其他规则（如 body、.class 等）之前。否则将不起作用。
错误示例：
body {background: white;
}
@import "other.css"; /* 无效：出现在规则之后 */
正确写法
：
@import "layout.css";
body {
font-size: 16px;
}
与link标签的对比
虽然 @import 可以引入样式，但它有一些缺点：
- 必须在CSS内部使用，不能像 那样在HTML中直接引用
- 会延迟页面渲染，因为被导入的文件是在主样式表解析后才加载
- 不利于性能优化，现代开发中更推荐使用 link 标签或构建工具（如Webpack）来合并资源
HTML中使用link更高效：
基本上就这些。虽然 @import 能用，但在实际项目中建议谨慎使用，尤其对性能敏感的场景。优先考虑模块化打包或直接link引入。不复杂但容易忽略顺序和性能影响。
