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	Значение элемента наследуется от родительского элемента.