Директива @import

Теперь мы займемся тем, что находится внутри тега style. Для начала у нас есть аналог элемента link – директива @import:

@import url(sheet2.css);

Так же как и link, @import может указывать веб-броузеру на необходимость загрузки внешней таблицы стилей и использования ее стилей при формировании представления HTMLдокумента. Единственное основное отличие заключается в синтаксисе и размещении команды. Как видите, @import находится в контейнере style. Она должна располагаться перед всеми остальными правилами CSS, иначе она вообще не будет работать. Рассмотрим такой пример:



В документе может быть несколько директив выражения @import, как и тегов link. Однако, в отличие от link, все указанные в директивах @import таблицы стилей будут загружены и использованы; с помощью @import невозможно назначить альтернативные таблицы стилей. Итак, исходя из следующей разметки:

@import url(sheet2.css);
@import url(blueworld.css);
@import url(zany.css);

все три внешние таблицы стилей будут загружены, и все их правила будут использоваться в визуальном представлении документа.


Многие старые броузеры не могут обрабатывать разнообразные формы директивы @import. Фактически это может применяться специально для «сокрытия» стилей от этих броузеров. Более подробную информацию можно найти по адресу

http://w3deve%lopment.de/css/hide_ css_from_browsers.

Как и в случае элемента link, можно ограничить применение импортируемой таблицы стилей одним или несколькими устройствами, перечислив их после URL таблицы стилей:

@import url(sheet2.css) all;
@import url(blueworld.css) screen;
@import url(zany.css) projection, print;

Директива @import крайне полезна для переноса стилей между внешними таблицами стилей. Поскольку внешние таблицы стилей не могут содержать никакой разметки документа, элемент link применить нельзя, а директиву @import можно. Следовательно, можно себе представить внешнюю таблицу стилей такого содержания:

@import url(http://example.org/library/layout.css);
@import url(basic-text.css);
@import url(printer.css) print;
body {color: red;}
h1 {color: blue;}

Ну, может быть, не именно эти стили, но идея ясна. Обратите внимание на использование в примере как абсолютного, так и относительных URL.


Можно применять любую форму URL, так же как и в link. Также заметьте, что директивы @import находятся в начале таблицы стилей, как и в примере нашего документа. CSS требует, чтобы директива @import располагалась в таблице стилей раньше всех остальных правил. Директива @import, расположенная после правил (например, после body {color: red;}), будет проигнорирована соответствующими агентами пользователя.

Internet Explorer для Windows не игнорирует директивы @import, даже если они следуют после остальных правил. Поскольку другие броузеры игнорируют неверно размещенные директивы @import, очень легко ошибиться – поставить директивы @import не туда, куда надо, и таким образом изменить представление в других броузерах.

Оцените статью: (0 голосов)
0 5 0

Статьи из раздела CSS на эту тему:
Альтернативные таблицы стилей
Атрибуты
Богатство стилей
Веб спускается с Олимпа
Действительные правила стилей

Вернуться в раздел: CSS / 1. CSS и документы