w3docs logo

CSS-Eigenschaft @import

Die CSS-Eigenschaft @import wird verwendet, um Style-Regeln aus anderen Style Sheets zu importieren und Mediaabfragen zu unterstützen. Dem Schlüsselwort @import muss die URI des einzubindenden Style Sheets folgen. Eine Zeichenkette ist ebenfalls erlaubt. Es muss oben im Dokument sein, aber nach der Regel @charset.

Die Eigenschaft @import kann nicht innerhalb von bedingten Gruppen nach Regeln verwendet werden.
Anfangswert -
Gilt für -
Geerbt Ja
Animierbar Nein
Version CSS2
DOM Syntax object.style.@import = "url";

Syntax

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

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <title>Der Titel des Dokuments</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 property example</h2>
    <p class="p1">Mit der Regel @import können Sie ein Stylesheet in ein anderes Stylesheet importieren.</p>
    <p class="p2">Die Regel @import unterstützt auch Mediaabfragen, so dass Sie den Import mediaabhängig gestalten können.</p>
  </body>
</html>

Werte

Wert Beschreibung
url Eine <Url> oder ein <string>, die den Standort der zu importierenden Ressource anzeigt. Url kann relativ oder absolut sein.
string list-of-mediaqueries Eine kommagetrennte Liste von Medaanfragen, die die Anwendung der in der verknüpften URL definierten CSS-Regeln bedingt.
initial Der Wert stellt die Eigenschaft auf seinen Standardwert ein.
inherit Der Wert erbt die Eigenschaft von seinem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
✓ ✓ 1.0+ ✓ ✓
❮ Vorige Nächste ❯
Finden Sie das nützlich?