CSS @import-Regel
Die CSS @import-Regel wird verwendet, um Stilregeln aus anderen Stylesheets zu importieren und Media Queries zu unterstützen. Das @import-Schlüsselwort muss von der URI des einzubindenden Stylesheets gefolgt werden. Auch eine Zeichenkette ist erlaubt. Sie muss sich ganz oben im Stylesheet befinden, vor allen anderen Regeln außer @charset und @layer.
INFO
Die @import-Regel kann nicht innerhalb von bedingten Gruppenregeln verwendet werden.
| Initial Value | - |
|---|---|
| Applies to | - |
| Inherited | No. |
| Animatable | No. |
| Version | CSS2 |
| DOM Syntax | N/A |
Syntax
Syntax der CSS @import-Regel
@import <url> | <string> [ <media-query-list> ]? ;Beispiel für die @import-Regel:
Beispiel für die CSS @import-Regel
<!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>Ergebnis
Der Unterschied zwischen relativer und absoluter URL
Die Datentypen <url> und <string> werden von der @import-Regel akzeptiert, um die zu importierende Datei zu bestimmen. Dies kann als absolute oder relative URL angegeben werden.
Das folgende Code-Beispiel verwendet eine relative URL. Das bedeutet, dass die URL relativ zum Speicherort des aktuellen Stylesheets ist. Hier müssen wir keinen Pfad angeben. Stattdessen geben wir nur den Dateinamen an.
CSS @import-Regel
@import "relative.css";Im nächsten Beispiel ist die URL ebenfalls relativ, obwohl wir einige Pfadinformationen angegeben haben:
CSS @import-Regel
@import "../css/relative.css";Wie Sie sehen können, enthält das folgende Code-Beispiel den vollständigen Pfad mit dem Domainnamen. Das bedeutet, dass die URL absolut ist.
CSS @import-Regel
@import "http://www.examples.fr/css/absolute.css";Media Queries
Die @import-Regel unterstützt Media Queries. Das bedeutet, dass der Import medienabhängig sein kann. Im folgenden Code-Beispiel können Sie das Stylesheet nur importieren, wenn das Medium „print" ist.
CSS @import-Regel
@import "media-query.css" print;Werte
| Wert | Beschreibung |
|---|---|
| url | Eine <url> oder <string>, die den Speicherort der zu importierenden Ressource angibt. Die URL kann relativ oder absolut sein. |
| string list-of-mediaqueries | Eine durch Kommas getrennte Liste von Media Queries, die die Anwendung der im verknüpften URL definierten CSS-Regeln bedingen. |
Praxis
Welche Syntax ist korrekt, um die @import-Regel in CSS zu verwenden?