Правило CSS @import
CSS-правило @import используется для импорта правил стилей из других таблиц стилей и поддержки медиа-запросов. За ключевым словом @import должен следовать URI подключаемой таблицы стилей. Также допускается использование строки. Правило должно находиться в самом начале таблицы стилей, перед любыми другими правилами, кроме @charset и @layer.
INFO
Правило @import нельзя использовать внутри условных групповых правил.
| Initial Value | - |
|---|---|
| Applies to | - |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | N/A |
Синтаксис
Синтаксис правила CSS @import
@import <url> | <string> [ <media-query-list> ]? ;Пример правила @import:
Пример правила CSS @import
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
@import url('https://fonts.googleapis.com/css?family=Coiny');
@import url('https://fonts.googleapis.com/css?family=Lobster');
.p1 {
font-family: 'Coiny', cursive;
}
.p2 {
font-family: 'Lobster', cursive;
}
</style>
</head>
<body>
<h2>@import at-rule example</h2>
<p class="p1">The @import rule allows you to import a style sheet into another style sheet.</p>
<p class="p2">The @import rule also supports media queries, so you can allow the import to be media-dependent.</p>
</body>
</html>Результат
Разница между относительным и абсолютным URL
Правило @import принимает типы данных <url> и <string> для определения файла, который следует импортировать. Он может быть указан как абсолютным, так и относительным URL.
В приведенном ниже примере кода используется относительный URL. Это означает, что URL относительно расположения текущей таблицы стилей. Здесь нам не нужно указывать путь. Вместо этого мы указываем только имя файла.
Правило CSS @import
@import "relative.css";В следующем примере URL все еще относительный, хотя мы указали некоторую информацию о пути:
Правило CSS @import
@import "../css/relative.css";Как вы можете видеть, в следующем примере кода указан полный путь с доменным именем. Это означает, что URL абсолютный.
Правило CSS @import
@import "http://www.examples.fr/css/absolute.css";Медиа-запросы
Правило @import поддерживает медиа-запросы. Это означает, что импорт может зависеть от медиа. В приведенном ниже примере кода вы можете импортировать таблицу стилей только тогда, когда медиа является печатью (print).
Правило CSS @import
@import "media-query.css" print;Значения
| Value | Description |
|---|---|
| url | A <url> or <string> showing the location of the resource to import. URL can be relative or absolute. |
| string list-of-mediaqueries | A comma-separated list of media queries conditioning the application of the CSS rules defined in the linked URL. |
Практика
Какой синтаксис правильный для использования правила @import в CSS?