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

Tutorial zum binären Suchbaumalgorithmus für JavaScript-Anfänger

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

Tutorial zum binären Suchbaumalgorithmus für JavaScript-Anfänger

So installieren Sie Oracle auf Windows Server 2016

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

Detaillierte Schritte zur Verwendung von Arthas in einem Docker-Container

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17

Detaillierte Erklärung der MySQL-Halbsynchronisierung

Vue+Swiper realisiert Timeline-Effekt

Docker-Bindung mit fester IP/Hostübergreifender Container-Gegenzugriffsvorgang

Detaillierte Erklärung zur Verwendung von Vue-Mixin

Löschen Sie den Image-Vorgang von „none“ in Docker-Images

Artikel empfehlen

Detailliertes Tutorial zur Installation und Konfiguration von Nginx unter Centos7

Detaillierte Erläuterung der Galera-Cluster-Bereitstellung im Clustermodus von MySQL

Lösung zur Deinstallation von Python und Yum im CentOs-System

Kurze Analyse des MySQL-Zeichensatzes, der Datenbankwiederherstellungsfehler verursacht

Eine kurze Diskussion darüber, ob MySQL eine Funktion ähnlich der nvl von Oracle haben kann

So verwenden Sie das Docker-Plugin, um Projekte remote auf Cloud-Servern in IDEA bereitzustellen

Detaillierte Untersuchung des Problems der Array-Deduplizierung in JavaScript

Detaillierte Analyse des binlog_format-Modus und der Konfiguration in MySQL

Tudou.com Frontend-Übersicht

Detaillierte Erklärung gängiger Docker Compose-Befehle

Implementierung integrierter Module und benutzerdefinierter Module in Node.js

Zwei Möglichkeiten zur Verwendung von React in React HTML

Verwendung von Vue3-Seiten, Menüs und Routen

Asynchrone Programmierung in Javascript: Verstehen Sie Promise wirklich?

Einführung in den Prozess zum Erstellen eigener FTP- und SFTP-Server