Konventionen für CSS-Bildpfade
Dieser Artikel ist eine Richtlinie, wie Sie andere Dateien wie Bilder in Ihrer Stylesheet- oder CSS-Datei verknüpfen und wie Sie Dateipfade am besten angeben.
Übersicht über Dateipfade
Ein Dateipfad identifiziert den Speicherort einer Datei innerhalb der Ordnerhierarchie einer Website. Beim Verweisen auf externe Dateien werden Dateipfade wie:
- eine Website
- Bilder
- Java-Skripte
Es gibt zwei Arten von Pfaden:
- Absoluter Pfad
- Relativer Pfad
Absoluter Pfad mit Beispiel
Ein absoluter Pfad ist ein Dateipfad, der die vollständige URL der Datei anzeigt, unabhängig davon, wo sich Ihre aktuelle Datei befindet. Zum Beispiel:
background-image: url(https://www.exampleSite.com/images/image1.png);
Relativer Pfad mit Beispielen
Ein relativer Pfad ist ein Dateipfad, der den Pfad der Datei für den aktuellen Ordner anzeigt. Zum Beispiel:
background-image: url(/images/image1.png);
Es befindet sich im Ordner images des Stammverzeichnisses der aktuellen Website. Betrachten Sie ein anderes Beispiel:
background-image: url(images/image1.png);
Es ist ein Pfad von image1,, platziert im Ordner images im aktuellen Ordner.
background-image: url(../images/image1.png);
Es ist ein Pfad von image1,, der im Ordner images platziert ist, der in einem Verzeichnis vor dem aktuellen Verzeichnis vorhanden ist. Beachten Sie, dass ../ eine Ebene über dem aktuellen Verzeichnis bedeutet. Je mehr Sie in der Verzeichnishierarchie nach oben gehen möchten; Sie können mehr ../ verwenden.
Best Practices zum Angeben des Pfads
Die beste Vorgehensweise zum Angeben des Dateipfads ist der relative Pfad. Die Verwendung relativer Dateipfade bindet Ihre Webseiten nicht an Ihre aktuelle Basis-URL. Stattdessen funktionieren alle Links auf Ihrem PC (localhost) und allen zukünftigen öffentlichen Domains, die Sie erstellen.
Es wird daher immer empfohlen, bei der Angabe der Dateipfade in den HTML- und CSS-Seiten Ihrer Website sehr vorsichtig zu sein und die Pfade so anzugeben, dass Sie sie in Zukunft nicht ändern müssen, wenn sich Ihre Basis-URL ändert.