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 Stylesheet
4 Verwenden Sie das „style“-Attribut im Element innerhalb von , um den Stil zu definieren

Ein Beispiel:

@ import url(css/name2.css);
H1 {color:red}

Das erste ist Schreiben CSS direkt auf der HTML-Seite, während die zweite und dritte Methode externe Referenzstile verwenden, um Dateien separat zu extrahieren.

Frage 1. Was ist der Unterschied zwischen Link und @import?

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?

Da die oben genannten Chefs unterschiedlich sind, kann ich im Allgemeinen nicht sagen, wer besser und wer schlechter ist.

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.

Lassen Sie uns zunächst einen Blick darauf werfen, was jedes Attribut in Link bedeutet:

[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;

Der Druckstil ist, wie der Name schon sagt, der Stil beim Drucken der Seite.

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

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;

Wenn ich mehrere Stile auf einer Seite referenzieren möchte, um einen Effekt zu erzielen, sind sowohl Link als auch @import akzeptabel.

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.

Der Unterschied zwischen dem Laden von CSS-Links und @import: Tatsächlich gibt es einen großen Unterschied im Anzeigeeffekt zwischen Link und @import. Grundsätzlich wird der Link vollständig hinzugefügt, bevor die Seite angezeigt wird, während @. Der Import wird nach dem Lesen der Datei hinzugefügt. Wenn die Netzwerkgeschwindigkeit also sehr gut oder sehr schnell ist, gibt es zunächst keine CSS-Definition und dann wird die CSS-Definition geladen. Wenn @import eine Seite lädt, flackert sie zunächst (Seite ohne Stylesheet) und kehrt dann zum Normalzustand zurück (Seite nach dem Laden von Stilen). Link hat dieses Problem nicht.

Von den Methoden her sind sie gleich, es gibt jedoch einen kleinen Unterschied in der Browsererkennung. Der Link wird in Browsern unterstützt, die CSS unterstützen, während @import nur in der einzeiligen Version 5.0 gültig ist und kann Auch für das Surfen im Browser kann die Filterung durch Hacks genutzt werden und ist mit einigen älteren Versionen von Browsern kompatibel. Daher ist es besser, den Link-Universal-Typ zu verwenden, der stärker ist, aber für Browser höherer Versionen, also aktuelle Browser, sind sie tatsächlich gleich. Dies ist eine Unterscheidung, die nicht viel Sinn macht.

Der beste Weg, @import zu schreiben: Im Allgemeinen gibt es die folgenden Möglichkeiten, @import zu schreiben:

@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.

Beachten Sie, dass zwischen dem Doppelpunkt des Stilnamens und dem folgenden Wert kein Leerzeichen steht. Trennen Sie die beiden Stile einfach durch ein Leerzeichen.

Das spezifische Format ist wie folgt:
Programmcode:
div {margin:20px; padding:#F00;}