So importieren Sie Stylesheets mit @import in CSS

In einem Webprojekt kann es mehrere Stylesheets geben. Um alle Eigenschaften auf die HTML -Elemente anzuwenden, ist es erforderlich, sie alle in ein Stylesheet zu integrieren. Dazu das CSS “@importieren”Regel kann verwendet werden. Mit der @import -Regel enthält eine CSS -Datei alle Stile, die auf das gesamte Projekt angewendet werden. Darüber hinaus kann diese CSS -Datei mit dem HTML unter Verwendung des Elements im HTML -Kopfabschnitt verknüpft werden.

In diesem Artikel werden die Methode erklärt, Stylesheets mit dem @Import in CSS zu importieren.

Analysieren Sie das folgende Beispiel für ein besseres Verständnis!

So importieren Sie Stylesheets mit @import in CSS?

Wir erstellen eine HTML -Datei und zwei CSS -Dateien mit den Namen “Stil.CSS" Und "Btnstyle.CSS”:

• Die HTML -Datei enthält ein DIV -Element. In diesem DIV wird das Tastenelement angegeben.
• Der Style.CSS enthält die Stylingeigenschaften des Divelelements.
• Der btnstyle.CSS umfasst die Stylingeigenschaften des Tastelements.
• Der btnstyle.Die CSS -Datei importiert in den Stil.CSS und dann wird die HTML -Datei mit dem Stil verknüpft.CSS -Datei.

Schritt 1: HTML -Datei erstellen

Fügen Sie in HTML zunächst ein Div -Element mit dem Klassennamen hinzu “Inhalt”. Fügen Sie in diesem Element ein Schaltflächenelement hinzu:

Klick mich

Hier ist die Ausgabe:

Die HTML -Datei wird erfolgreich erstellt. Lassen Sie uns nun zum Stil gehen.CSS -Datei.

Schritt 2: Stil erstellen.CSS -Datei

Im Folgenden finden Sie die CSS -Eigenschaften, die zum “hinzugefügt wurdenStil.CSS" Datei.

Stil alle Elemente

*
Rand: 0;
Polsterung: 0;

Das Sternchen "*Das Zeichen wird verwendet, um sich auf alle HTML -Elemente zu beziehen. Die folgenden Eigenschaften werden auf sie angewendet:

• “RandEigenschaft fügt Platz um das Element um.
• “PolsterungEigenschaft fügt Platz um den Inhalt des Elements oder innerhalb des Randes des Elements hinzu.

Stil „Inhalt“ div

.Inhalt
Breite: 350px;
Höhe: 150px;
Grenze: 1PX Solid RGB (252, 198, 117);
Hintergrundfarbe: Blanchedalmond;
Rand: Auto;
Anzeige: Flex;
Justify-Content: Center;
Ausrichtung: Zentrum;

Im Folgenden finden Sie die Eigenschaften, die auf das Div -Element angewendet werden:

• “BreiteEigenschaft wird verwendet, um die Breite des Elements festzulegen.
• “HöheEigenschaft wird verwendet, um die Höhe des Elements festzulegen.
• “Grenze”Eigenschaft gibt den Rand des Elements an, indem die Werte für Grenzbreite, Grenzstil und Grenzfarbe angegeben werden.
• “HintergrundfarbeEigenschaft verleiht dem Hintergrund des Elements Farbe.
• “Anzeige”Eigenschaft mit dem Wert“biegen”Wird das Layout des Elements für seine Gegenstände flexibel machen.
• “RechtfertigungsbekämpfungDie Eigenschaft legt die Position der flexiblen Elemente horizontal fest.
• “AusrichtungDie Eigenschaft legt die Position der flexiblen Elemente vertikal und die “festRand”Eigentum arbeitet wie oben erläutert.

Schritt 3: Verknüpfen Sie CSS mit HTML -Datei

Der nächste Schritt besteht darin, den Stil zu verknüpfen.CSS -Datei zur HTML -Datei mithilfe der “”Element, die den Attributen zugeordnet sind:

• rel: Dieses Attribut wird verwendet, um den Dokumenttyp anzugeben.
• href: Dieses Attribut wird verwendet, um die URL der Datei hinzuzufügen.

Dieses Link -Element wird im Kopfelement der HTML -Datei angegeben:

Also, hier ist die Ausgabe nach der Verknüpfung des Stils.CSS -Datei zur HTML -Datei:

Gehen Sie jetzt zum "Btnstyle.CSSDatei, die die Stylingeigenschaften des Schaltflächenelements aufbewahrt.

Schritt 4: Btnstyle erstellen.CSS -Datei

Diese Datei hat die CSS -Eigenschaften des HTML -Tastelements.

Stil „Button“ Element

Taste
Border-Radius: 5px;
Polsterung: 10px;
Breite: 200px;
Hintergrundfarbe: RGB (253, 207, 137);
Grenze: 1PX Solid RGB (245, 156, 21);
Box-Shadow: 1px 1px 1px grau;

Das Schaltflächenelement wird mit den folgenden Eigenschaften angegeben:

• “GrenzradiusDie Eigenschaft wird verwendet, um die Kanten des Elements rund zu machen.
• “Box Schatten”Ist eine Kurzeigeneigenschaft, die einen Schatten um ein Element legt, indem die Werte für X-Offset, Y-Offset, Blur-Radius, Spread-Radius und Farbe des Schattens angegeben werden.
• Der "Polsterung","Breite","Hintergrundfarbe", Und "GrenzeEigenschaften funktionieren wie oben beschrieben.

Schritt 5: Style „Button“ -Element auf dem Schwebe

Taste: Hover
Transformation: Translatey (2px);

Bei schweber wird das Schaltflächenelement mit der folgenden Eigenschaft angegeben:

• “verwandelnEigenschaft gibt die Transformation des Elements an, bei der die “Translatey ()Die Funktion wird das Element auf der y-Achse neu positioniert.

Schritt 6: Verwenden Sie @Import -Regel

Jetzt werden wir den Btnstyle integrieren.CSS -Datei in den Stil.CSS -Datei. Geben Sie dazu den Btnstyle an.CSS -Datei mit der @import -Regel oben im Stil.CSS -Datei wie folgt:

@import "Btnstyle.CSS ";

Ausgang

Sie haben erfolgreich gelernt, wie man Stylesheets mit @import in CSS importiert.

Abschluss

Um alle Eigenschaften auf die HTML -Datei Ihres Projekts anzuwenden, muss sie integriert werden. Dazu werden die CSS -Stylesheets mit der @Import -Regel in das Stylesheet importiert. Anschließend kann diese Datei mit der HTML -Datei mithilfe des HTML -Linkelements verknüpft werden. Dieser Artikel hat gezeigt, wie man Stylesheets mit @import in CSS importiert.