CSS @import-Regel

Definition und Verwendung

Die @import-Regel ermöglicht es Ihnen, ein Stilblatt in ein anderes Stilblatt zu importieren.

Die @import-Regel muss am Dokumentanfang (aber nach jeder @charset-Auszeichnung) stehen.

Die @import-Regel unterstützt auch Media-Abfragen und ermöglicht daher den Import basierend auf Medien.

Beispiel

Beispiel 1

Importieren Sie das "navigation.css"-Stilblatt in das aktuelle Stilblatt ein:

@import "navigation.css"; /* Verwendung von Zeichenkette */

oder

@import url("navigation.css"); /* Verwendung von url */

Beispiel 2

Importieren Sie das "printstyle.css"-Stilblatt nur, wenn das Medium "print" ist:

@import "printstyle.css" print;

Versuchen Sie es selbst

Beispiel 3

Importieren Sie das "mobstyle.css"-Stilblatt nur, wenn das Medium "screen" ist und die Viewport-Breite 768 Pixel nicht überschreitet:

@import "mobstyle.css" screen and (max-width: 768px);

Versuchen Sie es selbst

CSS-Syntax

@import url|string list-of-mediaqueries;

Attributwert

Wert Beschreibung
url|string url oder Zeichenkette, die den Standort der zu importierenden Ressource darstellt. url kann absolut oder relativ sein.
list-of-mediaqueries Eine durch Kommas getrennte Liste von Media-Abfragen, die die Bedingungen angeben, unter denen die CSS-Regeln, die durch die URL eingeführt werden, angewendet werden.

Browser-Unterstützung

Die Zahlen in der Tabelle weisen auf die erste Browser-Version hin, die diese Eigenschaft vollständig unterstützt.

Chrome IE / Edge Firefox Safari Opera
1.0 5.5 1.0 1.0 3.5