Beim Codieren ist es jedoch schwierig, dieselben CSS-Eigenschaften für jede einzelne Webseite separat einzufügen. Daher ist es erforderlich, eine Lösung zu verwenden, mit der ein einzelnes Stylesheet erstellt und dann von mehreren Dateien problemlos aufgerufen werden kann.
Was ist die @import-Regel in CSS?
Der beste Weg, die CSS-Stileigenschaften einzuschließen, ist die Verwendung der @import-Regel. @import wird verwendet, um ein CSS-Stylesheet aus einem anderen Stylesheet zu importieren oder darauf zuzugreifen. Dies reduziert den Aufwand des Entwicklers, da alle im importierten Stylesheet hinzugefügten Eigenschaften direkt implementiert werden, indem einfach @import und dann der genaue Name des Stylesheets geschrieben wird.
Syntax der @import-Regel
Die Syntax zum Hinzufügen der @import-Regel für den Zugriff auf ein Stylesheet aus einem anderen Stylesheet lautet wie folgt:
@importieren 'stylesheetname.css' ;
Die @import-Regel kann auch mit der folgenden Methode hinzugefügt werden:
@importieren URL ( stylesheetname.css ) ;
Fügen Sie einfach den Namen der CSS-Stylesheet-Datei entweder in Anführungszeichen oder in runden Klammern mit „ URL „nach dem Schreiben“ @importieren “.
Beispiel: Hinzufügen einer @import-Regel
Um zu verstehen, wie die @import-Regel funktioniert, schreiben wir ein einfaches Code-Snippet:
< h1 > Dies ist ein einfacher Text! < / h1 >Im obigen Code-Snippet gibt es eine
-Überschrift mit einem einfachen einzeiligen Satz, der in ein HTML-Dokument eingefügt wurde. Dieser einfache Code generiert die folgende Ausgabe:
Lassen Sie uns ein Stylesheet erstellen, um einige CSS-Eigenschaften zu definieren, die später aus der Datei importiert werden können, durch die die obige Webseitenschnittstelle erstellt wird. Wir erstellen eine weitere Datei und nennen sie „ Stylesheet “ mit dem Dateityp deklariert als „ css “, und fügen Sie einfach einige Eigenschaften für
Überschrift und Text hinzu: h1 {
Farbe : Mitternachtsblau ;
Hintergrundfarbe : azurblau ;
Textausrichtung : Center ;
}
Körper {
Hintergrundfarbe : hellblau ;
}
Um auf die Stylesheet-Datei zuzugreifen, die die Stileigenschaften für
-Überschrift und -Text enthält, müssen wir einfach die @import-Regel in eine der CSS-Dateien einfügen, in der dieser Stil benötigt wird.
Durch das Hinzufügen einer einfachen @import-Regel werden alle Stileigenschaften in die Webseitenschnittstelle implementiert, ohne dass die Eigenschaften auf jeder Webseite separat eingegeben werden müssen.
Daher ist es erforderlich, die @import-Regel wie folgt zu schreiben:
@importieren 'stylesheet.css' ;Hinzufügen der @import-Regel durch Schreiben von „ URL ” und der Name der CSS-Datei in runden Klammern werden ebenfalls die gleichen Ergebnisse anzeigen:
@importieren URL ( stylesheet.css ) ;Die im „ Stylesheet ”-Datei werden implementiert, indem einfach eine einfache “ @importieren ” Regel dafür:
Dies ist der einfachste Weg, die CSS-Eigenschaften ohne zusätzlichen Aufwand in eine Datei aufzunehmen.
Vorteile der @import-Regel in CSS
Die @import-Regel wird häufig aus folgenden Gründen verwendet:
- Die Verwendung der @import-Regel reduziert den Zeit- und Arbeitsaufwand des Entwicklers, da sie alle Eigenschaften eines bestimmten Stylesheets implementiert, indem sie einfach den Namen dieses Sheets nach @import schreibt.
- In großen und komplexen Web-Apps erweist sich die @import-Regel als sehr vorteilhaft, da dieselben Style-Eigenschaften in mehreren Dateien implementiert werden können, indem nur der Name der Stylesheet-Datei hinzugefügt wird.
- Stylesheet-Elemente wie Kopfzeilen, Fußzeilen, Textkörper usw. können in separaten Stylesheet-Dateien gespeichert werden, und dann kann mithilfe der @import-Regel jeder erforderliche Stil importiert werden, ohne dass Stileigenschaften aus einem hinzugefügt, entfernt oder kommentiert werden müssen Datei.
Dies fasst die Verwendung der @import-Regel zusammen und erklärt, warum diese Regel als die beste Methode zum Einbinden von CSS angesehen wird.
Abschluss
Ein CSS-Stylesheet kann importiert oder direkt von einem anderen Stylesheet aufgerufen werden, und alle Eigenschaften des importierten Stylesheets werden direkt auf der Webseite der Datei implementiert, in die es importiert wurde. Es ist nicht erforderlich, jede einzelne CSS-Eigenschaft separat für jede Webseitenschnittstelle zu schreiben. Dazu muss lediglich der Name der CSS-Stylesheet-Datei mit @import hinzugefügt werden. Und dies wird als die beste Methode zum Hinzufügen von CSS angesehen.