CSS - @import 規則

CSS 的@import規則用於從其他有效的樣式表中包含樣式規則。此規則必須放置在樣式表的開頭，在所有其他@規則（除了@charset和@layer）和樣式宣告之前；否則它將被忽略。

語法

@import url | string  list-of-media-queries | layer-name;

屬性值

值	描述
url \| string	它可以是<string>、<url>或<url()>函式，用於指定其位置。URL 可以是絕對的或相對的。
list-of-media-queries	這些查詢根據媒體型別定義了應用連結 URL 中 CSS 規則的條件。它由一系列用逗號分隔的媒體查詢組成。
layer-name	它表示將連結資源內容匯入到的級聯層的名稱。

CSS @import 規則的使用

以下程式碼片段顯示瞭如何使用@import屬性。

@import 規則與字串

@import "main.css";
@import "text.css";

@import 規則與 URL

@import url("chrome://sport/run/");

@import 規則與媒體查詢

//import the css properties of sensor if media is print 
@import url("sensor.css") print;

//import the css properties of builder if  media is print or screen
@import url("builder.css") print, screen;

//import the css properties of general if media is screen
@import "general.css" screen;
@import url("imgpotrait.css") screen and (orientation: potrait);

@import 規則與層

// import the content of book.css into the pages layer 
@import "book.css" layer(pages);

// import the content of main.css and follow.css into an unnamed cascade layer  
@import "main.css" layer();
@import "follow.css" layer;

CSS @import 規則的示例

以下示例說明了如何使用@import規則。

@import 規則用於匯入外部字型

在此示例中，@import規則用於將來自 Google Fonts 的外部字型樣式表匯入到 CSS 檔案中。

示例

  
<!DOCTYPE html>
<html>
<head>
<style>
   @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
   body {
      font-family: 'Roboto', sans-serif;
      background-color: #f0f0f0;
      color: #333;
      margin: 0;
      padding: 0;
   }
   .container {
      width: 80%;
      margin: 0 auto;
      padding: 25px;
      background-color: #ffffff;
      border-radius: 15px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   h1 {
      font-family: 'Arial', sans-serif;
      color: #007bff;
   }
   p {
      font-family: 'Georgia', serif;
      font-size: 20px;
   }
   .custom-text {
      font-family: 'Courier New', monospace;
      font-size: 16px;
      font-weight: bold;
      color: #13cf45;
   }
</style>
</head>
<body>
   <div class="container">
      <h2>
         CSS @import Rule
      </h2>
      <h1>
         Greetings!
      </h1>
      <p>
         This is an example to demonstrate
         the CSS @import rule.
      </p>
      <div class="custom-text">
         Custom Font Style for this text.
      </div>
   </div>
</body>
</html>

@import 規則用於從外部 CSS 匯入

在以下示例中，@import規則用於從名為imported-styles.css的外部 CSS 檔案中匯入樣式。

示例

 
<!DOCTYPE html>
<html>
<head>
<style>
   @import url('imported-styles.css');
      body {
      font-family: Arial, sans-serif;
      background-color: #f0f0f0;
      margin: 0;
      padding: 0;
   }
   .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 5px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   }
   h1 {
      color: #007bff;
   }
   p {
      color: #333;
   }
</style>
</head>
<body>
   <div class="container">
      <h2>
         CSS @import Rule
      </h2>
      <h1>
         Welcome to Tutorialspoint
      </h1>
      <p>
         This is an example to demonstrate
         the CSS @import rule.
      </p>
   </div>
</body>
</html>

支援的瀏覽器

屬性
@import	1.0	5.5	1.0	1.0	3.5

css_properties_reference.htm

列印頁面