Eine kurze Analyse der vier Importmethoden und Prioritäten in CSS

Erstens: 4 Möglichkeiten, CSS einzuführen

Es gibt vier Möglichkeiten, CSS einzuführen: Inline-Stil, eingebetteter Stil, Link-Stil und Import-Stil.

1. Inline-Stile

Die direkteste und einfachste Möglichkeit besteht darin, style="" direkt im HTML-Tag zu verwenden, zum Beispiel:

<p Stil="Farbe:#F00; "></p>

Nachteile: HTML-Seiten sind nicht rein, die Dateigröße ist groß, sie sind für das Spider-Crawling nicht förderlich und die anschließende Wartung ist umständlich.

2. Inline-Stile

Inline-Style bedeutet, CSS-Code zwischen <head></head> zu schreiben und ihn mit <style></style> zu deklarieren, zum Beispiel:

<style type="text/css">
Körper, Div, a, Bild, p {Rand: 0; Polsterung: 0;}
</Stil>

Vorteile und Nachteile: Die Seite verwendet öffentlichen CSS-Code, der für jede Seite einzeln definiert werden muss. Wenn eine Website viele Seiten hat, wird jede Datei größer und ist später schwer zu pflegen. Wenn es wenige Dateien und wenig CSS-Code gibt, ist dieser Stil immer noch sehr gut.

3. Link-Stil

Der Link-Stil ist der am häufigsten verwendete und praktischste Stil. Sie müssen lediglich <link…/> zwischen <head></head> wie folgt hinzufügen:

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

Vorteile und Nachteile: Es realisiert die vollständige Trennung von Seiten-Framework-Code und Präsentations-CSS-Code, was die Vorproduktion und Nachwartung sehr bequem macht

4. Importstil (nicht empfohlen)

Das Importieren von Stilen ähnelt dem Verknüpfen von Stilen. Der Stil @import wird zum Importieren von CSS-Stylesheets verwendet. Wenn HTML initialisiert wird, wird es in die HTML- oder CSS-Datei importiert und wird Teil der Datei, ähnlich wie der zweite eingebettete Stil.

@import wird in HTML wie folgt verwendet:

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

@import wird in CSS wie folgt verwendet:

@import url(style.css);

Zweitens: Die Priorität der vier CSS-Einführungsmethoden

1. Näheprinzip

2. Theoretisch: Inline > Einbetten > Link > Importieren

3. Tatsächlich: Einbetten, Verknüpfen und Importieren befinden sich im selben Dateikopf. Je näher am entsprechenden Code liegt, desto höher ist die Priorität

Erfahrung:

1. Wenn die gleiche CSS-Definition auf zwei CSS-Dateien verteilt ist, wird der Stil aus der später eingeführten CSS-Datei übernommen.
2. Es ist am besten, das CSS von Komponenten von Drittanbietern vor das HTML und das angepasste CSS hinter das HTML zu stellen.

Zusammenfassen

Damit ist dieser Artikel über die vier Importmethoden und Prioritäten in CSS abgeschlossen. Weitere Informationen zur Priorität von CSS-Importmethoden finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Der Prozess des Erstellens und Konfigurierens der Git-Umgebung in Docker

>>: Zusammenfassung der Überlegungen zum Schreiben von Web-Frontend-Code

Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios

Eine kurze Analyse der vier Importmethoden und Prioritäten in CSS

Detaillierte Erläuterung des Schnittstellenanforderungsmanagements basierend auf Typescript und Axios

So zeigen Sie JSON-Daten auf einer HTML-Seite an und formatieren sie

Detaillierte Erläuterung der MySQL-Installation und der neuen Kennwortauthentifizierungsmethode in MySQL 8.0

Erstellen Sie einen Tomcat9-Cluster über Nginx und realisieren Sie die Sitzungsfreigabe

Docker stop stoppt/remove löscht alle Container

Dieser Artikel zeigt Ihnen das Prinzip der MySQL Master-Slave-Synchronisation

Import-, Export-, Sicherungs- und Migrationsvorgänge für Docker-Images

Vue führt weltweit SCSS (Mixin) ein

Die Standard-HTML-Schreibmethode unterscheidet sich von der von Dreamweaver automatisch generierten

Tiefgreifendes Verständnis der Verwendung des Schlüsselworts „infer“ in Typescript

Artikel empfehlen

So installieren Sie MySQL 8.0 und melden sich bei MySQL unter MacOS an

Vue macht Div-Höhe verschiebbar

Ubuntu 20.04: Beispiel zum Ändern der IP-Adresse

Was ist BFC? So löschen Sie Floats mithilfe von CSS-Pseudoelementen

Detaillierte Erläuterung der Nginx-Zugriffsbeschränkungskonfiguration

Verwenden von JavaScript zum Implementieren von Karusselleffekten

Detailliertes Tutorial zur VMware-Installation des Linux CentOS 7.7-Systems

Unterschiede zwischen MySQL CHAR und VARCHAR beim Speichern und Lesen

CSS-Standard: Eigenschaft „vertical-align“

HTML erstellt eine einfache und schöne Anmeldeseite

WeChat Mini-Programm QR-Code-Generierungstool weapp-qrcode Detaillierte Erklärung

Detaillierte Erläuterung der kleinen Zustandsverwaltung basierend auf React Hooks

Detaillierte Erklärung des Unterschieds zwischen WeChat-Applet Bindtap und Catchtap

Analyse der MySql CURRENT_TIMESTAMP-Funktion anhand eines Beispiels

Grafisches Tutorial zur Installation und Konfiguration von MySQL Server 5.7.20