Règle @import CSS
La règle @import CSS est utilisée pour importer des règles de style depuis d'autres feuilles de style et pour prendre en charge les requêtes média. Le mot-clé @import doit être suivi de l'URI de la feuille de style à inclure. Une chaîne de caractères est également autorisée. Elle doit se trouver en haut de la feuille de style, avant toute autre règle, à l'exception de @charset et @layer.
INFO
La règle @import ne peut pas être utilisée à l'intérieur des règles de groupe conditionnelles.
| Valeur initiale | - |
|---|---|
| S'applique à | - |
| Héritée | Non. |
| Animable | Non. |
| Version | CSS2 |
| Syntaxe DOM | N/A |
Syntaxe
Syntaxe de la règle @import CSS
@import <url> | <string> [ <media-query-list> ]? ;Exemple de la règle @import :
Exemple de la règle @import CSS
<!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>Résultat
La différence entre une URL relative et une URL absolue
Les types de données <url> et <string> sont acceptés par la règle @import pour déterminer le fichier qui doit être importé. Cela peut être fourni sous forme d'URL absolue ou relative.
L'exemple de code ci-dessous utilise une URL relative. Cela signifie que l'URL est relative à l'emplacement de la feuille de style actuelle. Ici, nous n'avons pas besoin de fournir un chemin. Au lieu de cela, nous ne fournissons que le nom du fichier.
Règle @import CSS
@import "relative.css";Dans l'exemple suivant, l'URL est toujours relative, bien que nous ayons fourni des informations de chemin :
Règle @import CSS
@import "../css/relative.css";Comme vous pouvez le voir, l'exemple de code suivant inclut le chemin complet avec le nom de domaine. Cela signifie que l'URL est absolue.
Règle @import CSS
@import "http://www.examples.fr/css/absolute.css";Requêtes média
La règle @import prend en charge les requêtes média. Cela signifie que l'importation peut dépendre du média. Dans l'exemple de code ci-dessous, vous pouvez importer la feuille de style uniquement lorsque le média est print (impression).
Règle @import CSS
@import "media-query.css" print;Valeurs
| Valeur | Description |
|---|---|
| url | Une <url> ou une <string> indiquant l'emplacement de la ressource à importer. L'URL peut être relative ou absolue. |
| string list-of-mediaqueries | Une liste de requêtes média séparées par des virgules conditionnant l'application des règles CSS définies dans l'URL liée. |
Pratique
Quelle est la syntaxe correcte pour utiliser la règle @import en CSS ?