Relative CSS File Path

I have a css folder at the root of my Java web application. The import statement is as follows:

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

The style does not apply, so I assume that the path to the css directory is not specified correctly. How to indicate that the css directory is in the root of the project folder?

My project folder contains:

 build css dist nbproject src web build.xml 

The html page I'm viewing is index.html and the display URL is localhost: 8080 / ServletApp /

+6
source share
3 answers

Background

Absolute : The browser will always interpret / as the root of the hostname. For example, if my site was http://google.com/ and I specified /css/images.css , then it will look for it in http://google.com/css/images.css . If your project root was actually in /myproject/ , it would not find the css file. Therefore, you need to determine where the root directory of your project refers to the host name, and specify it in the href notation.

Relative . If you want to link to what you know, this is the same path to the url - that is, if it is in the same folder, for example http://mysite.com/myUrlPath/index.html and http://mysite.com/myUrlPath/css/style.css , and you know that there will always be this way , you can go against the convention and specify a relative path without placing a leading / in front of your path, for example, css/style.css .

File system notation . Alternatively, you can use standard file systems such as .. If you follow http://google.com/images/../images/../images/myImage.png , it will be the same as http://google.com/images/myImage.png . If you want to reference what is in the same directory from your file, use ../myFile.css .


Your particular case

In your case, you have two options:

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

The first will be more specific and compatible if you move things, however, if you plan to save the file in the same place , and you plan to delete the / ServletApp / part of the URL , then the second solution is better.

+28
source

You need to move the css folder to the web folder. It seems that your web folder on your hard drive is equal to the /ServletApp folder, as can be seen from www. Other content than inside your web folder cannot be accessed from browsers.

CSS link url then

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

if the file containing this link tag is in the root directory of the project, then "css / styles.css" will be the correct path

0
source

Source: https://habr.com/ru/post/949332/


All Articles