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

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

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

Deutsch: Ein Link-Tag vervollständigt href im IE automatisch

Detaillierte Erklärung der JS-Ereignisdelegation

Detaillierte Erklärung des Workbench-Beispiels in MySQL

MySQL Serie 4 SQL-Syntax

Mysql-Beispiel für die Aufteilung in mehrere Zeilen und Spalten durch bestimmte Symbole

Zusammenfassung des Front-End-Wissens im Gokudō-Spiel

Vergleich der Vorteile von vue3 und vue2

Detaillierte Analyse des MySQL 8.0-Speicherverbrauchs

So erstellen Sie einen Trigger in MySQL

Erklären, wie die SQL-Effizienz analysiert wird

Artikel empfehlen

Was macht die MySQL-Datenbank?

So verwenden Sie jconsole zum Überwachen von Remote-Tomcat-Diensten

Detaillierte grafische Erklärung der MySQL-Abfragesteuerungsanweisungen

Wozu dient das Feld „enctype“ beim Hochladen von Dateien?

So konfigurieren Sie die Linux-Firewall und öffnen die Ports 80 und 3306

Vue erzielt den Top-Effekt durch V-Show

Tiefgreifendes Verständnis des benutzerdefinierten Routing-Managements von React Native

Remote-Bereitstellung von Maven-Projekten && So konfigurieren Sie eine Datenbankverbindung mit Tomcat

Was ist Webdesign

Vue implementiert Akkordeoneffekt

Zusammenfassung der mobilen Anpassungslösung von webpack

So installieren Sie Nginx in CentOS

Fallstudie zu JavaScript Anti-Shake

Beschreibung der Schreibmethode des Foreach-Arrays in Vue und des Traversal-Arrays in js

Linux entfernt node.js vollständig und installiert es über den Befehl yum neu