Справочник HTML & CSS

@import

Подключает другой CSS-файл в текущий.

Синтаксис

@import url("file.css") layer(name);

Параметры

Параметр	Тип	Описание
url	string	Адрес файла: `@import "reset.css";`.
layer()	function	Помещает подключённые стили в каскадный слой.
media	condition	Условие: `@import "print.css" print;`.

Примеры

Подключённая таблица стилей (здесь она встроена прямо в адрес, чтобы пример работал сам по себе):

<style>
  @import url("data:text/css,.note{background:lightyellow;padding:8px;border-left:4px solid gold}");
</style>
 
<p class="note">This style came from an imported style sheet.</p>

Примечания

@import должен стоять перед всеми остальными правилами, кроме @charset и объявлений @layer. Браузер узнаёт о подключённых файлах только после загрузки основного, поэтому страница появляется позже; несколько тегов <link> или сборщик работают быстрее.

См. также

@layer — Группирует стили в каскадные слои: более поздний слой побеждает независимо от специфичности.
url() — Ссылка на файл: картинку, шрифт, таблицу стилей.
<link> — Подключает к странице внешний ресурс: файл стилей, иконку сайта, шрифт.

Вопросы и ответы по теме

Как подключить CSS-файл к странице

В учебнике

Каскадные слои: @layer — Правило @layer — как слои меняют каскад, порядок слоёв, стили вне слоёв, подключение файлов и чужих библиотек в слой.

Спасибо, что читаете!