Heim >Web-Frontend >CSS-Tutorial >Der Unterschied zwischen Link- und @import-Methoden zum Referenzieren von CSS-Dateien
Benutzer können den durch das Element
referenzierten Stil frei ändern, und das importierte Stylesheet wird automatisch in die übrigen Stylesheets integriert.
Kombination von CSS- und HTML-Dokumenten 4 Methoden:
1 Verwenden Sie das Element , um eine Verknüpfung zu einer externen Stildatei herzustellen.
2 Verwenden Sie das Element „style“ im Element
Werfen wir zunächst einen Blick auf ihre Definitionen
Linkelement
Sowohl HTML als auch XHTML verfügen über eine Struktur, die es Webseitenautoren ermöglicht, zusätzliche Informationen zu HTML-Dokumenten hinzuzufügen. Diese zusätzlichen Ressourcen können gestaltete Informationen (CSS), Navigationshilfen, Informationen in anderen Formen (RSS), Kontaktinformationen usw. sein.
@import
Gibt das importierte externe Stylesheet und den Zielgerätetyp an.
Tatsächlich besteht der grundlegendste Unterschied zwischen Link und @import darin, dass Link ein Tag in HTML ist, während @import ein Tag in CSS ist.
Link kann neben dem Aufruf von CSS auch andere Funktionen haben, z als Deklaration von Seitenlinkattributen. Deklarieren Sie Verzeichnisse, RSS usw., während @import nur CSS aufrufen kann. Wenn Sie nur von außen auf CSS verweisen, sind ihre Funktionen grundsätzlich gleich, mit der Ausnahme, dass der Chef oben anders ist. :)
Frage 2. Was ist besser, Link oder Import?
Ich kann nur die spezifische Situation analysieren.
1) Ich möchte Javascript für die Stilauswahl verwenden.
Zu diesem Zeitpunkt muss ich Link verwenden, da Link ein HTML-Element ist und Javascript zur Steuerung des Dom-Elements verwendet werden kann, um schließlich den Effekt zu erzielen den Stil ändern.
Sehen Sie sich den folgenden Code an
Dies ist ein sehr klassischer Code zum Ändern des Seitenstils , weil wir heute Das Hauptthema ist Link und Import, daher liste ich hier nur den Referenz-CSS-Teil auf.
[1]rel: wird verwendet, um die Rolle oder den Typ des Link-Objekts zu deklarieren.
Zum Beispiel bedeutet im obigen Code: „Stylesheet“ die Verknüpfung zu einem Standard-CSS, während „alternatives Stylesheet“ die Verknüpfung zu alternativem CSS bedeutet
[2]href: Das muss ich nicht mehr sagen, siehe zum CSS-Dateipfad.
[3]Stil: Dateityp
[4]Medium: Anwendungsgerät, „Bildschirm“ bedeutet, dass die Anwendung auf dem Bildschirm angezeigt wird.
[5]Titel: ist der Name von CSS.
In diesem Code gibt es insgesamt 5 CSS. Das erste ist der Basisstil und die anderen vier sind Stilstile. Es ist in Ordnung, Javascript zu verwenden, um den standardmäßig angezeigten Stiltitel zu steuern.
2) Ich möchte den Druckstil anwenden;
Dieser Stil hat beim normalen Surfen keine Auswirkung und wird nur beim Drucken wirksam.
Wenn Sie den Druckstil separat für die Seite referenzieren möchten, können sowohl Link als auch @import verwendet werden.
Linkcode
@importcode
@import url(foo.css) print;
Es gibt einen anderen Weg für die CSS-Methode @ Medien:
@media print {
@import "print.css"}
Verwenden Sie @media, um das Gerät so einzustellen, dass es zuerst druckt, und verwenden Sie dann den @impor-Link
3) Ich möchte mehrere Stile referenzieren;
Linkcode
;
@import code
Ich persönlich bin jedoch der Meinung, dass es klarer ist, wenn @import zum Verweisen auf mehrere verwendet wird Dateien
Zusätzlich gibt es für mehrere Stile eine Kombination aus Link und @import.
Verwenden Sie zuerst den Link, um auf eine CSS-Datei zu verweisen
und verweisen Sie dann darauf in dieser CSS-Datei.
Der Vorteil davon ist, dass, wenn die Stile, auf die alle Seiten Ihrer Website verweisen, gleich sind,
und es mehrere CSS gibt, Wenn Sie jeder Seite 4 oder 5 identische CSS-Stile hinzufügen, ist dies eine Verschwendung von Code und Energie.
Daher ist es besser, alle Seiten auf ein CSS zu verweisen, und dann verweist ein CSS auf mehrere CSS 🎜> Verwaltung und Wartung.
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/ IE5/NS4 Nicht erkannt
@import "style.css" //Nicht erkannt von Windows IE4/NS4, Macintosh IE4/NS4
@import url(style.css) //Nicht erkannt von Windows NS4, Macintosh NS4
@import url('style.css') //Nicht erkannt von Windows NS4, Mac OS >Aus der obigen Analyse wissen wir, dass @import url(style.css) und @import url("style.css" ) sind die beste Wahl und mit den meisten Browsern kompatibel. Aus Sicht der Byte-Optimierung ist @import url(style.css) die am meisten empfohlene Schreibmethode.
Das CSS-Codeformat kann die Größe von Stylesheet-Dateien reduzieren
Um beim Schreiben von CSS-Stylesheets das spätere Lesen des Stildefinitionscodes zu erleichtern, schreiben wir jeden Code in eine Zeile. Ich habe jedoch festgestellt, dass das Schreiben auf diese Weise nicht gut erscheint, da CSS-Code schließlich nicht so logisch ist wie Programmcode. Er wird hauptsächlich in der entsprechenden Namens- und Wertform geschrieben. Das Schreiben in derselben Zeile hat also keinen besonderen Einfluss auf das Lesen. Im Gegenteil: Dadurch wird die Größe der Stylesheet-Datei reduziert, da viele Zeilenumbrüche und Leerzeichen reduziert werden. Ich habe es getestet und festgestellt, dass die Dateigröße um etwa 12 % reduziert werden kann. Wenn die Stylesheet-Datei relativ groß ist oder viele Dateien vorhanden sind, wird das Downloadvolumen des Clients erheblich reduziert und die Öffnungsgeschwindigkeit der Webseite verbessert.
Das spezifische Format ist wie folgt:
Programmcode:
div {margin:20px; padding:#F00;}