Detaillierte Erklärung der 4 Möglichkeiten zum Importieren von CSS-Dateien: inline, inline, extern und importiert

Detaillierte Erklärung der 4 Möglichkeiten zum Importieren von CSS-Dateien: inline, inline, extern und importiert

CSS-Importmethode - Inline

Durch das Style-Tag-Attribut wird das CSS Schlüssel-Wert-Paar direkt in den Tag geschrieben

<p style="Breite: 100px;Höhe: 100px;Hintergrund: rot;"></p>
 <!--Hinweis: Dieser Code beschreibt einen Container mit einer Breite und Höhe von 100px und einem roten Hintergrund-->

CSS-Importmethode - eingebettet (embedded)

Verwenden Sie das Style-Tag, um CSS-Attributnamen und Attributwerte in die HTML-Seite einzuführen. Normalerweise wird das Style-Tag im Head-Tag platziert. Warum sollten CSS-Stile im Head-Tag platziert werden? Weil der Code von oben nach unten ausgeführt wird. Wenn zuerst die Struktur geladen wird, sieht der Benutzer trockenen Inhalt ohne Verschönerung. Zuerst den Stil und dann die Struktur zu laden ist wie ein Kind, das mit Kleidung geboren wird!

 <Kopf>
     <style type="text/css">
        P{
             Breite: 100px; Höhe: 100px; Hintergrund: rot;
         }
     </Stil>
 </Kopf>

Der obige Code beschreibt ebenfalls einen Container mit einer Breite und Höhe von 100px und einem roten Hintergrund, dieser wird jedoch eingebettet eingeführt!

Andere CSS-Importmethode als Kette

Integrieren Sie unabhängige CSS-Dateien in HTML-Seiten über Link-Tags

<link rel="stylesheet" type="text/css" href="./style.css">

rel="stylesheet" beschreibt die Beziehung zwischen der aktuellen Seite und dem durch href angegebenen Dokument, was bedeutet, dass das durch href verknüpfte Dokument eine neue Stiltabelle ist, und type="text/css" gibt den MINME-Typ an, bei dem es sich um ein CSS-Dokument handelt. href="./style.css" gibt den Speicherort des verknüpften Dokuments an

CSS-Importmethode

<style type="text/css">
     @import url("style.css");
</Stil>

Führen Sie eine separate CSS-Datei über @import url ein. url("style.css") gibt den Speicherort des verknüpften Dokuments an

Damit ist dieser Artikel über die vier Möglichkeiten zum Importieren von CSS-Dateien abgeschlossen: Inline, Inline, Extern und Importiert. Weitere Informationen zu CSS-Importmethoden finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<:  Docker startet den Implementierungsprozess der MySQL-Konfiguration

>>:  Unsere Gedanken zur Karriere als UI-Ingenieur

Artikel empfehlen

Quickjs kapselt JavaScript-Sandbox-Details

Inhaltsverzeichnis 1. Szenario 2. Vereinfachen Si...

HTML-Beispielcode zur Implementierung des Tab-Wechsels

Tab-Umschalten ist auch eine gängige Technologie ...

Beispielcode zur Implementierung eines 3D-Rotationseffekts mit reinem CSS

Verwenden Sie hauptsächlich die Eigenschaften „pr...

Methodenbeispiel zum sicheren Abrufen tiefer Objekte von Object in Js

Inhaltsverzeichnis Vorwort Text Parameter Beispie...

Die Bedeutung des Statuscodes im HTTP-Protokoll

Ein Statuscode, der eine vorläufige Antwort anzei...

So implementieren Sie Web-Stresstests mit Apache Bench

1. Einführung in Apache Bench ApacheBench ist ein...

Sortieren von MySQL-Aggregatfunktionen

Inhaltsverzeichnis MySQL-Ergebnissortierung - Agg...

Schleifenmethoden und verschiedene Durchlaufmethoden in js

Inhaltsverzeichnis for-Schleife While-Schleife do...

Detaillierte Erklärung der KeepAlive-Verwendung in der Vue-Frontend-Entwicklung

Inhaltsverzeichnis Vorwort Keep-Avlive-Hook-Funkt...

Verwendung der MySQL-Zeitdifferenzfunktionen TIMESTAMPDIFF und DATEDIFF

Verwendung der Zeitdifferenzfunktionen TIMESTAMPD...

Lebenszyklus und Ausführungsreihenfolge von React-Class-Komponenten

1. Zwei Möglichkeiten zum Definieren von Reaktion...

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Inhaltsverzeichnis 1. beforeunload-Ereignis 2. Er...

So legen Sie mit CSS eine Hintergrundunschärfe fest

Beim Erstellen einiger Seiten müssen wir häufig H...