So fügen Sie eine CSS -Datei in eine andere ein?

Während der Entwicklung umfangreicher Projekte ist es besser, separate Dateien für HTML und CSS zu erstellen. Wie wir wissen, bietet CSS zahlreiche Eigenschaften, mit denen Entwickler Webseiten und HTML -Dokumente mehr ästhetisch machen können. Daher besteht der ideale Ansatz darin, mehrere CSS -Dateien für verschiedene Projektkomponenten zu erstellen. Dies hilft Entwicklern, den spezifischen Code nach Änderungen zu durchsuchen.

In diesem Beitrag wird erklärt, wie Sie eine CSS -Datei zu einer anderen hinzufügen können.

So einbeziehen Sie eine CSS -Datei in eine andere?

Das CSS “@import Regel”Wird verwendet, um eine CSS -Datei in eine andere einzubeziehen. Schauen Sie sich das Beispiel für ein klares Verständnis an.

Beispiel: einschließlich einer CSS -Datei in einem anderen, einschließlich einer CSS -Datei

Erstellen Sie zunächst drei Dateien, eine HTML und zwei CSS -Dateien.

Schritt 1: HTML -Datei erstellen

Erstellen Sie eine HTML -Datei “,“Index.html”, Dann fügen Sie das hinzu“”Element in“Abschnitt wie unten angegeben. Hier "relDas Attribut wird verwendet, um die Beziehung zwischen HTML und der verknüpften Datei und "zu definieren"href”Wird verwendet, um die Dateiquelle anzugeben:

Im "Abschnitt, führen Sie die folgenden Schritte aus:

• Füge hinzu ein ""Element und zuweisen Sie es zwei Klassen"Content-div" Und "Buch”.
• Hinzufügen "

  ”Element zum Übergang und“

  Element zum Erstellen einer Liste.
  • Um die Elemente aufzulisten, fügen Sie hinzu "
  • " Stichworte:
  
  

  Bücher

  
  
  
  
  • Alchimist
  
  
  • Drachenläufer
  
  
  
  

  Schritt 2: CSS -Datei erstellen

  Danach erstellen Sie die “hauptsächlich.CSSDatei und fügen Sie den folgenden Code hinzu:

  .Content-div
  Breite: 400px;
  Höhe: 300px;
  Rand: Auto;
  Hintergrundfarbe: RGB (245, 230, 212);
  

  Der ".Content-div"Wird verwendet, um auf die zuzugreifen"”Element mit der Klasse als" als "Content-divUnd die folgenden Eigenschaften werden darauf angewendet:

  • “Breite”Bestimmt die Breite des Elements.
  • “Höhe”Passt die Höhe des Elements an.
  • “RandErzeugt den Raum um das HTML -Element.
  • “Hintergrundfarbe”Ändert die Hintergrundfarbe des HTML -Elements.

  Ausgang

  Schritt 3: Erstellen Sie die zweite CSS -Datei

  Erstellen Sie als nächstes eine zweite CSS -Datei “Buch.CSS”. Dann greifen Sie auf den Namen der zweiten Klasse zu “.Buch”Und weisen Sie ihm die folgenden CSS -Eigenschaften zu:

  .Buch
  Hintergrundbild: URL (/Bilder/Blätter-.JPG);
  Hintergrundgröße: Cover;
  Polsterung: 15px;
  Schriftgröße: 40px;
  Schriftdicke: fett;
  Farbe: RGB (243, 243, 243);
  

  Hier:

  • “Hintergrundbild”Wird verwendet, um das Hintergrundbild zu setzen, indem die URL des Bildes definiert wird.
  • “Hintergrundgröße”Gibt die Größe des Hintergrundbildes des Elements an.
  • “Polsterung”Wendet Platz innerhalb des Randes des Elements an.
  • “Schriftgröße”Legt die Schriftgröße fest.
  • “Schriftgewicht”Bezeichnet die Dicke der Schriftart.
  • “Farbe”Bestimmt die Schriftfarbe.

  Ergänzen Sie die "@importieren”Regel an der Spitze der“hauptsächlich.CSS" Datei:

  @import URL (Bücher.CSS);

  Der "@importierenRegel importiert die CSS -Datei in eine andere CSS -Datei. Zum Beispiel die “Bücher.CSS"Ist in der" enthalten "hauptsächlich.CSS" Datei.

  Die Ausgabe bestätigt, dass die CSS -Eigenschaften beider Dateien erfolgreich angewendet wurden:

  Wir haben erfolgreich eine CSS -Datei in eine andere aufgenommen.

  Abschluss

  Verwenden Sie das CSS, um eine CSS -Datei in eine andere aufzunehmen. “@importieren" Regel. Die Regel „@import“ muss oben in der CSS -Datei angegeben werden, in der Sie eine andere CSS -Datei einfügen möchten. Um die CSS -Dateien in HTML zu verknüpfen, ist die “"Tag, zusammen mit dem"href”Attribut, wird verwendet. In diesem Beitrag wurde erklärt, wie man eine CSS -Datei in eine andere integriert.