Ein genauerer Blick auf die Unterschiede zwischen Link und @import
|
Es gibt drei Hauptmethoden, CSS auf einer Seite zu verwenden: Inline-Hinzufügen von Stilattributwerten, Inline-Aufruf im Seitenkopf und Aufruf über externe Links. Es gibt zwei Arten externer Referenzen: Link und @import. Es gibt zwei Möglichkeiten, CSS extern zu referenzieren: Link und @import: XML/HTML Code Code kopieren Der Code lautet wie folgt:<link rel="stylesheet" rev="stylesheet" href="CSS-Datei" type="text/css" media="all" /> XML/HTML Code Code kopieren Der Code lautet wie folgt:<style type="text/css" media="Bildschirm"> @import url("CSS-Datei"); </Stil> Beides sind Möglichkeiten zur externen Referenzierung von CSS, es gibt jedoch einige Unterschiede : Unterschied 1: Link ist ein XHTML-Tag. Neben dem Laden von CSS kann es auch andere Dinge wie RSS definieren; @import gehört zur Kategorie CSS und kann nur CSS laden. Unterschied 2: Wenn der Link auf CSS verweist, wird er gleichzeitig mit der Seite geladen. @import muss geladen werden, nachdem die Seite vollständig geladen wurde. Unterschied 3: Link ist ein XHTML-Tag und hat keine Kompatibilitätsprobleme; @import wurde in CSS2.1 vorgeschlagen und wird von Browsern mit niedrigeren Versionen nicht unterstützt. Unterschied 4: ink unterstützt die Verwendung von Javascript zur DOM-Steuerung zum Ändern von Stilen, @import hingegen nicht. Ergänzung: Optimale Schreibmethode für @import Es gibt im Allgemeinen die folgenden Möglichkeiten, @import zu schreiben: @import 'style.css' // Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 erkennen dies nicht @import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4 erkennt nicht @import url(style.css) //Windows NS4, Macintosh NS4 erkennt nicht @import url('style.css') // Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 erkennen nicht @import url("style.css") //Windows NS4, Macintosh NS4 erkennen dies nicht. Aus der obigen Analyse wissen wir, dass @import url(style.css) und @import url("style.css") die beste Wahl für die kompatibelsten Browser sind. Aus Sicht der Byte-Optimierung wird @import url(style.css) am meisten empfohlen. Der Unterschied zwischen Link und @import in externen Referenz-CSS Ich habe gerade in diesen zwei Tagen mehrere Möglichkeiten zum Laden von CSS in XHTML geschrieben. Unter ihnen werden externe Verweise auf CSS in zwei Methoden unterteilt: Link und @import. Im Wesentlichen dienen beide Methoden zum Laden von CSS-Dateien, es gibt jedoch subtile Unterschiede. Unterschied 1 : Der Unterschied zwischen unseren 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 wartet, bis die gesamte Seite heruntergeladen ist, bevor es geladen wird. Wenn Sie also eine Seite durchsuchen, die @import zum Laden von CSS verwendet, wird manchmal zunächst kein Stil angezeigt (er flackert), und dies ist ziemlich offensichtlich, wenn die Netzwerkgeschwindigkeit langsam ist (Dream City lädt CSS unter Verwendung von @import. Wenn ich während des Herunterladens die Dream City-Webseite durchsuche, tritt das obige Problem auf). 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 Steuerung von Stilen. Wenn Sie JavaScript verwenden, um DOM zum Ändern des Stils zu steuern, können Sie nur das Link-Tag verwenden, da @import nicht über DOM gesteuert werden kann. 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. Beim Laden von CSS-Dateien bei der Erstellung standardmäßiger Webseiten sollten Sie auch das zu ladende Medium auswählen, z. B. „Bildschirm“, „Drucken“ oder „Alles“. Dies werde ich dir im CSS-Fortgeschrittenen-Tutorial vorstellen. Notiz: 1. Der Internetnutzer Comehope wies in seiner Nachricht auf einen weiteren Unterschied hin. 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, wie zum Beispiel: main.css Code kopieren Der Code lautet wie folgt:———————- @import "sub1.css"; @import "sub2.css"; sub1.css ———————- p {Farbe:rot;} sub2.css ———————- .myclass {Farbe:blau} Dies erleichtert Änderungen und Erweiterungen. Monkey-Tipp: Dies hat den Nachteil, dass dadurch zu viele HTTP-Anfragen an den Website-Server generiert werden. Früher war es eine Datei, jetzt sind es zwei oder mehr Dateien, was den Druck auf den Server erhöht. Bei Websites mit vielen Besuchern sollte dies mit Vorsicht verwendet werden. Wer Interesse hat, kann sich den Homepage- oder Spalten-Homepage-Code von Websites wie Sina anschauen. Diese schreiben CSS oder JS immer direkt in HTML, ohne externe Dateien zu verwenden. |
<<: Die Funktionen und Unterschiede zwischen deaktiviert und schreibgeschützt
>>: So finden und löschen Sie doppelte Zeilen in MySQL
Artikel empfehlen
GET POST Unterschiede
1. „Get“ wird verwendet, um Daten vom Server abzu...
So installieren Sie Docker unter Windows Server 2016
Kürzlich hat Microsoft Windows Server 2016 veröff...
svg+css oder js zum Erstellen eines Tick-Animationseffekts
Mein Chef hatte mich gebeten, ein Programm zu ers...
Detaillierte Erklärung zur Verwendung des CSS-Zeigerereignisse-Attributs
Bei der Frontend-Entwicklung stehen wir in direkt...
Ein Blick auf toolbasierte Websites: die Definition von toolbasierten Websites und eine typische Fallanalyse (Bilder und Text)
Wenn es um Tool-Websites geht, haben wir zunächst...
Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators
Inhaltsverzeichnis Überblick Objektrestattribut E...
Detaillierte Erläuterung der MySQL-Partitionsfunktion und Beispielanalyse
Zunächst: Was ist Datenbankpartitionierung? Ich h...
mysql 8.0.20 winx64.zip komprimierte Version Installations- und Konfigurationsmethode grafisches Tutorial
Das Installationstutorial der komprimierten Versi...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein...
jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts
In diesem Artikel wird der spezifische Code von j...
Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen
Inhaltsverzeichnis MySQLs current_timestamp-Falle...
So führen Sie eine reibungslose if-Beurteilung in js durch
Inhaltsverzeichnis Vorwort Code-Implementierung I...
Detaillierte Erklärung des Whereis-Beispiels zum Suchen eines bestimmten Programms in Linux
Linux findet ein bestimmtes Programm, wo ist Der ...
Schreiben eines Shell-Skripts in Ubuntu zum automatischen Start beim Booten (empfohlen)
Der Zweck des Schreibens von Skripten besteht dar...
Detaillierte Erläuterung der Redis-Persistenz, Master-Slave-Synchronisierung und Sentinel unter Linux
1.0 Redis-Persistenz Redis ist eine In-Memory-Dat...