Was ist der Referenzpunkt für relative URLs in CSS?

Relative URLs in CSS: Bestimmen des Referenzpunkts

Bei der Verwendung relativer URLs in CSS-Dateien zur Angabe von Ressourcen wie Hintergrundbildern ist dies von entscheidender Bedeutung um den Bezugspunkt solcher URLs zu verstehen. Stellen Sie sich ein Szenario vor, in dem die folgende CSS-Regel definiert ist:

div#header {
  background-image: url('images/header-background.jpg');
}

Diese Regel ist in der Datei „/stylesheets/base-styles.css“ enthalten. Wenn dieses Stylesheet über mit verschiedenen Dokumenten verknüpft ist, wo wird dann die relative URL im CSS relativ interpretiert?

Die Antwort: Relativ zum Stylesheet-Dokument

Gemäß den vom W3C festgelegten Spezifikationen werden in CSS-Dateien angegebene Teil-URLs relativ zur Quelle des Stylesheets interpretiert, nicht zum Dokument, in dem es enthalten ist. Daher wird im oben genannten Beispiel die relative URL in Bezug auf „/stylesheets/“ interpretiert und nicht auf das aktuelle Dokument, in dem sie enthalten ist.

Dieser Ansatz gewährleistet Konsistenz und Zuverlässigkeit, da die CSS-Datei möglicherweise enthalten ist in Seiten, die sich in verschiedenen Verzeichnissen befinden. Durch die Standardisierung des Referenzpunkts auf die CSS-Datei selbst funktionieren die URLs nahtlos, unabhängig vom Speicherort oder Pfad des Dokuments.

Das obige ist der detaillierte Inhalt vonWas ist der Referenzpunkt für relative URLs in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!