Drei gängige Methoden zum Einbetten von CSS in HTML-Dokumente: HTML/Xhtml_Webseitenproduktion

CSS wird in HTML üblicherweise auf die folgenden drei Arten definiert: Einbetten, Verknüpfen, Inline

1. Eingebettet

Verwenden Sie das HTML-Stilelement, um CSS-Stile im Dokument zu definieren .

Code kopieren Der Code lautet wie folgt: > h1{color:red} p{color:blue} 🎜>

2. Inline Jedes HTML-Element enthält ein Stilattribut, das den Stil direkt definieren kann. Dieser Stil kann nur auf den Inhalt dieses Elements angewendet werden und hat keine Auswirkung auf ein anderes Element mit demselben Namen.

Code kopieren Der Code lautet wie folgt: Inline-Stil

3. Externe Referenz Externe Referenz bezieht sich auf HTML Dokument Es enthält keine CSS-Stile, sondern referenziert dynamisch externe CSS-Dateien, um die Präsentation des Dokuments zu definieren. 1. Verwenden Sie die Anweisung zur Stylesheet-Verarbeitung

Schreiben Sie eine Anweisung zur Stylesheet-Verarbeitung am Anfang des HTML-Dokuments

Code kopieren Der Code lautet wie folgt: Anweisungsanweisung

Allerdings sind nur HTML-Dokumente gültig, die im xhtml- oder xml-Format gespeichert wurden. und JS kann diese Art von CSS nicht verarbeiten, daher wird die Verwendung nicht empfohlen.

2. Verwenden Sie den @import-Befehl Verwenden Sie den @import-Befehl zwischen Stilelementen, um externe CSS-Dateien zu importieren

Kopieren Sie den Code Der Code lautet wie folgt: @import "mystyle.css" @import url("mystyle.css"); &lt ;/style> &lt ;/head>

Jede @import-Regel muss vor allen Regeln stehen. Der Parameter ist die URL-Adresse einer CSS-Datei. Sie können die @import-Direktive auch in einer CSS-Datei verwenden, um eine andere CSS-Datei zu importieren.

3. Verwenden Sie das Linkelement

Kopieren Sie den Code

Der Code lautet wie folgt: > Dies ist auch die am häufigsten verwendete Methode. 4. Verwenden Sie den HTTP-Nachrichtenheader, um auf das Stylesheet zu verlinken. Sie können das Linkfeld des HTTP-Nachrichtenheaders verwenden, um auf ein externes Stylesheet zu verlinken.

Code kopieren

Der Code lautet wie folgt:

Link: ; rel=stylesheet; //Äquivalent zu HTTP-Header Ein Link, der mehrere Stylesheets miteinander verknüpft, wobei der Link im HTTP-Header Vorrang vor dem Link im HTML-Dokument (im Head-Element) hat.