CSS文件的相对路径

时间:2013-07-12 18:07:03

标签: css

我的Java Web Application根目录下有一个css文件夹。我的import语句如下所示:

<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 /

3 个答案:

答案 0 :(得分:33)

背景

<强>绝对: 浏览器将始终将/解释为主机名的根。例如,如果我的网站是http://google.com/而我指定了/css/images.css,那么它会在http://google.com/css/images.css搜索该网站。如果您的项目根目录实际位于/myproject/,则无法找到css文件。因此,您需要确定项目文件夹根目录相对于主机名的位置,并以href表示法指定。

相对:如果您想引用您知道的内容在网址上的相同路径中 - 也就是说,如果它位于同一文件夹中,例如http://mysite.com/myUrlPath/index.html和{{ 1}},你知道总是这样,你可以违反惯例并指定相对路径,例如不在路径前放置前导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"/>

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

答案 1 :(得分:2)

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

然后是CSS链接的网址

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

答案 2 :(得分:0)

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