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 
Beispiel-Quellcode
[www.downcodes.com] Der Link dient dazu, externes CSS mit der Webseite zu verbinden. Die spezifische Form ist <link href="http://www.downcodes.com/styles.css" type="text/css" />
Beispiel-Quellcode
[www.downcodes.com] Der Unterschied zwischen Import und Link besteht darin, dass mehrere andere CSS-Dateien in eine CSS-Datei eingefügt werden können. Die spezifische Form ist <style type="text/css">@import url("http://www.downcodes.com/styles .css");</style>
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 besteht darin, dass Ihre Webseite mehrere externe CSS-Dateien einführen muss. Sie müssen einen Link verwenden, um ein CSS einzuführen, und dann die @import-Methode verwenden, um mehrere andere CSS-Dateien in diese CSS-Datei einzuführen.
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.
Kleinere Probleme mit @import. Wenn der Head-Tag Ihrer Webseite sehr einfach ist und nur das @import-Attribut enthält, sieht der Benutzer eine Seite ohne Stile und dann die CSS-Datei Sie können den richtigen Stil sehen. Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass mindestens ein Skript- oder Link-Tag im Kopf vorhanden ist.
Welche Methode sollte verwendet werden? Derzeit scheint es für kleine Websites angemessener (oder beliebter) zu sein, Link zu verwenden. Wenn wir in Zukunft CSS modularisieren müssen, werden wir natürlich definitiv @import verwenden.
Der Artikel wurde zu Lernzwecken teilweise aus „Was ist der Unterschied zwischen @import und link für CSS?“ übersetzt. Gerne hinzufügen.
