我的主文件夹中有一个名为“main”的文件夹。在“主”中,我有另一个名为“math”的文件夹。我想在“math”文件夹中使用我的css,但是当我输入:
<link rel="stylesheet" href="css/basic.css" type="text/css" media="screen" />
在“math”文件夹的index.html上它起作用。我认为这是因为它正在寻找math文件夹中的css文件夹。如何链接到css文件夹,该文件夹不在math文件夹中?
答案 0 :(得分:12)
如果我理解,你的目录结构如下:
siteroot
main
math
css
您希望从/main/math/index.html链接到/ main / css中的样式表。
有两种解决方案,最简单的方法是使用绝对路径:
<link rel="stylesheet" href="/main/css/basic.css" type="text/css" media="screen" />
绝对路径是一种更好的解决方案,可以减少道路上的麻烦。我也不知道有什么缺点。
或者,您可以使用“..”遍历目录
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
答案 1 :(得分:4)
例如,您的目录是这样的:
Desktop >
ProjectFolder >
index.html
css >
style.css
images >
img.png
你在你的style.css,你想使用img.png作为背景图像,使用它:
url("../images/img.png")
适合我!
答案 2 :(得分:1)
使用绝对路径:
href="/main/css/..."
答案 3 :(得分:0)
您必须使用../转到与css和math相同的目录 所以它看起来像../ css / basic.css
答案 4 :(得分:0)
如果您想在该文件夹中找到文件,请使用此
<link rel="stylesheet" href="./css/basic.css" type="text/css" media="screen" />
如果你想在那个文件夹之外找到一个文件,你可以使用这个片段
<link rel="stylesheet" href="../css/basic.css" type="text/css" media="screen" />
答案 5 :(得分:0)
答案还取决于网站是否正在本地开发和测试,或者您是否将内容发布到网络服务器并在实时网站上测试链接。
如果您的 href
属性的 URL 使用相对 URL 并且有一个域名映射到您在实时站点上的文档根,则上述答案是正确的。
但是,如果您测试所有文件都在本地 PC 的文件系统上的链接,其中本地没有使用网络服务器,那么您可能会发现以下信息也很有帮助。
如果您在本地进行测试,通常没有与您的 Document Root
相关联的域,并且路径会以多种方式发生变化。
href
或在这种情况下不会有一个开头的斜杠 ("/") src
属性,因为没有域并且 Relative URL 是相对于当前页面的。 (同样的规则也适用于您的 href
网址)本地测试 URL:
<img src="images/image-1.jpg" alt="my-Image-1">
..相对于具有域名的实时站点页面上的相对 URL,您可以在其中使用初始正斜杠,因为它将相对于域。
远程实时测试:
<img src="/images/image-1.jpg" alt="my-Image-1">
我知道这不是您询问的情况,但它应该有助于以下两个示例,其中文件夹位于本地文件系统上的相邻目录和父目录。您的情况是您的相对 URL 指向位于相邻目录中的文件。如果您在本地进行开发和测试,请参见下文。
href
)。因此,您的情况(如果在没有域的情况下进行本地测试)是:../
...如上面@Cory Dolphin 所示。
我经历过这种情况,发现我的问题是我不断发现不同的结果,这取决于我在哪里进行测试,这让我很抓狂。
我最初认为路径差异与本地 Windows 系统上的本地文件有关,而略有不同的原因是我的远程 Linux Apache VPS 的文件系统。
我发现这与它是否具有到您的站点文件的域映射有关。这在 W3Schools.com's Page 标题为 The src Attribute 和 Relative URLs 的部分中有所解决。