CSS CSS文件的相对路径

relative path to CSS file

提问by user1154644

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

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

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

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?

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

My project folder contains:

我的项目文件夹包含：

build
css
dist
nbproject
src
web
build.xml

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

我正在查看的 html 页面是 index.html，显示的 URL 是 localhost:8080/ServletApp/

回答by Christian Stewart

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.cssthen 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 hrefnotation.

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

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.htmland 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.

相对：如果您想引用您知道在 url 上的相同路径中的内容 - 也就是说，如果它在同一个文件夹中，例如http://mysite.com/myUrlPath/index.htmland http://mysite.com/myUrlPath/css/style.css，并且您知道它总是这样，您可以违反约定并通过不在路径/前面放置前导来指定相对路径，例如，css/style.css.

Filesystem Notations: Additionally, you can use standard filesystem notations like ... If you do http://google.com/images/../images/../images/myImage.pngit 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.

文件系统符号：此外，您可以使用标准文件系统符号，如... 如果您这样做http://google.com/images/../images/../images/myImage.png，它将与http://google.com/images/myImage.png. 如果要引用文件中一个目录的内容，请使用../myFile.css.

---

---

Your Specific 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"/>

• <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 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.

如果您四处移动，第一个将更加具体和兼容，但是如果您打算将文件保留在同一位置，并且您打算删除 URL 的 /ServletApp/ 部分，那么第二个解决方案更好。

回答by yunzen

You have to move the cssfolder into your webfolder. It seems that your webfolder on the hard drive equals the /ServletAppfolder as seen from the www. Other content than inside your webfolder cannot be accessed from the browsers.

您必须将该css文件夹移动到您的web文件夹中。web硬盘驱动器上的文件夹似乎等于/ServletApp从 www 上看到的文件夹。web无法从浏览器访问文件夹内的其他内容。

The url of the CSS link is then

CSS 链接的 url 是

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

回答by Milad.Nozari

if the file containing that link tag is in the root dir of the project, then the correct path would be "css/styles.css"

如果包含该链接标记的文件位于项目的根目录中，则正确的路径将是“css/styles.css”