CSS kann als separate Datei hinzugefügt oder direkt in Ihr HTML -Dokument eingebettet werden. Wenn Sie CSS in HTML einbeziehen möchten, dann "Inline -Stile", "Eingebettete Stile", " und das "Externe Stilblätter" sind die drei Methoden, um diese Funktionalität zu erreichen. Die ideale Möglichkeit besteht jedoch darin, Stile zu erstellen und auf HTML anzuwenden, indem die externen Stilblätter verwendet werden, da eine minimale Markup -Änderung erforderlich ist, um mehrere Seiten gleichzeitig zu beeinflussen.

In dieser Beschreibung wird das Verfahren für diskutiert Hinzufügen ein Externe CSS -Datei In Html. Wir werden auch erklären Verknüpfung Und Import Eine externe CSS -Datei in HTML. Darüber hinaus werden Beispiele zu den genannten Methoden bereitgestellt. So lass uns anfangen!

So fügen Sie eine externe CSS -Datei in HTML hinzu

Wenn Sie gleichzeitig einen Stil auf mehrere Webseiten anwenden möchten, ist das Hinzufügen einer externen CSS -Datei perfekt. Ein externes CSS wird als separate Datei angesehen, die alle Stilregeln umfasst, und kann mit jeder HTML -Seite Ihrer Website verknüpft werden. Durch das Hinzufügen einer externen CSS -Datei können Sie das Aussehen Ihrer Website ändern, indem Sie nur Änderungen in einer einzelnen Datei vornehmen. Wenn Sie separate CSS-, JavaScript- und HTML -Dateien durchführen, können Sie den Code verwalten und die Lesbarkeit verbessern.

Es gibt zwei Methoden zum Hinzufügen einer externen CSS -Datei HTML: Verknüpfung und Importierung.

Verknüpfung einer externen CSS -Datei in HTML

Zunächst erstellen wir eine CSS -Datei in HTML. Zu diesem Zweck können Sie Ihren bevorzugten Code -Editor öffnen. Wir werden jedoch Visual Studio Code verwenden.

Nach dem Öffnen von VS -Code erstellen wir eine "Stil.CSS ” CSS -Datei zum Hinzufügen von Stilen:

Als nächstes geben wir den Stil an, den wir auf die Webseite in der geöffneten CSS -Datei bewerben möchten. Hier haben wir die Werte dem zugewiesen "Hintergrund" Und "Schriftart" Eigenschaften für die HTML "Körper" und fügte auch die hinzu "Farbe" Für die Überschrift:

Körper
Hintergrund: Pink;
Schriftart: 18px Arial, Sans-Serif;

H1
Farbe blau;

Drücken Sie "Strg+S" um den hinzugefügten Code in der hinzugefügten Code zu speichern "Stil.CSS ” Datei:

Der "" Das Tag wird zum Verknüpfen eines externen CSS mit einer HTML -Datei verwendet. Dieses Tag wird in der hinzugefügt "" Abschnitt eines HTML -Dokuments. Wir haben unsere HTML -Datei mit verknüpft "Stil.CSS ” im untergegebenen Programm mit dem Tag mit dem Tag. Dann haben wir mit dem eine Überschrift hinzugefügt

Tag und ein Absatz mit dem

Schild. Der angegebene Stil in der "Stil.CSS ” Die Datei wird auf diese HTML -Elemente angewendet:

Dies ist LinuxHint.com

Wir lernen, wie man eine CSS -Datei in HTML hinzufügt

Speichern Sie dieses JavaScript -Programm und öffnen Sie Ihre HTML -Datei im Browser:

Wie Sie sehen, haben wir den angegebenen Stil erfolgreich auf unsere HTML -Elemente angewendet, indem wir sie mit der externen CSS -Datei verknüpft haben:

Importieren einer externen CSS -Datei in HTML

Eine andere Methode zum Hinzufügen einer externen CSS -Datei ist die Verwendung der Verwendung der Verwendung "@importieren" Regel im HTML -Dokument. Das JavaScript "@importieren" Deklarationen geben dem Browser Anweisungen zum Laden und Verwendung der Stile aus der externen CSS -Datei.

Sie können eine externe CSS -Datei in HTML importieren, indem Sie einfach die Erklärung "@import" im Tag des HTML -Dokuments hinzufügen. Auf diese Weise dürfen Sie andere CSS -Regeln für die HTML -Elemente im selben Tag hinzufügen:

Dies ist LinuxHint.com

Wir lernen, wie man in HTML eine CSS -Datei hinzufügt

Im bereitgestellten JavaScript -Programm haben wir die importiert "Stil.CSS ” Datei, und der mit der genannte Datei angegebene Stil wird auf die Überschriften angewendet. Wir haben auch Stil für das Absatz HTML -Element hinzugefügt:

Unser "Mein Projekt.HTML ” Die Datei hat die folgenden HTML -Elemente mit den angewandten Stilen:

Abschluss

Das Hinzufügen einer CSS -Datei in HTML ist nützlich, wenn Sie einen Stil gleichzeitig auf mehrere Webseiten anwenden möchten. Wenn Sie die HTML-, JavaScript- und CSS -Dateien separat aufbewahren, ist Ihr Code einfach zu verwalten. In diesem Artikel wurde das Verfahren zum Hinzufügen einer CSS-Datei in HTML erörtert. Wir haben auch das Verknüpfen und Importieren einer externen CSS -Datei in HTML erklärt und importiert. Darüber hinaus werden auch Beispiele zu den genannten Methoden bereitgestellt.