Web アプリケーションで CSS ファイルの相対パスを正しく指定するにはどうすればよいですか?

CSS ファイルへの相対パスを指定する方法

CSS ファイルを Web アプリケーションにインポートする場合、正しいパスを指定することが重要です相対パス。あなたの場合、HTML ページは localhost:8080/ServletApp/index.html にあり、プロジェクトのルートが「/ServletApp」であることを示しています。

絶対パスと相対パス

• 絶対: 先頭のスラッシュ (/) を使用してルートを示しますホスト名の名前 (例: "/css/styles.css")
• Relative: ファイルが HTML ページと同じディレクトリにあることを前提として、先頭のスラッシュを使用しません (例: 、"css/styles.css")

独自のシナリオ

プロジェクトの構造と目的の URL に基づいて、CSS インポート ステートメントには 2 つのオプションがあります:

• オプション 1 (絶対パス):

<link rel="stylesheet" type="text/css" href="/ServletApp/css/styles.css">

このメソッドはより具体的であり、ファイルが他のファイルの場所に関係なく、正しく参照されます。ただし、URL の「/ServletApp」部分を削除する場合は、CSS インポートを更新する必要があります。

• オプション 2 (相対パス):

<link rel="stylesheet" type="text/css" href="css/styles.css">

このオプションは、CSS ファイルが常に HTML と同じディレクトリにあることを前提としています。ページ。これはより短くクリーンなアプローチですが、ファイルをこの特定の場所に保持する必要があります。さらに、URL の「/ServletApp」部分を削除する場合でも、このインポート ステートメントは意図したとおりに機能します。

以上がWeb アプリケーションで CSS ファイルの相対パスを正しく指定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。