So referenzieren Sie CSS-Dateien

Methoden zum Referenzieren von CSS-Dateien: 1. Verwenden Sie das Link-Tag, die Syntax „"; import“-Regel, Syntax „@import url(file path);“.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

1. Verwenden Sie den Link-Tag (Link-Stil).

Schreiben Sie den CSS-Code in eine separate Datei und verwenden Sie den Link-Tag, um die Datei direkt in die Seite einzuführen. Eine Seite kann das LINK-Tag mehrmals verwenden, um mehrere externe CSS-Dateien einzuführen. Achten Sie auf die gegenseitige Beeinflussung dieser CSS-Codes. Normalerweise überschreiben die später eingeführten CSS-Dateien die gleichen Effekte wie die zuvor eingeführten CSS-Dateien. Diese Methode zur Einführung von CSS ist derzeit die beliebteste. CSS-Codes können im Rahmen jeder Website geplant werden, um die Wiederverwendung und Wartung zu erleichtern. Dadurch wird der Code jedoch stark zentralisiert, und die Codemenge ist möglicherweise zu groß Es kann zu Verwirrung kommen, wenn es nicht ordnungsgemäß gepflegt wird.

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

2. Verwenden Sie @import (importieren)

Es gibt zwei Möglichkeiten, CSS-Dateien in einzuführen Wie folgt:

@import url(index2.css);

Darüber hinaus kann es auch in einer CSS-Datei verwendet werden. Die Verwendung ist wie folgt:

@import "sub.css";

Durch die Verwendung von @import zur Einführung von CSS kann der CSS-Code externer Dateien einfach eingeführt werden, was die Wartung und Planung erleichtert. Allerdings wird jedes Mal, wenn eine zusätzliche CSS-Datei eingeführt wird, eine Verbindungsanforderung an den Server hinzugefügt. Wenn die Anzahl der Besuche groß ist, muss ein Kompromiss zwischen Wartbarkeit und Leistung geschlossen werden.

Der Unterschied zwischen Link (Link) und Import (@import)

Link ist ein XHTML-Tag. Zusätzlich zum Laden von CSS kann es auch andere Transaktionen wie RSS definieren, während @import zur CSS-Kategorie gehört kann nur CSS laden;

Wenn der Link auf CSS verweist, wird er gleichzeitig mit dem Laden der Seite geladen, während @import erfordert, dass die Seite vor dem Laden vollständig geladen wird.

link ist ein XHTML-Tag und weist keine Kompatibilitätsprobleme auf, während @import in CSS2.1 vorgeschlagen wurde und von Browsern niedrigerer Versionen nicht unterstützt wird.

ink unterstützt die Verwendung von Javascript zur Steuerung des DOM zum Ändern des Stils; @import unterstützt dies nicht.

@import kann andere Stylesheets in die CSS-Datei einfügen; der Link unterstützt dies nicht.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo referenzieren Sie CSS-Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!