CSS文件的相对路径

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

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

---

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

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

Background 绝对值： 浏览器将始终将

/

解释为主机名的根。例如，如果我的站点是

http://google.com/

我指定了

/css/images.css

，然后它会在

http://google.com/css/images.css

。如果您的项目根实际上位于

/myproject/

，它将找不到css文件。因此，您需要确定项目文件夹根相对于主机名的位置，并在

href

符号中指定该位置

Relative：如果您想引用某个您知道在url上的同一路径中的内容，也就是说，如果它在同一文件夹中，例如

http://mysite.com/myUrlPath/index.html

和

http://mysite.com/myUrlPath/css/style.css

，您知道，始终是这样的，您可以违反惯例，通过不在路径前面放置前导的

/

来指定相对路径，例如，

css/style.css

文件系统符号：此外，您可以使用标准的文件系统符号，如

。

。如果您这样做

http://google.com/images/../images/../images/myImage.png

它将与

http://google.com/images/myImage.png

。如果要引用文件上的某个目录，请使用

。/myFile.css

---

你的具体情况 在您的情况下，您有两种选择：

---

如果你移动东西，第一种解决方案会更加具体和兼容，但是如果你计划将文件保留在同一位置，并且你计划删除URL的/ServletApp/部分，那么第二种解决方案更好。

你必须将

css

文件夹移动到

web

文件夹中。硬盘上的

web

文件夹似乎与从www上看到的

/ServletApp

文件夹相同。浏览器无法访问

web

文件夹内以外的其他内容

CSS链接的url是

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

您正在查看的url是什么？使用Google Chrome，单击F12并观察您的网络面板以查看文件是否正在加载。根目录与您键入的相同。你有没有试过把css直接放到你应用程序的文件夹里，然后看看它是否被应用？当然，您需要相应地编辑

href

。index.html文件位于哪个文件夹中？它位于web文件夹中否，这是相对于当前页面的。如果他们在site.com/mypage/page/？是，那是相对于当前页面的。这就是为什么我说“如果包含链接标记的文件位于项目的根目录中”。注意，伙计：|这是个大问题-如果他们移动了页面怎么办？

/

链接的思想是，如果他们移动页面，它仍然可以工作。好吧，这里的问题是，你知道什么是相对路径吗？？？问题的标题是“CSS文件的相对路径”。这是一条相对的路径。如果你指定了一个相对路径，那么你提到的问题总是存在的，如果你移动任何一个文件，就会有东西坏掉。谁不知道什么是相对路径？关于最基本的东西，即使是在直接的电脑使用。嗯…它仍然没有应用的风格。我可能对CSS文件有问题。谢谢。@user1154644使用浏览器中的调试来检查文件是否正在加载。第三个选项是指定一个

，该选项将覆盖相对于解析的相对路径。

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