@import

Оновлено: 09.01.2023

@import

  • Вміст

Правило @import дає змогу імпортувати вміст CSS-файлу в поточну таблицю стилів. @import не дозволяється вставляти після будь-яких оголошень, крім @charset або іншого @import.

Синтаксис 

@import url("ім'я файлу") [типи носителів];
@import "имя файла" [типи носителів];

Як тип носія виступають різні пристрої, наприклад, принтер, КПК, монітор тощо. У табл. 1 перелічено деякі з них.

Табл. 1. Типи носителів та їх опис
Тип Опис
all Всі типи. Це значення використовується за замовчуванням.
print Друкуючі пристрої на кшталт принтера.
screen Екран монітору.

Використання типів носіїв спільно з імпортом файлу дає можливість вказувати стиль тільки для певних пристроїв.

Значення

Як значення використовується шлях до стильового файлу, який вказується всередині необов'язкової конструкції url(). Шлях до файлу при цьому можна писати як у лапках (подвійних або одинарних), так і без них.

Приклад

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>Import style</title>
   <style>
     @import "/style/main.css" screen; /* Style for displaying the result on the monitor */
     @import "/style/palm.css" handheld, print; /* Print style */
   </style>
  </head>
  <body>
   <p>...</p>
  </body>
</html>

Примітка

Браузер Internet Explorer до версії 7 включно не підтримує типи носіїв під час імпорту стильового файлу. Ба більше, під час додавання типу носія стильовий файл взагалі не завантажується.

Браузери

@import

Переглянути сумісність з Can I use?

@import