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

Der Unterschied zwischen z-index: 0 und z-index: auto in CSS

vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen

In der neuesten Version von WIN10 hat Microsoft e...

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Konkrete Schritte

Der Unterschied zwischen z-index: 0 und z-index: auto in CSS

Tipps zur Kurzschrift in JavaScript

Empfehlen Sie einen coolen blinkenden Alarmknopf

2017 neueste Version der Windows-Installation MySQL-Tutorial

Beschreiben Sie kurz die vier Transaktionsisolationsebenen von MySql

Zusammenfassung zur Verwendung der Bootstrap-Tabelle

Erklärung der CAST- und CONVERT-Funktionen zur Typkonvertierung in MySQL-Datenbanken

Linux bestätigt, dass die Datendiskette deinstalliert wurde und ein neues benutzerdefiniertes Image erstellt werden kann

Detaillierte Erklärung der Lösung für das Nginx-Panikproblem

Implementierung der QR-Code-Scanfunktion über Vue

Artikel empfehlen

Implementierung von TypeScript im React-Projekt

Lösung für FileZilla 425. Verbindung zum FTP (Alibaba Cloud Server) nicht möglich.

Womit kann ich dich, meinen Tisch, retten (Haiyu-Blog)

CSS Flex mehrere mehrspaltige Layouts

vmware workstation12 installation centos fordert VMware Player und Device/Credential Guard sind inkompatibel, Gründe und Lösungen

Tutorial zur Installation von PHP5, Deinstallation von PHP und Installation von PHP7 auf CentOS

Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets

Unterschiede zwischen MySQL MyISAM und InnoDB

Verwenden von jQuery zum Implementieren des Karusselleffekts

WeChat Mini-Programm Lotterienummerngenerator

Installations-Tutorial zur komprimierten Version von MySQL 8.0.11

C# implementiert MySQL-Befehlszeilensicherung und -wiederherstellung

Neulinge lernen schnell die Schritte zum Erstellen von Website-Symbolen

Eine kurze Einführung in die Verwendung des Dezimaltyps in MySQL

MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte