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
Bootstrap 3.0-Lernunterlagen für Anfänger
Als ersten Artikel dieser Studiennotiz beginnen w...
Implementierungsmethode für die Datenspeicherung im WeChat-Applet
Inhaltsverzeichnis Globale Variable „globalData“ ...
Win10 Docker-Toolsbox-Tutorial zum Erstellen einer PHP-Entwicklungsumgebung
Bild herunterladen Docker-Pull MySQL:5.7 docker p...
So passen Sie mit CSS einen schöneren Link-Prompt-Effekt an
Vorschlag: Das möglichst häufige handschriftliche ...
Ideen und Praxis einer mehrsprachigen Lösung für ein Vue.js-Frontend-Projekt
Inhaltsverzeichnis 1. Welche Inhalte müssen üblic...
So verwenden Sie den Befehl sed, um bestimmte Zeilen einer Datei effizient zu löschen
Vorwort Wenn wir bestimmte Zeilen in einer Datei ...
Drei Vue-Slots zur Lösung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten
Inhaltsverzeichnis Vorwort Umgebungsvorbereitung ...
So installieren Sie MySQL 5.7 unter Ubuntu und konfigurieren den Datenspeicherpfad
1. MySQL installieren Dieser Artikel wird über AP...
Fallstudie zum JavaScript DOMContentLoaded-Ereignis
DOMContentLoaded-Ereignis Es wird buchstäblich au...
Markup-Validierung für Doctype
Aber vor kurzem habe ich festgestellt, dass die Ve...
Zusammenfassung der Wissenspunkte im Zusammenhang mit Null (IFNULL, COALESCE und NULLIF) in MySQL
Dieser Artikel erläutert anhand von Beispielen di...
Teilen Sie 10 der neuesten Web-Frontend-Frameworks (Übersetzung)
In der Welt der Webentwicklung sind Frameworks wei...
Grafisches Tutorial zur Installation und Konfiguration von MySQL Community Server 8.0.12
MySQL 8 bringt völlig neue Erfahrungen mit sich, ...
Detaillierte Erklärung der HTML-Style-Tags und der zugehörigen CSS-Referenzen
HTML-Style-Tag Stil-Tag - Verwenden Sie dieses Ta...
Techniken zur Optimierung von MySQL-Paging-Abfragen
In Anwendungen mit Paging-Abfragen sind Abfragen,...