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:<Kopf> <style type="text/css"> <!--Die folgenden beiden Codezeilen haben die gleiche Wirkung @import "meinstyle.css"; @import url("mystyle.css"); --> </Stil> </Kopf> 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:<Kopf> <link rel="stylesheet" href="URL von CSS" type="text/css" > </Kopf> 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
Artikel empfehlen
Docker verwendet das Tool nsenter, um in den Container zu gelangen
Bei der Verwendung von Docker-Containern ist es b...
Analyse der Ursache des Docker-Fehlers Beendet (1) vor 4 Minuten
Docker-Fehler 1. Überprüfen Sie die Ursache Docke...
Verwenden Sie das ab-Tool, um einen API-Stresstest auf dem Server durchzuführen
Inhaltsverzeichnis 1 Eine kurze Einführung in den...
Grundlegende Anwendungsmethoden für eingebettete und externe JavaScript-Links
Inhaltsverzeichnis Grundlegende Anwendung eingebe...
jQuery realisiert dynamische Partikeleffekte
In diesem Artikel wird der spezifische Code von j...
Vue erzielt den Top-Effekt durch V-Show
html <div Klasse="nach oben" v-show=...
Vue realisiert den Produktlupeneffekt
In diesem Artikelbeispiel wird der spezifische Co...
So verwenden Sie position:sticky, um das Problem kleiner Programme, die an der Decke haften, perfekt zu lösen
Kürzlich bestand der Kunde eines Projekts darauf,...
Übersicht über die Unterschiede zwischen Linux TTY/PTS
Wenn wir einen Buchstaben auf der Tastatur eingeb...
Windows Server 2016 – Kurzanleitung zur Bereitstellung von Remotedesktopdiensten
Jetzt unterstützt der 2016-Server den Multi-Site-...
Vue integriert PDF.js, um eine PDF-Vorschau zu implementieren und Schritte zum Hinzufügen von Wasserzeichen durchzuführen
Inhaltsverzeichnis Ergebnisse erzielen Einführung...
Docker verwendet Dockerfile, um die Node.js-Anwendung zu starten
Schreiben einer Docker-Datei Am Beispiel des von ...
Installation und Bereitstellung des MySQL Routers
Inhaltsverzeichnis 01 Einführung in MySQL Router ...
Eine kurze Diskussion über mehrere Spezifikationen der JS-Frontend-Modularisierung
Inhaltsverzeichnis Vorwort Der Wert der modularen...
Zwei Möglichkeiten, das WeChat-Miniprogramm mit Tencent Maps zu verbinden
Ich habe kürzlich ein WeChat-Applet geschrieben u...