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

Lassen Sie sich die tiefe Kopie von js verstehen

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

Lassen Sie sich die tiefe Kopie von js verstehen

So aktualisieren Sie Ubuntu 20.04 LTS unter Windows 10

Analysieren der Knotenereignisschleife und der Nachrichtenwarteschlange

Detailliertes Installations- und Konfigurationstutorial zum MySQL-Flashback-Tool binlog2sql

Verwenden Sie CSS3, um einen Fortschrittsbalkeneffekt zu erzielen und dynamisch Prozentsätze hinzuzufügen

Nginx-Stream-Konfigurationsproxy (Nginx TCP/UDP-Lastausgleich)

Detaillierte Erläuterung der Verwendung von Echart-Diagrammen im Front-End und Back-End des Projekts

TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial

MySQL-Lerndatenbankbetrieb DML ausführliche Erklärung für Anfänger

Docker verwendet das Tool nsenter, um in den Container zu gelangen

Artikel empfehlen

CSS-Lösung für mehrspaltiges Layout

10 Arten von Ladeanimationen mit CSS3 implementiert. Eine auswählen und los geht‘s?

CSS3 erstellt 3D-Würfel-Ladeeffekte

SQL-Implementierung von LeetCode (177. N-höchstes Gehalt)

Die wichtigsten Unterschiede zwischen MySQL 4.1/5.0/5.1/5.5/5.6

Detaillierte Erläuterung der drei Methoden zum Abfangen von JS-Zeichenfolgen

12 nützliche Array-Tricks in JavaScript

Das WeChat-Applet implementiert einen einfachen Chatroom

Analyse der Initialisierung des Quellcodes des Linux-Kernel-Schedulers

Beispielcode zur Implementierung einer Anmelde- und Registrierungsvorlage in Vue

Detaillierte Erklärung von Promises in JavaScript

Einige Hinweise zur Installation eines Fastdfs-Images im Docker

Vue verbessert die Seitenantwortgeschwindigkeit durch Lazy Loading

Implementierung einer zeitgesteuerten Seitenaktualisierung oder Weiterleitung basierend auf Metadaten

Tomcat unterbricht den übergeordneten Delegierungsmechanismus, um eine Isolierung von Webanwendungen zu erreichen