CSS правило @import

CSS правило @import дает возможность импортировать правила стилей из других таблиц стилей и поддерживать медиа-запросы. После ключевого слова @import должен быть URI-адрес таблицы стилей. Также допустимо использование строк (string). Она должна быть на верхней части документа, но после правила @charset.

Правило @import не может быть использовано внутри правил условной группы.
Значение по умолчанию -
Применяется -
Наследуется Нет
Анимируемое Нет
Версия CSS2
DOM синтаксис object.style.@import = "url";

Синтаксис

@import: url | string list-of-mediaqueries | initial | inherit;

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      @import url('https://fonts.googleapis.com/css?family=Coiny');
      @import url('https://fonts.googleapis.com/css?family=Lobster');
      .p1 {
      font-family: 'Coiny', cursive;
      }
      .p2 {
      font-family: 'Lobster', cursive;
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства @import</h2>
    <p class="p1">Правило @import дает возможность импортировать правила стилей из других таблиц стилей.</p>
    <p class="p2">Правило @import также поддерживает медиа-запросы.</p>
  </body>
</html>

Значения

Значение Описание
url <url> или <string>, которые показывают адрес ресурса для импорта. Url может быть абсолютным или относительным.
string list-of-mediaqueries Список медиа-запросов, которые разделены запятыми.
initial Устанавливает свойство в значение по умолчанию.
inherit Значение элемента наследуется от родительского элемента.

Поддержка браузера

chrome edge firefox safari opera
1.0+

Практикуйте свои знания

Что делает правило @import в CSS?
Считаете ли это полезным?