So importieren Sie CSS extern

Methoden zur externen Einführung von CSS: 1. Verwenden Sie den Link, um externe CSS-Dateien aufzurufen. Tags definieren die Beziehung zwischen Dokumenten und externen Ressourcen. 2. Verwenden Sie @import, um auf externe CSS-Dateien zu verweisen.

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

Wie führe ich externes CSS ein?

Methode 1: Verwenden Sie den Link, um externe CSS-Dateien aufzurufen.

Verwenden Sie das Tag im Tag-Paar

-Tag definiert die Beziehung zwischen dem Dokument und externen Ressourcen. Der -Tag wird am häufigsten zum Verknüpfen von Stylesheets verwendet.

Grammatik:

<link rel="stylesheet" href="css文件路径" type="text/css" />

Erläuterung der Inhaltsstruktur des Link-Tags beim Verlinken auf externe CSS-Stile:

href: ist die externe Ressourcenadresse, hier ist die Adresse von CSS

rel: definiert die Beziehung zwischen dem aktuellen Dokument und das verknüpfte Dokument, hier Es handelt sich um ein externes CSS-Stylesheet, also Stylesheet

Typ: Gibt die MIME-Klasse des verknüpften Dokuments an, hier ist der Wert text/css

Hinweis:

Diese Methode lädt das CSS Datei vor dem Laden des Hauptteils der Webseitendatei, damit diese angezeigt wird. Die Webseite hat von Anfang an einen Stileffekt. Es wird nicht zuerst die nicht gestaltete Webseite und dann die gestaltete Webseite wie der importierte Stil angezeigt.

Methode 2: Verwenden Sie @import, um auf externe CSS-Dateien zu verweisen.

CSS-@import-Regeln werden verwendet, um Stilregeln aus anderen Stylesheets zu importieren. Diese Regeln müssen allen anderen Regeltypen vorangehen und @import kann nicht in Regeln einer bedingten Gruppe verwendet werden.

@Importregelsyntax

@import url("文件路径");

Hinweis:

Diese Methode lädt die CSS-Datei, nachdem die gesamte Webseite geladen wurde. Dies führt also zu einem Problem, wenn die Webseite relativ groß ist und zuerst eine nicht gestaltete Seite angezeigt wird . Nach einer Weile des Blinkens erscheint wieder der Stil der Webseite. Dies ist ein inhärenter Importfehler.

Der Unterschied zwischen den beiden Methoden zum Aufrufen externer CSS-Stile:

@import ist die von CSS bereitgestellte Syntaxregel, die nur die Funktion zum Importieren von Stylesheets hat; Link ist das von HTML bereitgestellte Tag, das nicht nur CSS laden kann Dateien, sondern definieren auch RSS- und rel-Verbindungseigenschaften usw.

Wenn die Seite geladen wird, wird gleichzeitig das durch das Link-Tag eingeführte CSS geladen. Das durch @import eingeführte CSS wird nach dem Laden der Seite geladen.

@import ist eine für CSS2.1 einzigartige Syntax, daher kann sie nur in IE5+ erkannt werden; das Link-Tag ist ein HTML-Element und weist keine Kompatibilitätsprobleme auf.

Sie können DOM über JS bedienen und Link-Tags einfügen, um den Stil zu ändern. Da die DOM-Methode auf Dokumenten basiert, können Sie @import nicht zum Einfügen von Stilen verwenden.

Das Gewicht der durch den Link eingeführten Stile ist größer als das durch @import eingeführte.

Empfohlenes Lernen: „CSS-Video-Tutorial“

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