导入样式 ( @import )

当 CSS 越写越复杂，有时就需要将 CSS 根据特定功能拆分成独立的文件，如果要加载多个 CSS，除了使用 HTML 的方式加载，也可以透过 CSS 的 @import 规则，让 CSS 里加载其他的 CSS，这篇教学会介绍 CSS 的 @import。

快速导览：

• 建立独立的 CSS 文件
• 使用 HTML 的 link 标签导入样式
• 使用 @import 导入样式
• 搭配 @media 判断套用什么样式

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

建立独立的 CSS 文件

首先建立一支独立的 CSS 文件，可参考下方范例，范例中除了有一些 class 名称，也有使用 CSS 变数，目的在于测试样式导入后，是否能正确读取到这些名称和参数。

范例 CSS：文件链接

:root {
  --r: red;
  --b: blue;
  --g: green;
  --o: orange;
  --s20: 20px;
  --s30: 30px;
}
.oxxo-init {
  top: 0;
  left: 0;
  position: relative;
  box-sizing: border-box;
  border: none;
}
.oxxo-test {
  font-size: 50px;
  color: red;
  background: yellow;
}

使用 HTML 的 link 标签导入样式

使用 HTML 的 <link> 标签导入样式是最简单的方法，只需要将外部样式的网址 ( 相对路径或绝对路径 ) 放在标签的 href 属性里，打开网页时就会加载样式，下方范例打开后，会加载 import-demo.css 这支 CSS 文件，并使用当中的 class 和变数。

注意，因为是导入外部样式，因此在尚未加载之前，不会套用相关样式。

线上展示：https://codepen.io/oxxo/pen/QwLEeev

<link rel="stylesheet" href="https://steam.oxxostudio.tw/download/css/import-demo.css">
<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  h2 {margin: 10px;}
  .a {color: var(--r);}
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

使用 @import 导入样式

虽然使用 <link> 导入样式很简单，但每一个网页都得重复撰写好几个 <link>，如果要让网页程序码更干净好管理，也可使用 @import 的方式导入样式，导入方式可以参考下方范例。

注意，因为是导入外部样式，因此在尚未加载之前，不会套用相关样式。

线上展示：https://codepen.io/oxxo/pen/dPbXxxE

<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  @import 'https://steam.oxxostudio.tw/download/css/import-demo.css'; /* 使用引號包覆 CSS 路徑 */
  h2 {margin: 10px;}
  .a {color: var(--r);}
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

虽然使用 @import 和 <link> 非常类似，但因为 <link> 导入的样式表会在加载后渲染整份网页，所以不论摆放的位置都会执行，但 @import 必须要放在 CSS 文件开头，否则不会导入，且如果有使用变数或自订属性，还会发生错误的状况 ( 无法导入导致读取不到 )，下方范例将 @import 放在中间段落，相关样式都不会导入，且有使用到变数的样式属性，还会发生该属性错误而使用默认值的状况。

线上展示：https://codepen.io/oxxo/pen/OPLRLLN

<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  h2 {
    margin: 10px;
    font-size:30px;
    color: orange;
  }
  .a {color: var(--r);}
  @import 'https://steam.oxxostudio.tw/download/css/import-demo.css'; /* 放在這邊不會匯入 */
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

搭配 @media 判断套用什么样式

在“CSS @media 媒体查询 ( Media Queries )”教学中有介绍透过 @media 判断媒体条件，让 <link> 和 @import 加载对应的 CSS，下方列出一些常见的写法：

注意，使用 line 或 @import 之后，样式文件仍然会加载，只是透过 @media 根据条件决定套用哪种样式。

<link rel="stylesheet" href="https://steam.oxxostudio.tw/download/css/import-demo.css" media="(max-width:300px)">
<link rel="stylesheet" href="https://steam.oxxostudio.tw/download/css/import-demo.css" media="screen and (max-width:300px)">

@import 'css url' (max-width:300px);
@import 'css url' screen and (max-width:300px);

下方范例会使用 @import 搭配 @media，让网页在小于 300px 宽度时，导入对应的样式。

线上展示：https://codepen.io/oxxo/pen/QwLKLLv

<!-- HTML 程式碼 -->
<h2 class="a">apple</h2>
<h2 class="b">banana</h2>
<h2 class="oxxo-test">oxxo</h2>
<h2 class="c">orange</h2>
<h2 class="d">peach</h2>

<!-- CSS 程式碼 -->
<style>
  @import 'https://steam.oxxostudio.tw/download/css/import-demo.css' (max-width:300px);
  h2 {
    margin: 10px;
    color: black;
    font-size: 20px;
  }
  .a {color: var(--r);}
  .b {color: var(--g);}
  .c {color: var(--b);}
  .d {font-size: var(--s30);}
</style>

小结

透过 CSS 的 @import，可以将原本复杂的 CSS 进行分类和模组化的动作，让网页的 CSS 更好维护和管理，不过使用时仍然需要注意变数和自订属性名称之类的细节，如果有机会，不妨运用在自己的网页中吧。

意见反馈