使用@import可引入多个CSS文件,但需置于样式表顶部;2. 每个文件单独写一条@import语句,支持相对、绝对和根相对路径;3. 可通过媒体查询条件加载,适用于响应式设计;4. 存在性能与渲染阻塞问题,建议用link标签或构建工具替代。

在CSS中,可以通过 @import 语法引入多个外部样式文件。只需要在样式表的开头部分依次写入多个 @import 语句即可。注意这些语句必须放在所有其他CSS规则之前。
Angel工作室企业网站管理系统全DIV+CSS模板,中英文显示,防注入sql关键字过滤,多浏览器适应,完美兼容IE6-IE8,火狐,谷歌等符合标准的浏览器,模板样式集中在一个CSS样式中,内容与样式完全分离,方便网站设计人员开发模板与管理。系统较为安全,以设计防注入,敏感字符屏蔽。新闻,产品,单页独立关键字设计,提高搜索引擎收录。内置IIS测试,双击打启动预览网站 Angel工作室企业网站
基本语法
使用@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文件。









