Maison > interface Web > tutoriel CSS > Comment spécifier correctement un chemin relatif pour les fichiers CSS dans une application Web ?

Comment spécifier correctement un chemin relatif pour les fichiers CSS dans une application Web ?

DDD
Libérer: 2024-11-29 00:11:11
original
890 Les gens l'ont consulté

How to Correctly Specify a Relative Path for CSS Files in a Web Application?

Comment spécifier le chemin relatif d'un fichier CSS

Lors de l'importation d'un fichier CSS dans une application Web, il est crucial de spécifier le bon chemin relatif. Dans votre cas, la page HTML se trouve à l'adresse localhost:8080/ServletApp/index.html, indiquant que la racine de votre projet est "/ServletApp".

Chemins absolus ou relatifs

  • Absolu : Utilise une barre oblique (/) pour indiquer la racine du nom d'hôte (par exemple, "/css/styles.css")
  • Relatif : N'utilise pas de barre oblique, en supposant que le fichier se trouve dans le même répertoire que la page HTML (par exemple, " css/styles.css")

Votre spécifique Scénario

En fonction de la structure de votre projet et de l'URL souhaitée, vous disposez de deux options pour l'instruction d'importation CSS :

  • Option 1 (Chemin absolu) :
<link rel="stylesheet" type="text/css" href="/ServletApp/css/styles.css">
Copier après la connexion

Cette méthode est plus concrète et garantit que le fichier est correctement référencé quel que soit l'emplacement de vos autres fichiers. Cependant, si jamais vous envisagez de supprimer la partie "/ServletApp" de l'URL, vous devrez mettre à jour l'importation CSS.

  • Option 2 (chemin relatif) :
<link rel="stylesheet" type="text/css" href="css/styles.css">
Copier après la connexion

Cette option suppose que le fichier CSS se trouve toujours dans le même répertoire que la page HTML. C'est une approche plus courte et plus propre, mais elle nécessite que vous conserviez le fichier à cet emplacement spécifique. De plus, si jamais vous décidez de supprimer la partie "/ServletApp" de l'URL, cette instruction d'importation fonctionnera toujours comme prévu.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal