Wir wissen, dass es zwei Möglichkeiten gibt, auf externes CSS in Webseiten zu verweisen, nämlich @import und link Wir hören oft, dass es besser ist, einen Link zu verwenden, um CSS einzuführen, aber wissen Sie warum?
Link
Der Link dient dazu, externes CSS mit Webseiten zu verbinden
@Import
Der Unterschied zwischen Import und Link besteht darin, dass mehrere andere CSS-Dateien in eine CSS-Datei eingefügt werden können
Warum @import verwenden?
Die meisten Leute verwenden @import, weil alte Browser @import nicht unterstützen, was bedeutet, dass wir @import verwenden können, um CSS-Stile einzuführen, die nur moderne Browser analysieren können.
Verwenden Sie den folgenden Code, um zu verhindern, dass die Browser IE6 und niedriger das CSS analysieren (die Methoden unter IE6 sind in einem schlechten Zustand und werden hier weggelassen).
@import url(../style.css) screen; Ein weiterer Hauptgrund ist, wenn Ihre Webseite mehrere externe CSS-Dateien einführen muss. Sie können einen Link verwenden, um ein CSS einzuführen, und dann die @import-Methode in dieser CSS-Datei verwenden Mehrere andere CSS-Dateien scheinen einfacher zu verwalten.
Warum Link verwenden?
Einer der Hauptgründe für die Verwendung der Link-Methode besteht darin, dass Sie Benutzern ermöglichen können, CSS-Stile zu wechseln. Moderne Browser wie Firefox, Opera und Safari unterstützen alle das Attribut rel="alternate stylesheet" (das heißt, Sie können verschiedene Stile auswählen). im Browser). Natürlich können Sie auch Javascript verwenden, um den IE zu aktivieren, um Benutzer beim Ändern von Stilen zu unterstützen.
Wenn Sie es nicht verstehen, rufen Sie bitte diese Seite auf und klicken Sie in Firefox auf „Ansicht – Seitenstil“.
Kleine Probleme mit @import
Wenn das Head-Tag Ihrer Webseite sehr einfach ist und nur das @import-Attribut enthält, sieht der Benutzer beim Surfen mit langsamer Internetgeschwindigkeit eine Seite ohne Stile und kann die Seite dann sehen, wenn die CSS-Datei heruntergeladen wird . Um solche Probleme zu vermeiden, müssen Sie sicherstellen, dass mindestens ein Skript- oder Link-Tag im Kopf vorhanden ist.
04-11 Update: @import verlängert die Gesamtladezeit von CSS und führt dazu, dass die Reihenfolge des Dateidownloads im IE geändert wird. Beispielsweise werden Skriptdateien, die nach @import platziert werden, vor CSS heruntergeladen.
Einzelheiten finden Sie unter http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Welche Methode sollte verwendet werden?
Derzeit scheint der Link besser für kleine Websites geeignet (oder beliebter) zu sein. Wenn wir CSS in Zukunft modularisieren müssen, werden wir natürlich definitiv @import verwenden.