【问题标题】：relative path to CSS file [closed]CSS文件的相对路径[关闭]
【发布时间】：2013-07-12 18:07:03
【问题描述】：

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

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

没有应用样式，所以我假设没有正确指定 css 目录的路径。如何指定css目录在Project文件夹的根目录下？

我的项目文件夹包含：

build
css
dist
nbproject
src
web
build.xml

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

【问题讨论】：

你查看的网址是什么？
使用谷歌浏览器，点击 F12 并观察您的网络面板以查看文件是否正在加载。
根是/，就像您输入的一样。您是否尝试过将 css 直接放入您的 App 的文件夹中，然后查看是否应用了它？当然你需要相应地编辑href。
您的 index.html 文件在哪个文件夹中？
它在 web 文件夹中

标签： css

【解决方案1】：

背景

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

相对：如果你想引用你知道在 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。

您的具体情况

在你的情况下，你有两个选择：

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

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

【讨论】：

hmm..它仍然没有应用样式。我可能对 CSS 文件有疑问。谢谢。
@user1154644 在浏览器中使用调试器检查文件，看看它是否正在加载。
第三个选项是指定一个<base href="" />，它将覆盖相对于解析的相对路径。

【解决方案2】：

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

那么CSS链接的url就是

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

【讨论】：

【解决方案3】：

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

【讨论】：

不，这是相对于当前页面的。如果他们在 site.com/mypage/page/ 怎么办？
是的，这与当前页面相关。这就是为什么我说“如果包含该链接标签的文件位于项目的根目录中”。小弟注意啦：|
这是一个主要问题 - 如果他们移动页面怎么办？ / 链接的想法是，如果他们移动页面，它仍然可以工作。
嗯，这里的问题是，你知道什么是相对路径吗？问题的标题是“CSS 文件的相对路径”。这是一条相对路径。如果您指定相对路径，总会出现您提到的问题，如果您移动任何文件，就会出现问题。
谁不知道相对路径是什么？关于最基本的事情，即使是直接使用计算机。