@import

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 8.0+ 2.0+ 4.0+ 2.0+ 1.0+ 1.0+ 1.0+

Краткая информация

Значение по умолчанию all
Ссылка на спецификацию http://www.w3.org/TR/CSS21/cascade.html#at-import

Версии CSS

CSS 1 CSS 2 CSS 2.1 CSS 3

Описание

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

Синтаксис

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

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

Табл. 1. Типы носителей и их описание
Тип Описание
all
Все типы. Это значение используется по умолчанию.
aural Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.
braille Устройства, основанные на системе Брайля, которые предназначены для слепых людей.
handheld Наладонные компьютеры и аналогичные им аппараты.
print Печатающие устройства вроде принтера.
projection Проектор.
screen Экран монитора.
tv Телевизор.

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

Значения

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

Пример

HTML5CSS2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Импорт стиля</title>
  <style>
    @import "/style/main.css" screen; /* Стиль для вывода результата на монитор */
    @import "/style/palm.css" handheld, print; /* Стиль для печати */
  </style>
 </head>
 <body>
  <p>...</p>
 </body>
</html>

Браузеры

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.