Теперь мы займемся тем, что находится внутри тега style. Для начала у нас есть аналог элемента link – директива @import:
@import url(sheet2.css);
Так же как и link, @import может указывать веб-броузеру на необходимость загрузки внешней таблицы стилей и использования ее стилей при формировании представления HTMLдокумента. Единственное основное отличие заключается в синтаксисе и размещении команды. Как видите, @import находится в контейнере style. Она должна располагаться перед всеми остальными правилами CSS, иначе она вообще не будет работать. Рассмотрим такой пример:
<style type="text/css">
@import url(styles.css); /* @import идет самой первой */
h1 {color: gray;}
</style>
В документе может быть несколько директив выражения @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 не туда, куда надо, и таким образом изменить представление в других броузерах.