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

Detaillierte Schritte zur Installation und Konfiguration von MySQL 8.0 auf CentOS

Vorwort Hier sind die Schritte zur Installation u...

36 Prinzipien der MySQL-Datenbankentwicklung (Zusammenfassung)

Vorwort Diese Prinzipien sind aus tatsächlichen K...

Tutorial zur Installation einer MySQL-Datenbank und zur Verwendung von Navicat für MySQL

MySQL ist ein relationales Datenbankverwaltungssy...

Forschung zur Größe von Webseiten

<br />Statistiken zufolge hat sich die durch...

Eine "klassische" Falle der MySQL UPDATE-Anweisung

Inhaltsverzeichnis 1. Problematische SQL-Anweisun...

Sieben Möglichkeiten zur Implementierung der Array-Deduplizierung in JS

Inhaltsverzeichnis 1. Verwenden von Set()+Array.f...

Ein MySQL-Migrationsplan und eine praktische Auflistung der Fallstricke

Inhaltsverzeichnis Hintergrund Lösung 1: Alte Dat...

Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von mysql8.0.0 winx64.zip

Dieser Artikel zeichnet das Installations-Tutoria...

Der IE8-Browser wird vollständig mit Webseitenstandards kompatibel sein

<br />Um zu beweisen, dass sein Engagement f...

Node-Skript realisiert automatische Anmelde- und Lotteriefunktion

Inhaltsverzeichnis 1. Einleitung 2. Vorbereitung ...

Beispiel für die Umsetzung eines 2-spaltigen Layouts in HTML (links feste Breite, rechts adaptive Breite)

HTML implementiert ein 2-spaltiges Layout mit fes...

So machen Sie Formulareingaben und andere Textfelder in HTML schreibgeschützt und nicht bearbeitbar

Manchmal möchten wir, dass die Textfelder im Formu...

Design-Story: Der Wachmann, der sich Nummernschilder nicht merken kann

<br />Um die Fahrzeuge zu regeln, die in die...

Kali Linux Installation VMware Tools Installationsprozess und VM Installation vmtools button grau

Xiaobai zeichnet die Installation von vmtools auf...

Vue2.x - Beispiel für die Verwendung von Anti-Shake und Throttling

Inhaltsverzeichnis Dienstprogramme: Verwendung in...