Heim > Artikel > Web-Frontend > So verlinken Sie CSS-Dateien extern in HTML
So verlinken Sie CSS-Dateien extern in HTML
- 下次还敢Original
- 2024-04-11 10:02:561093Durchsuche
Die Verwendung externer HTML-CSS-Dateien vereinfacht die Wartung und Gestaltung. Hier sind die Schritte: Erstellen Sie eine CSS-Datei, z. B. „styles.css“. Verwenden Sie im HTML-Abschnitt <head> das Element <link>, um auf die Datei „styles.css“ zu verlinken. Definieren Sie Stile in CSS-Dateien mithilfe der Standard-CSS-Syntax. Speichern Sie die Datei und überprüfen Sie die Änderungen. Zu den Vorteilen von Outbound-CSS gehören Wartbarkeit, Wiederverwendbarkeit und verbesserte Leistung.
So verwenden Sie externe HTML-CSS-Dateien
Outline-CSS-Dateien können die Pflege und Gestaltung von HTML-Dokumenten erleichtern. Hier ist eine Schritt-für-Schritt-Anleitung dazu:
1 Erstellen Sie eine CSS-Datei
Erstellen Sie zunächst mit einem Texteditor eine CSS-Datei, z. B. styles.css. Schreiben Sie in diese Datei Ihre gewünschten CSS-Stile. styles.css。在该文件中，写入您所需的 CSS 样式。
2. 在 HTML 文档中链接 CSS 文件
在 HTML 文档的 <head> 部分中，使用 <link> 元素链接到外部 CSS 文件。其语法如下：
<code class="html"><link rel="stylesheet" href="styles.css"></code>
其中：
-
rel="stylesheet"指定该链接是指向样式表 href="styles.css"2. CSS-Dateien in HTML-Dokumenten verknüpfen
Verwenden Sie im Abschnitt <head> des HTML-Dokuments das Element <link>, um eine Verknüpfung zu externem CSS herzustellen Dateien. Die Syntax lautet wie folgt:
<code class="css">body {
font-family: Arial, sans-serif;
font-size: 16px;
}</code>
Darunter:
rel="stylesheet" gibt an, dass der Link auf das Stylesheet verweist
href="styles.css" Code> gibt den Pfad der CSS-Datei an
3. Definieren Sie CSS-Stile
Platzieren Sie CSS-Stile in externen CSS-Dateien unter Verwendung der Standard-CSS-Syntax. Zum Beispiel: - rrreee4. Änderungen anzeigen
Speichern Sie die HTML- und CSS-Dateien und öffnen Sie dann die HTML-Datei in Ihrem Browser. Sie werden sehen, dass der CSS-Stil auf die Seite angewendet wurde. - Vorteile
Die Verwendung externer CSS-Dateien hat folgende Vorteile:
Alle Stile sind in einer Datei konzentriert, was die Aktualisierung und Wartung erleichtert. 🎜🎜🎜Wiederverwendbarkeit: 🎜Die gleiche CSS-Datei kann in mehreren HTML-Seiten verwendet werden, wodurch die Wiederverwendbarkeit des Codes verbessert wird. 🎜🎜🎜Leistung: 🎜Das separate Laden von CSS-Dateien trägt dazu bei, die Größe von HTML-Dateien zu reduzieren und dadurch die Seitenladegeschwindigkeit zu erhöhen. 🎜🎜Das obige ist der detaillierte Inhalt vonSo verlinken Sie CSS-Dateien extern in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!