在css中如何使用@import引入样式-css教程-PHP中文网

在css中如何使用@import引入样式

P粉602998670

发布： 2025-10-26 09:33:02

原创

333人浏览过

@import用于CSS中引入其他样式表，需置于文件开头，支持带媒体查询的条件加载，但因性能问题和渲染延迟，建议优先使用link标签或构建工具替代。

在css中如何使用@import引入样式

在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 "reset.css";
@import "layout.css";

body {
font-size: 16px;
}

虽然 @import 可以引入样式，但它有一些缺点：

HTML中使用link更高效：

基本上就这些。虽然 @import 能用，但在实际项目中建议谨慎使用，尤其对性能敏感的场景。优先考虑模块化打包或直接link引入。不复杂但容易忽略顺序和性能影响。

以上就是在css中如何使用@import引入样式的详细内容，更多请关注php中文网其它相关文章！

大家都在看：