将CSS文件链接到html时如何正确写出本地文件的绝对路径?

时间:2019-10-17 12:00:59

标签: html css href absolute-path local-files

我是html / css的完整入门者。

我使用PHP在不同的网页中包含相同的标题。头部分中有一个href链接,该链接链接到外部CSS。样式化多个网页布局的文件。

由于不同的网页位于根文件夹的不同子文件夹中,因此我必须使用绝对路径链接CSS。文件,问题就来了:我不知道如何正确编写它。

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

我尝试过:

1.href =“文件:/// 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">

4 个答案:

答案 0 :(得分:1)

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

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

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

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

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

答案 1 :(得分:0)

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

  1. 网络服务器为http://localhost/whatever/index.htm提供了html文档
  2. 您的浏览器读取该文档,并且它是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。

答案 2 :(得分:0)

使用HTML链接引用,当文件离开服务器时,您不能在域的根路径下请求文件。

例如使用http://localhost/index.php,您将无法获得超出所提供的根路径的任何信息。 (在这种情况下,从代码示例的外观来看C:\ xampp \ htdocs \ root)

如果以斜杠开始链接,则将为您提供绝对链接,并且始终从主机的根路径开始。这特别有用,因为您无需知道当前在网站中的位置。

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

如果要将 relative 链接到当前路径,则可以省略第一个斜杠,这将根据当前路径查找文件。

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

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

答案 3 :(得分:0)

我忘了提到我使用xampp来构建本地服务器来测试我的网站,但我发现与其将链接定向到计算机上的文件夹路径,我还应将其指向“ http://localhost/root/” ...”,这就解决了问题。