Правило @import в CSS
Определение и использование
Правило @import позволяет импортировать таблицы стилей в другую таблицу стилей.
Правило @import должно располагаться в верхнем разделе документа (но после любого объявления @charset).
Правило @import поддерживает медиа-запросы и позволяет импортировать таблицы стилей в зависимости от медиа-типа.
Пример
Пример 1
Импортирует таблицу стилей "navigation.css" в текущую таблицу стилей:
@import "navigation.css"; /* Использование строки */
или
@import url("navigation.css"); /* Использование URL */
Пример 2
Импортирует таблицу стилей "printstyle.css", только когда медиа-тип equals print:
@import "printstyle.css" print;
Пример 3
Импортирует таблицу стилей "mobstyle.css", только когда медиа-тип equals screen и максимальная ширина окна equals 768 пикселей:
@import "mobstyle.css" screen and (max-width: 768px);
Грамматика CSS
@import url|string list-of-mediaqueries;
Значение свойства
Значение | Описание |
---|---|
url|string | URL или строка, представляющая положение ресурса, который нужно импортировать. URL может быть абсолютным или относительным. |
list-of-mediaqueries | Список медиа-запросов, разделенных запятыми, определяет, при каких условиях применяются правила CSS, вводимые через URL. |
Поддержка браузерами
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот свойство.
Chrome | IE / Edge | Firefox | Safari | Opera |
---|---|---|---|---|
1.0 | 5.5 | 1.0 | 1.0 | 3.5 |