/css/import:> Импортирование стилей_

Правило @import

Синтаксис

CSS 1
CSS 2+
@import "<URI>" <типы-устройств>? ;
/* или */
@import url("<URI>") <типы-устройств>? ;

Описание

Правило @import позволяет импортировать внешние таблицы стилей. Ключевое слово «@import» указывает URI-адрес таблицы стилей, которую необходимо подключить.

Так же после URI, через запятую можно указать типы устройств, которые могут импортировать указанные таблицы (например, @import url("style.css") tv;, @import url("style.css") projection, tv;). При этом необходимо помнить, что при отсутствии каких-либо указанных типов устройств, свойства импортируются не зависимо от типа устройства. Данная функция важна тем, что позволяет разработчикам адаптировать дизайн документа под различные медиа.

Примечание

При импортировании валидной таблицы стилей в основную таблицу стилей веб-браузер должен обрабатывать содержимое основной таблицы стилей так, как если бы импортируемые стили были написаны в месте написания правила «@import».

Условия использования

Правила «@import» должны предшествовать всем остальным правилам и стилям (за исключением правила «@charset», если таковое присутствует), в противном случае «@import» будет являться недействительными.


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация


URI-адрес

Предусмотрены следующие способы указания URI-адреса:

url("<URI-адрес>")
Указывает строку URI-адреса внутри «url(...)». При этом строка URI-адреса выделяется символами «"» ДВОЙНОЙ КАВЫЧКИ [U+0022].

@import url("style.css");

"<URI-адрес>"
Указывает URI-адрес подключаемой таблицы стилей в виде обычной строки. При этом строка URI-адреса выделяется символами «"» ДВОЙНОЙ КАВЫЧКИ [U+0022].

@import "style.css";


Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Правило @import</title>
<style type="text/css">
@import url("/css/import/exampleImport.css");
.box {
display: block;
border: 1px solid silver;
}
</style>
</head>
<body>
<h1>Пример с использованием правила @import</h1>
<div class="box boxBackground">
<h2>Содержимое файла "ExampleImport.css"</h2>
<pre>.boxBackground {
background-color: #777;
color: white;
}</pre>
</div>
</body>
</html>
Правило @import