如何通过css@import引入多个样式文件
使用@import可引入多个CSS文件，但需置于样式表顶部；2. 每个文件单独写一条@import语句，支持相对、绝对和根相对路径；3. 可通过媒体查询条件加载，适用于响应式设计；4. 存在性能与渲染阻塞问题，建议用link标签或构建工具替代。
在CSS中，可以通过 @import 语法引入多个外部样式文件。只需要在样式表的开头部分依次写入多个 @import 语句即可。注意这些语句必须放在所有其他CSS规则之前。
基本语法
使用@import 引入多个文件时，每个文件都需要单独写一条 @import 语句：
@import url('reset.css');
@import url('layout.css');
@import url('theme.css');
支持的路径格式
url() 中可以使用以下几种路径形式：
- 相对路径：如
'./styles/reset.css' - 绝对路径：如
'https://example.com/css/layout.css' - 根相对路径：如
'/css/theme.css'
条件引入（可选媒体查询）
还可以为引入的样式文件添加媒体条件，只在特定设备或屏幕尺寸下加载：
@import url('print.css') print;
@import url('mobile.css') screen and (max-width: 768px);
注意事项
虽然@import 可以引入多个文件，但要注意以下几点：
- 性能影响：每个
@import都会发起一次HTTP请求，过多嵌套或链式导入可能拖慢页面渲染 - 阻塞渲染：被导入的样式文件会阻塞页面渲染，建议将关键样式内联或使用
标签替代 - 必须置于顶部：所有
@import必须出现在样式表中的任何其他规则之前，否则无效
@import 能帮助组织模块化样式，但在现代前端开发中，更推荐使用构建工具（如Webpack、Sass等）来合并和管理CSS文件。
