So importieren Sie CSS-Stile in externe HTML-Stylesheets

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

Artikel empfehlen

Eine einfache Methode, um mit der TabBar am unteren Rand des WeChat-Applets umzugehen, das Inhalte blockiert

Nach der Konfiguration der TabBar im WeChat-Apple...

So implementieren Sie ein Dropdown-Menü für die HTML-Eingabe

Code kopieren Der Code lautet wie folgt: <html...

Installieren Sie Percona Server+MySQL auf CentOS 7

1. Umgebungsbeschreibung (1) CentOS-7-x86_64, Ker...

Eine kurze Diskussion über den Aufbau und den Betriebsmechanismus des Echtzeit-Computerframeworks Flink Cluster

Inhaltsverzeichnis 1. Flink-Übersicht 1.1 Grundle...

So verwenden Sie Dockerfile zum Erstellen von Images in Docker

Erstellen des Images Früher haben wir verschieden...

Beispiel für die Implementierung des Skelettbildschirms des WeChat-Applets

Inhaltsverzeichnis Was ist ein Skelettbildschirm?...

Beispiel für die Konfiguration mehrerer virtueller Hosts in nginx

Es ist sehr praktisch, den virtuellen Host vhost ...

Optimierung des HTML-Eingabefelds zur Verbesserung des Benutzererlebnisses und der Benutzerfreundlichkeit

Um das Benutzererlebnis und die Benutzerfreundlich...

Detaillierte Erklärung der drei Möglichkeiten zum Umbrechen von Text in der El-Table-Kopfzeile

Inhaltsverzeichnis Problembeschreibung Rendern Dr...

Exquisiter Snake-Implementierungsprozess in JavaScript

Inhaltsverzeichnis 1. HTML-Struktur erstellen 2. ...

Detaillierte Erläuterung der Installation und Konfiguration des Redis- und phpredis-Erweiterungsvorgangs im Ubuntu 18.04-System

Dieser Artikel beschreibt, wie man Redis- und php...

So verwenden Sie Docker zum Erstellen einer einheitlichen OpenLDAP+phpLDAPadmin-Benutzerauthentifizierung

1. Hintergrund Verwenden Sie LDAP, um betriebs- u...

So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

Eine beträchtliche Anzahl von Websites verwendet d...

Detaillierte Erläuterung der nahtlosen horizontalen LVM-Festplattenerweiterung basierend auf Linux

Umfeld Name Eigentum CPU x5650 Erinnerung 4G Sche...

Das adaptive CSS-Layout realisiert die Gesamtzentrierung von Unterelementelementen und die Linksausrichtung von internen Elementen

Bei der täglichen Arbeit stoßen wir möglicherweis...