Während der Entwicklung von Websites und Web -Apps ist häufig das gleiche Styling auf jeder Webseite erforderlich, um die Konsistenz der Web -App zu erhalten. Wenn die Farben der Hauptseite einer Web -App beispielsweise eine Kombination aus Pink und Lila sind, sieht sie seltsam aus, wenn die nächste Seite der Web -App von jeder anderen Farbe wie Schwarz und Orange besteht.

Bei der Codierung ist es jedoch schwierig, die gleichen CSS -Eigenschaften für jede Webseite getrennt einzubeziehen. Daher ist es erforderlich, eine Lösung zu verwenden, durch die ein einzelnes Stilblatt erstellt und dann einfach von mehreren Dateien zugegriffen werden kann.

Was ist die @import -Regel in CSS?

Der beste Weg, die Eigenschaften des CSS -Stils einzubeziehen, besteht darin, die @import -Regel zu verwenden. @Import wird verwendet, um ein CSS -Stylesheet aus einem anderen Stylesheet zu importieren oder zuzugreifen. Dies verringert die Bemühungen des Entwickler.

Syntax der @import -Regel

Die Syntax zum Hinzufügen der @import -Regel, um auf ein Stylesheet aus einem anderen Stylesheet zuzugreifen, lautet Folgendes:

@Import "StylesheetName.CSS ";

Die @Import -Regel kann auch mit der folgenden Methode hinzugefügt werden:

@import URL (StylesheetName.CSS);

Fügen Sie einfach den Namen der CSS -Stylesheet -Datei in invertierte Kommas oder in runden Klammern mit “hinzuURL"Nach dem Schreiben"@importieren”.

Beispiel: Hinzufügen von @Import -Regel

Um zu verstehen, wie die @import -Regel funktioniert, schreiben wir einen einfachen Code -Snippet:

Dies ist ein einfacher Text!

Im obigen Code -Snippet gibt es a

Übergang mit einem einfachen Einzeilensatz in einem HTML-Dokument hinzugefügt. Dieser einfache Code generiert die folgende Ausgabe:

Erstellen Sie ein Stylesheet, um einige CSS -Eigenschaften zu definieren, die später aus der Datei importiert werden können, über die die obige Webseitenschnittstelle erstellt wird. Wir erstellen eine andere Datei und nennen sie “Stylesheet"Mit dem Dateityp als" deklariert als "CSS”, Und fügen Sie einfach einige Eigenschaften für hinzu

Überschrift und Körper:

H1
Farbe: MidnightBlue;
Hintergrundfarbe: Azure;
Text-Align: Mitte;

Körper
Hintergrundfarbe: hellblau;

So greifen Sie auf die Stylesheet -Datei zu, die die Stileigenschaften enthält

Überschrift und Körper müssen einfach die @Import -Regel in einem der CSS -Dateien hinzufügen, in denen dieses Styling benötigt wird.

Wenn Sie nur eine einfache @Import -Regel hinzufügen.

Es ist also erforderlich, die @import -Regel als:

@Import "Stylesheet.CSS ";

Hinzufügen der @import -Regel durch Schreiben “URLUnd der Name der CSS -Datei in den runden Klammern zeigt auch die gleichen Ergebnisse an:

@import URL (Stylesheet.CSS);

Die in der definierten Eigenschaften “Stylesheet"Die Datei wird implementiert, indem nur ein einfaches Hinzufügen hinzufügen"@importieren”Regel dafür:

Dies ist der einfachste Weg, die CSS -Eigenschaften ohne zusätzliche Anstrengungen 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 die Zeit und den Aufwand des Entwickler.
• 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 der Name der Stylesheet -Datei hinzugefügt wird.
• Stilblattelemente wie Header, Fußzeilen, Körper usw. können in separaten Stylesheet -Dateien gespeichert werden. Durch die Verwendung der @Import -Regel kann jedes der erforderlichen Styling importiert werden Datei.

Dies fasst die Verwendung der @Import -Regel zusammen und erklärt, wie diese Regel als die beste Methode angesehen wird, um CSS einzuschließen.

Abschluss

Ein CSS -Stilblatt kann direkt aus einem anderen Stilblatt importiert oder zugegriffen werden, und alle Eigenschaften im importierten Stilblatt werden direkt auf der Webseite der Datei implementiert, in der es importiert wurde. Für jede Webseitenschnittstelle müssen nicht jede CSS -Eigenschaft separat geschrieben werden. Alles, was es braucht, ist, den Namen der CSS Style Sheet -Datei mit @import hinzuzufügen. Und dies wird als die beste Methode angesehen, um CSS hinzuzufügen.