Правило CSS @import

Определение и использование

Правило @import позволяет импортировать таблицу стилей в другую таблицу стилей.

Правило @import должно быть расположено в верхнем части документа (но после любого объявления @charset).

Правило @import поддерживает медиа-запросы, поэтому можно позволить импорт, зависящий от среды.

Пример

Пример 1

Импортируется таблица стилей "navigation.css" в текущую таблицу стилей:

@import "navigation.css"; /* Использование строки */

или

@import url("navigation.css"); /* Использование URL */

Пример 2

Импортируется таблица стилей "printstyle.css" только при условии, что среда вывода - печать:

@import "printstyle.css" print;

Попробуйте сами

Пример 3

Импортируется таблица стилей "mobstyle.css" только при условии, что среда вывода - экран и максимальная ширина видоэлемента 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