@import

Обновлено: 09.01.2023

@import

  • Содержание

Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

Синтаксис 

@import url("имя файла") [типы носителей];
@import "имя файла" [типы носителей];

В качестве типа носителя выступают различные устройства, например, принтер, КПК, монитор и др. В табл. 1 перечислены некоторые из них.

Табл. 1. Типы носителей и их описание
Тип Описание
all Все типы. Это значение используется по умолчанию.
print Печатающие устройства вроде принтера.
screen Экран монитора.

Использование типов носителей совместно с импортом файла дает возможность указывать стиль только для определенных устройств.

Значения

В качестве значения используется путь к стилевому файлу, который указывается внутри необязательной конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.

Пример

<!DOCTYPE html>
<html>
  <head>
   <metacharset="utf-8">
   <title>Import style</title>
   <style>
     @import "/style/main.css" screen; /* Style for displaying the result on the monitor */
     @import "/style/palm.css" handheld, print; /* Print style */
   </style>
  </head>
  <body>
   <p>...</p>
  </body>
</html>

Примечание

Браузер Internet Explorer до версии 7 включительно не поддерживает типы носителей при импорте стилевого файла. Более того, при добавлении типа носителя стилевой файл вообще не загружается.

Браузеры

@import

Посмотреть совместимость на Can I use?

@import