Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erklärung des Unterschieds zwischen Link und @import in CSS

Detaillierte Erklärung des Unterschieds zwischen Link und @import in CSS

高洛峰
高洛峰Original
2017-03-04 10:12:471250Durchsuche

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 zuerst über ihre jeweiligen Verknüpfungsmethoden und dann über ihre Unterschiede sprechen~~~


Die Verknüpfungsmethode:

<link rel="stylesheet" type="text/css" href="index.css">

@ Import-Importmethode:

<style type="text/css">   
 @import url(&#39;index.css&#39;);   
 </style>

Priorität: Stil einbetten> Stylesheet importieren (Link in Stylesheet)

Importieren Die Methode ist sehr ähnlich Die Link-In-Methode entspricht jedoch tatsächlich dem Vorhandensein im internen Stylesheet. Dennoch ist seine Priorität immer noch niedriger als die des internen Stylesheets und seine Priorität hängt von der Priorität des verknüpften Stylesheets ab Der später definierte Standort hat höhere Priorität.

Hinweis: Beim Importieren eines externen Stylesheets muss sich dessen Position oben im Stylesheet befinden, also vor anderen Stilen.

Es gibt 5 Unterschiede zwischen ihnen (soweit ich bisher weiß, werde ich sie hinzufügen, wenn es in Zukunft neue Entdeckungen gibt).

1: Link ist ein XHTML-Tag, der auch andere Transaktionen wie RSS definieren kann. @import gehört zur CSS-Kategorie und kann nur CSS laden.

Zweitens: Wenn der Link auf CSS verweist, wird er gleichzeitig mit der Seite geladen; @import muss vor dem Laden warten, bis die Seite vollständig geladen ist.

Drei: Link ist ein XHTML-Tag, es gibt kein Kompatibilitätsproblem für @import, niedrigere Browserversionen unterstützen es nicht.

Viertens: Link unterstützt die Verwendung von Javascript zur Steuerung des DOM zum Ändern des Stils; @import unterstützt dies nicht.

5: @import kann andere Stylesheets wieder in die CSS-Datei einführen.

Das Obige ist der vom Herausgeber eingeführte Unterschied zwischen Link und @import. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen antworten rechtzeitig. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Ausführlichere Erläuterungen zu den Unterschieden zwischen Link und @import in CSS finden Sie auf der chinesischen PHP-Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn