Règle CSS @import

❮ Précédent Suivant ❯

La règle CSS @import est utilisé pour importer des règles de style à partir 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 pour inclure. Une chaîne est également autorisée. Il doit figurer en haut du document, mais après la règle @charset.

La propriété @import ne peut pas être utilisée dans le groupe des règles conditionnelles.

Valeur initiale	-
Appliquée à	-
Héritée	Non.
Animable	Non.
Version	CSS2
Syntaxe DOM	object.style.@import = "url";

Syntaxe

@import: url | string list-of-mediaqueries | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété @import</h2>
    <p class="p1">La règle @import vous permet d'importer une feuille de style à un autre feuille de style.</p>
    <p class="p2">La règle @import supporte aussi les requêtes média, donc  vous pouvez autoriser l'importation en fonction du support.</p>
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeurs	Description
url	Un <url> ou un <string> montrant l'emplacement de la ressource à importer. L'URL peut être relative ou absolue.
string list-of-mediaqueries	Une liste de requêtes multimédia séparées par des virgules conditionnant l'application des règles CSS définies dans l'URL liée.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.