如何在将CSS文件链接到HTML时正确书写本地文件的绝对路径？

Question

如何在将CSS文件链接到HTML时正确书写本地文件的绝对路径？

htmlcsshrefabsolute-pathlocal-files

9

我是一个完全的html/css初学者。

我使用PHP在不同的网页中包含相同的头部区域。在头部区域中有一个href链接，链接到外部的css文件，用于样式化多个网页的布局。

由于这些不同的网页位于根目录下的不同子文件夹中，我必须使用绝对路径来链接css文件，接下来就出现了问题：我不知道如何正确地编写链接。

当我为每个网页使用相对路径时，链接可以正常工作，但是当我尝试使用绝对路径时，却无法正常工作。

我已经尝试过以下方法：

1.href="file:///C:\xampp\htdocs\root\styles\style.css"

2.href="file:///C:/xampp/htdocs/root/styles/style.css"

3.href="file://C:/xampp/htdocs/root/styles/style.css"

4.href="C:/xampp/htdocs/root/styles/style.css"

5.href="c:/xampp/htdocs/root/styles/style.css"

以下是代码的开头部分：

<!DOCTYPE html>
<html lang="en">
  <head>
    <?php include('common/head.php') ?>
    <title>Home</title>
  </head>

这是头部区域：

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="file:///C:\xampp\htdocs\root\styles\style.css">

- Topstar

4个回答

3

使用正斜杠获取部分路径。

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

请注意，/表示当前驱动器的根目录。

您还有./，表示当前目录。

而../表示当前目录的父级。

- Gildas.Tambo

0

我忘了提到我使用xampp构建本地服务器来测试我的网站，我发现我应该将链接指向 "http://localhost/root/..." 而不是指向我的电脑上的文件夹路径，这解决了问题。

- Topstar

0

使用HTML链接引用时，当文件从服务器上获取时，您无法请求域的根路径以下的文件。

例如，使用http://localhost/index.php，您无法获取服务的根路径之后的任何内容。（从您的代码示例看，这种情况下为C:\xampp\htdocs\root）

如果您以斜杠开头的方式开始链接，这将给您一个绝对链接，并且始终从主机的根路径开始。这特别有用，因为您不需要知道您当前在网站的哪个位置。

<link href="/styles/style.css" />
<!-- this is seen as "{domain}/styles/style.css" -->

如果您想将链接“相对于”当前路径，可以省略第一个斜杠，这将基于当前路径查找文件。

<link href="styles/style.css" />
<!-- this is seen as "./styles/style.css" -->

如果需要引用图片等文件，你在 CSS 文件中也需要这样做。

- Jon Allen

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- lupz · Accepted Answer

我想这是人们对服务器端和客户端执行上下文之间的一种常见误解。

Web服务器提供一个html文档，如 http://localhost/whatever/index.htm
您的浏览器读取该文档及其href属性。它还试图下载所链接的文件。
- href="styles/style.css" 相对路径。浏览器将请求 http://localhost/whatever/styles/style.css 中的文件
- href="/styles/style.css" 类似绝对路径。浏览器将请求根目录下的服务器URL中的文件 http://localhost/styles/style.css
- href="http://localhost/foobar/styles/style.css" 绝对路径。浏览器将直接从此处尝试下载。
- href="file:///C:\...." 本地系统上的本地路径。服务器与此无关。该页面可能仅在您自己的系统上工作，而不是其他计算机通过服务器访问时。

您的浏览器应该附带一些开发工具。使用这些工具，您可以检查浏览器正在请求什么以及服务器正在用什么响应。

答案是：在这里使用相对或类似绝对的URL。