Welche Möglichkeiten gibt es, CSS zu importieren? Was ist der Unterschied zwischen Link und @import? Wie wählt man

Ich habe gesehen, dass die Taobao-Webseite Import verwendet, während viele Websites Links verwenden. Natürlich gibt es auch einige Websites mit einfacheren Seiten und viel Verkehr, die CSS direkt in den HTML-Code schreiben? Was ist der Unterschied zwischen ihnen? Ist es besser, für CSS Import oder Link zu verwenden? Einen allgemeinen Eindruck habe ich aus dem Classic-Forum und einer anderen Website gewonnen.
Die meisten Taobao-Seiten sind folgendermaßen geschrieben :

Code kopieren

Der Code lautet wie folgt:

Viele Websites verwenden Links :

Code kopieren

Der Code lautet wie folgt:

Websites wie Google, Baidu, 163 usw. werden alle direkt auf die Webseiten geschrieben. Der Vorteil der Verwendung von Links und Importen besteht natürlich darin, dass sie leicht zu verwalten sind, aber bei langsamer Netzwerkgeschwindigkeit treten Ladeunterbrechungen auf, die zu Seitenlayoutfehlern führen.
Sie haben die gleiche Funktion, der einzige Unterschied besteht darin, dass sie unterschiedlichen Zwecken dienen.
@import für CSS
Der Link dient der aktuellen Seite. Einige Internetnutzer in Blue Classic sagten, dass @import zuerst ausgeführt wird.
+++++++++++++++++++++++++++++++++++++++++++++++++
Der Unterschied zwischen Link und @import in extern referenziertem CSS Ich habe in den letzten beiden Tagen gerade mehrere Möglichkeiten zum Laden von CSS in XHTML aufgeschrieben, wobei extern referenziertes CSS in zwei Arten unterteilt wird: Link und @import.
Im Wesentlichen dienen beide Methoden zum Laden von CSS-Dateien, es gibt jedoch subtile Unterschiede.
Unterschied 1: Unterschiede zwischen den Vorfahren
Link ist ein XHTML-Tag, während @import eine vollständig von CSS bereitgestellte Methode ist.
Neben dem Laden von CSS kann das Link-Tag auch viele andere Dinge tun, z. B. RSS definieren, Rel-Verbindungsattribute definieren usw., während @import nur CSS laden kann.
Unterschied 2: Unterschied in der Ladereihenfolge Wenn eine Seite geladen wird (d. h. wenn sie vom Betrachter durchsucht wird), wird das vom Link referenzierte CSS gleichzeitig geladen, während das von @import referenzierte CSS erst geladen wird, wenn die gesamte Seite heruntergeladen wurde. Wenn Sie also eine Seite durchsuchen, die @import zum Laden von CSS verwendet, wird manchmal zunächst kein Stil angezeigt (er flackert), was bei langsamer Netzwerkgeschwindigkeit ziemlich deutlich wird.
Unterschied 3: Unterschied in der Kompatibilität Da @import in CSS2.1 vorgeschlagen wurde, wird es von älteren Browsern nicht unterstützt. @import kann nur von IE5 und höher erkannt werden, während das Link-Tag dieses Problem nicht hat.
Unterschied 4: Unterschied bei der Verwendung von DOM zur Stilsteuerung Wenn Sie JavaScript zur DOM-Steuerung zum Ändern des Stils verwenden, können Sie nur das Link-Tag verwenden, da @import nicht über DOM steuerbar ist.
Unterschied 5: @import kann verwendet werden, um andere Stylesheets in CSS zu importieren . Sie können beispielsweise ein Haupt-Stylesheet erstellen und andere Stylesheets in das Haupt-Stylesheet importieren.
Dies sind im Wesentlichen die Unterschiede (wenn es noch weitere Unterschiede gibt, sagen Sie es mir bitte und ich werde sie hinzufügen), der Rest ist gleich. Aus der obigen Analyse geht hervor, dass es besser ist, das Link-Tag zu verwenden.

<<: Als der Interviewer nach dem Unterschied zwischen char und varchar in mysql fragte

>>: Docker generiert Bilder über Container und übermittelt DockerCommit im Detail

HTML-Beispielcode zur Implementierung des Tab-Wechsels

Welche Möglichkeiten gibt es, CSS zu importieren? Was ist der Unterschied zwischen Link und @import? Wie wählt man

HTML-Beispielcode zur Implementierung des Tab-Wechsels

Über die MariaDB-Datenbank unter Linux

Interviewer stellen häufig Fragen zum Lebenszyklus von React

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.13 auf dem Mac

Vue verwendet Better-Scroll, um ein Beispiel für eine horizontale Scroll-Methode zu erreichen

Detaillierte Erläuterung der Verwendung von Gulp.js, einem leistungsstarken Tool für die Front-End-Aufgabenerstellung

js, css, html bestimmen die verschiedenen Versionen des Browsers

Detaillierte Erklärung, wie Sie den Speicherverbrauch in MySql reduzieren können

Detaillierte Erläuterung der Verwendung des gemeinsam genutzten Speichers in Nginx

Eine kurze Diskussion über MySQL-Backup und -Wiederherstellung für eine einzelne Tabelle

Artikel empfehlen

$nextTick-Erklärung, die Sie auf einen Blick verstehen

Dropdown-Menü implementiert durch HTML+CSS3+JS

JavaScript fügt Ereignis-Listener zur Ereignisdelegierung in Batches hinzu. Detaillierter Prozess

So verwenden Sie JS zum Parsen des Excel-Inhalts in der Zwischenablage

Eine kurze Analyse und Aufschlüsselung der Vor- und Nachteile von drei Baumstrukturtabellendesigns in MySQL

Wissenspunkte zum Prinzip der MySQL-Join-Abfrage

Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows

Verwendung des Linux-Datumsbefehls

Centos7.3 startet oder führt beim Booten automatisch angegebene Befehle aus

Analyse der Fallstricke beim Rundungsvorgang der ROUND-Funktion in MySQL

So führen Sie in 1 Minute ein reibungsloses Upgrade und Rollback der Nginx-Version durch

Eine kurze Einführung in MySQL-Funktionen

React implementiert eine hochadaptive virtuelle Liste

Drei Möglichkeiten zur Kommunikation zwischen React-Komponenten (einfach und benutzerfreundlich)

W3C Tutorial (5): W3C XML Aktivitäten