链接css文件到html时，如何正确写出本地文件的绝对路径？

Question

我是 html/css 的初学者。

我使用 PHP 在不同的网页中包含相同的标题部分。在头部分 link 中有一个 href link 指向外部 css。设置多个网页布局样式的文件。

由于不同的网页位于根文件夹中的不同子文件夹中，因此我必须使用link css 的绝对路径。文件，问题来了：我不知道如何正确编写它。

当我为每个单独的网页使用相对路径时，link 工作正常，但是当我尝试使用绝对路径时，它根本不起作用。

我试过：

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

Answer 1

要获取部分路径，请使用正斜杠

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

注意 / 表示当前驱动器的根。

你还有./表示当前目录。

Answer 2

我想这是服务器端和客户端执行上下文之间的一个普遍误解。

网络服务器为 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。

Answer 3

使用 HTML link 引用，当文件从服务器上下来时，您不能请求域根路径下的文件。

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

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

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

如果要link 相对于当前路径，可以省略第一个斜杠，这样会根据当前路径查找文件。

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

如果您需要引用图片等，在您的 CSS 文件中也是如此。

Answer 4

我忘了提到我使用 xampp 构建本地服务器来测试我的网站，我发现我不应该将 link 指向我计算机上的文件夹路径将它指向“http://localhost/root/...”，这就解决了问题。

链接css文件到html时，如何正确写出本地文件的绝对路径？

How to write out the absolute path of a local file correctly when linking css file to html?

html

css

href

absolute-path

local-files