Директива CSS @import позволяет присоединять внешние таблицы стилей к HTML документу.

Директива CSS @import может быть размещена как во встроенной в HTML документ таблице стилей в контейнере <STYLE> так и во внешней таблице стилей.

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

@import url(template.css) all;
@import url(main.css) screen;
@import url(print.css) projection, print;

Пример использования директивы CSS @import url();

Открыть пример example001.htm.

В этом примере файл example002.html содержит следующий код:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
@import url(example002.css);
div {font-style: italic;}
</style>
</head>
<body>
<h2>Пример использования CSS директивы @import url();</h2>
<p>Стиль переопределяется для HTML элемента P во внешней таблице стилей example002.css, которая, в свою очередь подгружает таблицу стилей example002a.css. <span>В таблице example002a.css орределены стили для HTML элемента SPAN</span>.</p>
<div>
Коме того, для чистоты эксперимента, во встроенной в HTML документ таблице стилей переопределен стиль для HTML элемента div.
</div>
</body>
</html>

Файл example002.css содержит следующий код:

@import url(example002a.css);
p {font-weight: bold;}

Файл example002a.css содержит следующий код:

span {color:red;}