So führen Sie ein externes CSS-Stylesheet ein

Methoden zum Einführen externer CSS-Stylesheets: 1. Verwenden Sie die Anweisung „“, um es einzuführen. 2. Verwenden Sie im Style-Tag-Paar die Anweisung „@import url(“css file path“);“

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Methoden zur Einführung externer CSS-Stylesheets

1. Verwenden Sie das -Tag

-Tag definiert die Beziehung zwischen dem Dokument und externen Ressourcen. Der -Tag wird am häufigsten zum Verlinken auf externe CSS-Stylesheets verwendet.

Syntax:

<link rel="stylesheet" href="css文件路径" />

2. Verwenden Sie die @import-Regel

Mit der @import-Regel können Sie ein Stylesheet in ein anderes Stylesheet importieren.

Syntax: Der Unterschied zwischen

<style type="text/css">
@import url("css文件路径");
</style>

und der @import-Methode

• link liegt im HTML-Tag, während @import von CSS bereitgestellt wird.

• Wenn die Seite geladen wird, wird gleichzeitig der Link geladen, und das von @import referenzierte CSS wartet, bis die Seite geladen ist, bevor es geladen wird.

• @import kann nur in IE 5 oder höher erkannt werden und der Link ist ein HTML-Tag, sodass kein Kompatibilitätsproblem besteht.

• Link-Stilstile haben eine höhere Gewichtung als @import-Gewichte.

Erklärung: Pfad

Relativer Pfad (Relativer Pfad)

Wie der Name schon sagt: Es handelt sich um die Position der CSS-Datei relativ zu einem bestimmten Referenzobjekt.

Im Physikunterricht erwähnen Lehrer immer die Relativbewegung: Das bedeutet, dass sich ein Objekt relativ zu einem anderen Objekt relativ zu einem festen Referenzobjekt bewegt. Wenn wir gehen und das Auto betrachten, haben wir das Gefühl, dass das Auto rückwärts fährt. Wenn das Auto uns ansieht, sieht es auch so aus. Das Verzeichnis, in dem sich die Webseite befindet, ist unsere Referenz Objekt.

Die Einführung des CSS-Codes wie folgt ist eine relative Pfadadresse. Die Datei style.css befindet sich auf derselben Verzeichnisebene wie die Webseitendatei.

<link rel="stylesheet" href="style.css" />

Absoluter Pfad

Da es absolut ist, bedeutet dies, dass diese Adresse einzigartig und unabhängig ist. Bezogen auf den lokalen Bereich lautet die absolute Adresse des Site-Tests gerade F:test. Bezogen auf den Server sollte es sich um eine IP-Adresse wie 127.0.0.1/test handeln.

Beispiel:

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />

Über die Pfadeinführung

Ob es sich um einen relativen Pfad oder einen absoluten Pfad zum Importieren von CSS-Dateien handelt, ich persönlich denke, dass Sie bei der lokalen Vorschau einen relativen Pfad auswählen und ihn in einen absoluten Pfad ändern können wenn das Projekt online ist. Es gibt folgende Punkte:

1. Durch die Eindeutigkeit der absoluten Adresse kann sichergestellt werden, dass der Browser die IP-Adresse direkt indiziert, was ohne Verzögerung ein fataler Schlag ist. Der relative Weg erfordert, das Verzeichnis Schritt für Schritt zu indizieren. Das ist, als würde man unterwegs ein Mädchen treffen, das man mag. Wir sind zu schüchtern, um mit ihr persönlich zu sprechen, also schaffen wir unzählige zufällige Begegnungen, bevor wir den Mut haben, nach oben zu gehen Fragen Sie nach ihren Kontaktinformationen, nur um am Ende herauszufinden, ob sie das schon gewusst hätte ~

2 Für diejenigen, die SEO betreiben Seien Sie sich bewusst, dass externe Links eine gute Gewichtszunahme bewirken können, auch wenn andere auf unseren Inhalt zugreifen. Wenn er nicht in seine eigene Serveradresse geändert wurde, bedeutet dies, dass die Referenzadresse dieser Website immer noch unsere URL ist. Der Crawler wird durch diese Bildreferenzadresse zurückkriechen, aber durch die relative Pfadreferenz, da sich die Adresse geändert hat, sodass der Crawler zurückkriecht. Nach dem Zurückkriechen kann die entsprechende Datei nicht gefunden werden, sodass die Arbeit des Crawlers bald beendet wird.

3. Wenn Sie am Frontend arbeiten, werden Sie irgendwann auf einen Animationseffekt stoßen, der Ihnen gefällt, aber Sie möchten das CSS nicht direkt herunterladen Rufen Sie die Netzwerkadresse direkt lokal auf. Wenn Sie bei der Vorschau dieser Seite versehentlich auf die Importadresse klicken, wird zum entsprechenden Website-CSS gesprungen. Auch wenn Sie die Homepage nicht besuchen, besuchen Sie dennoch deren Domainnamen, wodurch sich die Besuche unbeabsichtigt erhöhen.

(Teilen von Lernvideos: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonSo führen Sie ein externes CSS-Stylesheet ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!