Drei gängige Möglichkeiten zum Einbetten von CSS in HTML-Dokumente

Die folgenden drei Methoden werden häufig verwendet, um CSS in HTML zu definieren: Einbettung, Verlinkung und Inline

1. Eingebettet

Verwenden Sie das HTML-Style-Element, um CSS-Styles in einem Dokument zu definieren.

Code kopieren

Der Code lautet wie folgt:

<Kopf>
<style type="text/css">
h1{Farbe:rot}
p{Farbe:blau}
</Stil>
<Kopf>

2. Inline

Jedes HTML-Element enthält ein Style-Attribut, mit dem der Stil direkt definiert werden kann. Dieser Stil gilt nur für den Inhalt dieses Elements und hat keine Auswirkungen auf ein anderes Element mit demselben Namen.

Code kopieren

Der Code lautet wie folgt:

<p style="color:#FFF;font-weight:bold;">Inline-Stil</p>

3. Externe Referenz

Externe Referenz bedeutet, dass das HTML-Dokument selbst keine CSS-Stile enthält, sondern dynamisch auf externe CSS-Dateien verweist, um die Präsentation des Dokuments zu definieren.

1. Verwenden Sie Anweisungen zur Stylesheet-Verarbeitung

Schreiben Sie eine Stylesheet-Anweisung an den Anfang des HTML-Dokuments

Code kopieren

Der Code lautet wie folgt:

<?xml-stylesheet type="text/css" href="mystyle.css" ?>
<html>
Anweisungserklärung
</html>

Allerdings unterstützen nur HTML-Dokumente, die im XML-Syntaxformat geschrieben sind, die Verwendung dieser Direktive. Die meisten Browser sind nur wirksam, wenn sie im XHTML- oder XML-Format gespeichert sind, und JS kann diese Art von CSS nicht verarbeiten, daher wird dies nicht empfohlen.

2. Verwenden Sie den Befehl @import

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

Code kopieren

Der Code lautet wie folgt:

Alle @import-Regeln müssen vor allen anderen @import-Regeln erscheinen. Der Parameter ist die URL 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 Link-Element

Code kopieren

Der Code lautet wie folgt:

Dies ist auch die am häufigsten verwendete Methode.

4. Verwenden Sie HTTP-Nachrichtenheader zum Verlinken auf Stylesheets

Über das Linkfeld im HTTP-Nachrichtenheader können Sie auf ein externes Stylesheet verweisen.

Code kopieren

Der Code lautet wie folgt:

link:<meinstyle.css>;rel=stylesheet;
//Entspricht <link rel="stylesheet" href="css-url" type="text/css" >

Zum Verknüpfen mehrerer Stylesheets können im HTTP-Header mehrere Links verwendet werden, wobei der Link im HTTP-Header Vorrang vor dem Link im HTML-Dokument (im Head-Element) hat.

<<: Der gesamte Prozess der IDEA-Integration von Docker zur Bereitstellung eines Springboot-Projekts

>>: CSS-Float-Eigenschaftsdiagramm, Details der Float-Eigenschaft

So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

Drei gängige Möglichkeiten zum Einbetten von CSS in HTML-Dokumente

So zeichnen Sie eine vertikale Linie zwischen zwei Div-Tags in HTML

So führen Sie py-Dateien direkt unter Linux aus

HTML verwendet Formular-Tags, um den Beispielcode der Registrierungsseite zu implementieren

Detaillierte Erläuterung der Funktionen und Verwendung allgemeiner MySQL-Speicher-Engines

Mysql verwendet Einfügen, um mehrere Datensätze einzufügen und Daten stapelweise hinzuzufügen

Entwickeln Sie eine Vue-Komponente, die Iframe kapselt

Einfaches MySQL-Beispiel zum Sortieren chinesischer Schriftzeichen nach Pinyin

Teilen Sie 5 hilfreiche CSS-Selektoren, um Ihr CSS-Erlebnis zu bereichern

IIS und APACHE implementieren die HTTP-Umleitung auf HTTPS

Beispielcode, der gängige Grafikeffekte in CSS-Stilen zeigt

Artikel empfehlen

So verwenden Sie CSS, um zwei in der Mitte fixierte und adaptive Spalten zu erreichen

Einführung in die Verwendung mehrerer spezieller Attribut-Tags in HTML

JS implementiert die Benutzerregistrierungsschnittstellenfunktion

Verwenden Sie SWFObject, um das Browserkompatibilitätsproblem beim Einfügen von Flash in HTML perfekt zu lösen

So stellen Sie Confluence und Jira-Software in Docker bereit

Implementierung von Linux-Dateisystemvorgängen

Detaillierte Erklärung der JavaScript-Ereignisse onblur und onfocus

uniapp realisiert die Aufnahme-Upload-Funktion

CocosCreator Universal Framework Design Network

Eine vorläufige Studie zum Vue-Unit-Testing

CentOS 6 Kompilieren und installieren Sie ZLMediaKit-Analyse

Zusammenfassung der Lösungen für MySQL, das „Gruppieren nach“ nicht unterstützt

React-Beispielcode zur Parameterübergabe für nicht über- und untergeordnete Komponenten

JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

Detailliertes Tutorial zur Installation von Mysql5.7.19 auf Centos7 unter Linux