相对路径到CSS文件 [英] relative path to CSS file

问题描述

我在我的Java Web应用程序的根目录有一个css文件夹。我的导入语句如下所示：

I have a css folder at the root of my Java Web Application. My import statement looks like this:

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

样式未应用，因此我假定未指定css目录的路径正确。如何指定css目录位于Project文件夹的根目录？

The style is not being applied, so I assume that the path to the css directory is not being specified correctly. How do I specify that the css directory is at the root of the Project folder?

我的项目文件夹包含：

build
css
dist
nbproject
src
web
build.xml

我正在浏览的html页面是index.html，显示的URL是localhost：8080 / ServletApp /

The html page that I am viewing is index.html, and the URL shown is localhost:8080/ServletApp/

推荐答案

背景

绝对：
浏览器将始终解释 / 为主机名的根。例如，如果我的网站 http://google.com/ ，并指定 /css/images.css 那么它将在 http://google.com/css/images.css 搜索。如果你的项目根实际上在 / myproject / 它不会找到css文件。因此，您需要确定项目文件夹根目录相对于主机名的位置，并在 href 符号中指定。

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 would search for that at http://google.com/css/images.css. If your project root was actually at /myproject/ it would not find the css file. Therefore, you need to determine where your project folder root is relative to the hostname, and specify that in your href notation.

相对：如果您要引用某个您知道的网址在网址上的同一路径 - 也就是说，如果它在同一个文件夹中，例如 http： //mysite.com/myUrlPath/index.html 和 http://mysite.com/myUrlPath/css/style.css ，而您知道它将永远是这种方式，你可以违反约定并指定一个相对路径，不在你的路径前面放置一个前导 / ，例如 css / style.css 。

Relative: If you want to reference something you know is in the same path on 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 it will always be this way, you can go against convention and specify a relative path by not putting a leading / in front of your path, for example, css/style.css.

文件系统符号：此外，您可以使用标准的文件系统符号，例如 .. 。如果您 http://google.com/images/../images/../images/myImage.png 会与 http://google.com/images/myImage.png 。如果你想从你的文件中引用一个目录，使用 ../ myFile.css 。

Filesystem Notations: Additionally, you can use standard filesystem notations like ... If you do http://google.com/images/../images/../images/myImage.png it would be the same as http://google.com/images/myImage.png. If you want to reference something that is one directory up from your file, use ../myFile.css.

在您的情况下，您有两个选项：

In your case, you have two options:

• < link rel =stylesheettype =text / csshref =/ ServletApp / css / styles.css/>


• < link rel =stylesheettype =text / csshref =css / styles.css/& code>



如果你移动的话，第一个更具体和兼容，但是如果你打算保留文件位于同一位置，并且您计划删除/ ServletApp /部分URL ，那么第二个解决方案就更好了。

The first will be more concrete and compatible if you move things around, however if you are planning to keep the file in the same location, and you are planning to remove the /ServletApp/ part of the URL, then the second solution is better.

这篇关于相对路径到CSS文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！