CSS中@import导入公共样式方法详解

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《CSS中使用@import规则可以实现复用公共样式，具体方法如下：创建公共样式文件 创建一个单独的CSS文件，例如 common.css，并将所有需要复用的样式写入其中。/* common.css */ .btn { padding: 10px 20px; background-color: #007bff; color: white; border: none; border-radius: 5px; } .container { max-width: 1200px; margin: 0 auto; }在其他CSS文件中导入公共样式 使用 @import 规则将 common.css 导入到其他CSS文件中。/* style.css */ @import url('common.css'); body { font-family: Arial, sans-serif; }在HTML中引入主CSS文件 在HTML文件中引入包含 @import 的CSS文件。注意事项：@import 必须位于CSS文件的顶部，且不能与其他规则混用。适用于小型项目或需要集中管理样式的场景。对于大型项目，建议使用CSS预处理器（如》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

使用@import可在CSS中引入公共样式文件实现复用，适合小项目或静态页面；2. 需在文件顶部通过@import url('common.css')引入如变量、重置样式等通用样式；3. HTML中引用主样式文件后浏览器自动加载被导入的公共文件；4. 注意@import必须置于文件最前且可能增加请求开销，现代项目更推荐构建工具或预处理器管理样式。

使用 @import 可以在 CSS 文件中引入其他样式文件，实现公共样式的复用。这种方式适合将通用样式（如重置样式、颜色变量、字体设置等）提取出来，在多个 CSS 文件中共享。

1. 创建公共样式文件

/* common.css */
:root {
  --primary-color: #007bff;
  --font-size-base: 16px;
}
<p>body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}</p><p>.btn {
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</p>

2. 在其他CSS文件中导入公共样式

/* page.css */
@import url('common.css');
<p>.hero {
background-color: var(--primary-color);
padding: 20px;
color: white;
}
</p>

3. 在HTML中引用主样式文件

<link rel="stylesheet" href="page.css">

这样 page.css 会加载，同时触发加载 common.css，所有公共样式即可生效。

注意事项与建议

• @import 必须写在文件的最前面，否则无效
• 多次导入可能影响性能，因为每个 @import 都会发起额外请求（尤其是未合并时）
• 现代项目更推荐使用构建工具（如 Webpack、Vite）或预处理器（如 Sass @use / @include）来管理样式复用
• 支持相对路径、绝对路径或URL，例如：@import 'themes/dark.css';

基本上就这些。@import 实现复用简单直接，适合小项目或静态页面，但要注意加载顺序和性能影响。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~