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
Ein Artikel zum Umgang mit Mysql-Datums- und Zeitfunktionen
Inhaltsverzeichnis Vorwort 1. Aktuelle Uhrzeit er...
Eine kurze Erläuterung der $notify-Punkte des Elements
Meine ursprüngliche Absicht war, die $notify-Bena...
Detaillierte Erklärung der Entwurfsmuster des JavaScript-Frameworks
Inhaltsverzeichnis mvc MVP mvv Die Quelle von Vue...
Zwei spezielle Werte in CSS werden verwendet, um die Vererbungs- und Initialisierungsmethoden der Kaskade zu steuern
Es gibt zwei spezielle Werte, die jeder Eigenscha...
Nginx beschränkt den IP-Zugriff auf bestimmte Seiten
1. Um allen IP-Adressen den Zugriff auf die drei ...
So verwenden Sie MQTT im Uniapp-Projekt
Inhaltsverzeichnis 1. Referenz-Plugins im Uniapp ...
Flammenanimation mit CSS3 umgesetzt
Ergebnisse erzielen Implementierungscode html <...
Natives JS zum Erzielen eines nahtlosen Karusselleffekts
Native js realisiert den Karusselleffekt (nahtlos...
Lernen Sie MySQL Index Pushdown in fünf Minuten
Inhaltsverzeichnis Vorwort Was ist Index-Pushdown...
Detaillierte Erklärung zum Erstellen eines FTP-Servers unter Ubuntu (Erfolg garantiert)
1. Heute Nachmittag musste ich aufgrund der Anfor...
Tutorial der MySQL-Reihe zum Verständnis der Verwendung der Schlüsselwörter „union“ (alles), „limit“ und „exists“
Inhaltsverzeichnis 1.union: Sie können Abfrageerg...
Implementierungsbeispiel für den Linux-Befehl „tac“
1. Befehlseinführung Der Befehl tac (umgekehrte R...
Front-End-Implementierung der GBK- und GB2312-Kodierung und Dekodierung von Zeichenfolgen (Zusammenfassung)
Vorwort Bei der Entwicklung eines Projekts stieß ...
JavaScript-Closures erklärt
Inhaltsverzeichnis 1. Was ist ein Abschluss? 2. D...
Lösen Sie das Problem, dass der Container nach dem Docker-Lauf „Beendet (0)“ anzeigt.
Ich habe ein Dockerfile für OpenResty auf CentOS7...