So importieren Sie CSS-Stile in externe HTML-Stylesheets

Der Link-In-Stil besteht darin, alle Stile in eine oder mehrere externe Stylesheet-Dateien einzufügen. Diese Datei hat die Erweiterung „css“. Über das Link-Tag wird das externe Stylesheet (externe Style-Datei mit dem Namen „css“) mit dem HTML-Dokument verknüpft. Auf diese Weise können Struktur und Stil in zwei Dateien aufgeteilt werden, was das Bearbeiten des Stils oder der Struktur erleichtert.

Die grundlegende Syntax lautet:

<link rel="stylesheet" href="text.css" />

Tipps: Die Tastenkombination ist Link+Tab

Konkrete Schritte

① Erstellen Sie HTML- und CSS-Dateien separat, wobei die Dateinamen jeweils mit .html und .css enden müssen.

In HTML werden lediglich die Struktur und der Inhalt geschrieben, der stilistisch geändert werden muss;
In CSS-Dateien werden nur Stile geschrieben.

Zum Beispiel:

HTML-Datei schreiben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<Kopf>
	<meta http-equiv="Inhaltstyp" content="text/html;charset=UTF-8">
	<title>Dokument</title>
</Kopf>
<Text>
	<div class="demo">Lernen Sie externe Stylesheets mit Zhang Wangwang</div>
	<div>Lernen Sie externe Stylesheets mit Zhang Wangwang</div>
	<div>Lernen Sie externe Stylesheets mit Zhang Wangwang</div>
	<div>Lernen Sie externe Stylesheets mit Zhang Wangwang</div>
</body>
</html>

CSS-Datei schreiben:

.Demo{
	Farbe: blau; 
}

An diesem Punkt zeigt der Browser Folgendes an:

Bildbeschreibung hier einfügen

Wie aus dem obigen Code ersichtlich ist, haben wir die Farbe der ersten Zeile „Externe Stylesheets lernen mit Zhang Wangwang“ auf Blau gesetzt, aber da keine Verbindung zwischen den HTML- und CSS-Dateien besteht, wird die bearbeitete Farbe in der ersten Textzeile im Browser nicht angezeigt.

②In den <head> von HTML einfügen

<link rel="stylesheet" href="CSS-Dateipfad" />

Drücken Sie anschließend Strg+S und aktualisieren Sie den Browser, um Folgendes anzuzeigen:

Sie können sehen, dass die erste Textzeile blau geworden ist~

Beachten

Beim Üben legen Sie die CSS-Datei und die HTML-Datei am besten in denselben Verzeichnisordner und denken Sie daran, diese nach dem Schreiben des Stils oder der Struktur zuerst durch Drücken von Strg+S zu speichern, damit die Ergebnisse besser und schneller angezeigt werden können.
Die Funktion des Link-Tags besteht darin, externe CSS-Stile in die aktuelle HTML-Seite einzuführen, und es bildet eine Brücke zwischen HTML- und CSS-Dateien.

Dies ist das Ende dieses Artikels über die Einführung von CSS-Stilen in externe HTML-Stylesheets. Weitere relevante Inhalte zur Einführung von CSS-Stilen in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Zeilen- und spaltenübergreifende Operationen in HTML-Tabellen (Rowspan, Colspan)

>>: CSS3 erzielt einen unendlichen Scroll-/Karusselleffekt der Liste

Eine kurze Erläuterung, wie Tomcat den übergeordneten Delegationsmechanismus unterbricht

Detailliertes Tutorial zum Erstellen einer Continuous-Integration-Delivery-Umgebung basierend auf Docker+K8S+GitLab/SVN+Jenkins+Harbor

Artikel

Vant Uploader implementiert die Komponente zum Hochladen eines oder mehrerer Bilder

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Konkrete Schritte

Eine kurze Erläuterung, wie Tomcat den übergeordneten Delegationsmechanismus unterbricht

Tutorial zu HTML-Tabellen-Tags (34): Zeilenspannen-Attribut ROWSPAN

Erfahren Sie, wie Sie ein Vue-Projekt mit Docker bereitstellen

Drei Möglichkeiten zum Erstellen eines Graueffekts auf Website-Bildern

Detailliertes Tutorial zum Erstellen einer Continuous-Integration-Delivery-Umgebung basierend auf Docker+K8S+GitLab/SVN+Jenkins+Harbor

Vant Uploader implementiert die Komponente zum Hochladen eines oder mehrerer Bilder

Die „3I“-Standards für erfolgreiche Printwerbung

VirtualBox installiert die virtuelle Maschine CentOS7 und Erweiterungstools (Bild und Text)

So ändern Sie die Standardübermittlungsmethode des Formulars

Was ist JavaScript Anti-Shake und Throttling

Artikel empfehlen

Eine kurze Erläuterung des Unterschieds zwischen schreibgeschützten und deaktivierten Eingabeattributen in HTML

Vue realisiert den Card-Flip-Effekt

Implementierung von HTTP- und HTTPS-Diensten mit Nginx-Reverse-Proxy für mehrere Domänennamen

So installieren Sie nginx unter Linux

Hinweise zur Speicherverwaltung von Linux-Kernel-Gerätetreibern

Nodejs konvertiert JSON-String in JSON-Objekt-Fehlerlösung

Zusammenfassung der Wissenspunkte zur Verwendung berechneter Eigenschaften in Vue

Die perfekte Lösung für das MySql-Versionsproblem sql_mode=only_full_group_by

Einführung in die Installation von JDK unter Linux, einschließlich der Deinstallation von OpenJDK

Implementierung des Docker-Buildings für Maven+Tomcat-Basisimages

CentOS 7.x-Bereitstellung von Master- und Slave-DNS-Servern

So verwenden Sie VUE und Canvas, um ein Thunder Fighter-Tippspiel zu implementieren

Detaillierte Erläuterung mehrerer Lösungen für JavaScript-Unterbrechungsanforderungen

Kleines Programm zur Implementierung eines einfachen Taschenrechners

Beispiel für die Mosaikierung eines Bildes mit js