Heim >Web-Frontend >HTML-Tutorial >Der Unterschied zwischen Link und @import
Wir alle wissen, dass sowohl Link als auch @import CSS-Stylesheets einführen können. Was ist also der Unterschied zwischen den beiden? Lassen Sie uns zunächst über ihre jeweiligen Link-Methoden sprechen und dann über ihre Unterschiede~~~
So verlinken Sie:
<span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="index.css"</span><span style="color: #0000ff;">></span>
@import Importmethode:
<span style="color: #0000ff;"><</span><span style="color: #800000;">style </span><span style="color: #ff0000;">type</span><span style="color: #0000ff;">="text/css"</span><span style="color: #0000ff;">></span><span style="background-color: #f5f5f5; color: #800000;"> @import url('index.css'); </span><span style="color: #0000ff;"></</span><span style="color: #800000;">style</span><span style="color: #0000ff;">></span>
Priorität: Stil einbetten > Stylesheet importieren (Link in Stylesheet)
Die Importmethode ist der Verknüpfungsmethode sehr ähnlich, aber tatsächlich entspricht sie der im internen Stylesheet. Trotzdem ist ihre Priorität immer noch niedriger als die des internen Stylesheets und sie ist dieselbe Als verknüpfter Stil hängt die Priorität der Tabelle von der Reihenfolge der Position ab. Wer später definiert wird, hat eine höhere Priorität .
Hinweis: Beim Importieren eines externen Stylesheets muss sich dessen Position oben im Stylesheet befinden, also vor anderen Stilen .
Sie haben insgesamt 5 Unterschiede (soweit ich weiß, werde ich sie hinzufügen, wenn es in Zukunft neue Entdeckungen gibt).
.
2: WennLink verweist auf CSS, es wird gleichzeitig mit dem Laden der Seite geladen; @import muss warten, bis die Seite geladen ist vor dem Laden vollständig beladen sein. Drei:
Link ist das XHTML-Label, es gibt kein Kompatibilitätsproblem; für @import wird ein Browser mit niedriger Version nicht unterstützt. Viertens:
LINK unterstützt die Verwendung des JavaScript-Steuerdoms zum Ändern des Stils, während @import dies nicht unterstützt. Fünftens:
@import kann andere Stylesheets wieder in die CSS-Datei einführen.