@import用于引入外部CSS文件，需置于樣式表最前，支持相對(duì)或絕對(duì)路徑；在CSS或style標(biāo)簽中可導(dǎo)入模塊化樣式，但加載時(shí)機(jī)晚于link，影響性能，且不支持JS動(dòng)態(tài)控制；現(xiàn)代項(xiàng)目推薦使用link標(biāo)簽或構(gòu)建工具替代@import以提升加載效率和維護(hù)性。

CSS 的 @import 語法用于在一個(gè)樣式表中引入另一個(gè)外部樣式表文件。它通常用在 CSS 文件或 <style> 標(biāo)簽中，幫助你將多個(gè)樣式文件組織在一起，實(shí)現(xiàn)模塊化管理。

基本語法

@import 后面跟上要引入的 CSS 文件路徑，可以是相對(duì)路徑或絕對(duì)路徑：

注意：@import 必須寫在 CSS 文件的最前面（除 @charset 外），否則無效。

在項(xiàng)目中的使用方式

你可以通過以下幾種方式在項(xiàng)目中使用 @import：

立即學(xué)習(xí)“前端免費(fèi)學(xué)習(xí)筆記（深入）”；

法語寫作助手

法語助手旗下的AI智能寫作平臺(tái)，支持語法、拼寫自動(dòng)糾錯(cuò)，一鍵改寫、潤(rùn)色你的法語作文。

31

查看詳情

• 在 CSS 文件中引入其他 CSS 文件
  比如主樣式文件 main.css 中引入重置樣式和工具類： @import "reset.css";
  @import "variables.css";
  @import "utils.css";
  
  body { margin: 0; font-family: sans-serif; }
• 在 HTML 的 <style> 標(biāo)簽中使用
  在頁面頭部直接引入遠(yuǎn)程或本地樣式： <style>
  @import url("theme.css");
  @import "layout.css";
  h1 { color: #333; }
  </style>

與 link 標(biāo)簽的區(qū)別

• 加載時(shí)機(jī)不同：
  使用 <link> 引入的 CSS 文件會(huì)與頁面同時(shí)開始加載，而 @import 引入的文件是在原始 CSS 加載完成后才去請(qǐng)求，存在延遲。
• 兼容性和性能：
  @import 不利于瀏覽器并行下載，可能影響首屏渲染速度。大型項(xiàng)目推薦使用 <link> 或構(gòu)建工具合并資源。
• 動(dòng)態(tài)操作困難：
  JavaScript 無法直接控制 @import 的加載或移除，而 link 標(biāo)簽可以通過 DOM 操作動(dòng)態(tài)切換。

實(shí)際建議

雖然 @import 語法可用，但在現(xiàn)代前端項(xiàng)目中更推薦：

• 使用構(gòu)建工具（如 Webpack、Vite）進(jìn)行 CSS 模塊化導(dǎo)入；
• 用 <link rel="stylesheet"> 在 HTML 中引入關(guān)鍵樣式；
• 僅在維護(hù)舊項(xiàng)目或簡(jiǎn)單場(chǎng)景下使用 @import。

基本上就這些，合理選擇引入方式能提升項(xiàng)目可維護(hù)性和性能表現(xiàn)。

以上就是css import語法在項(xiàng)目中如何使用的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！