将css文件链接到html时如何正确写出本地文件的绝对路径？
Posted
技术标签:
【中文标题】将css文件链接到html时如何正确写出本地文件的绝对路径？【英文标题】：How to write out the absolute path of a local file correctly when linking css file to html? 【发布时间】：2020-02-14 08:20:44 【问题描述】：我完全是 html/css 的初学者。
我使用 php 在不同的网页中包含相同的 head 部分。头部有一个链接到外部 css 的 href 链接。用于设置多个网页布局样式的文件。
由于不同的网页位于根文件夹的不同子文件夹中，我必须使用绝对路径来链接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">
【问题讨论】：
【参考方案1】：我忘了提到我使用 xampp 构建本地服务器来测试我的网站，我发现与其将链接指向我计算机上的文件夹路径，不如将其指向“http://localhost/root/.. ."，这就解决了这个问题。
【讨论】：
【参考方案2】：我猜这是服务器端和客户端执行上下文之间流行的误解。
-
网络服务器为
http://localhost/whatever/index.htm提供了一个html文档
您的浏览器会读取该文档以及它的 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。
【讨论】：
我忘了提到我使用 xampp 构建本地服务器来测试我的网站，我发现与其将链接指向我计算机上的文件夹路径，不如将其指向“ localhost/root..."，这就解决了问题。 当浏览器读取href="localhost/root..."时，它会尝试连接到本地主机。当服务器（xampp 的 apache）在您自己的系统上运行时，这很好。但是当你把这个东西放到网上时它可能不起作用！ href="/root..." 应该没问题:)【参考方案3】：
使用 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 文件中也是如此。
【讨论】：
【参考方案4】：要获取部分路径，请使用正斜杠
<link rel="stylesheet" href="/styles/style.css" rel="stylesheet" />
注意/ 表示当前驱动器的根目录。
您还有./，表示当前目录。
而../ 表示当前目录的父级。
【讨论】：
以上是关于将css文件链接到html时如何正确写出本地文件的绝对路径？的主要内容，如果未能解决你的问题，请参考以下文章
如何让 CSS 文件正确应用于我的 PHP/HTML 代码？
如何将 index.html 链接到 github 页面的 css 文件
保存 CSS - 浏览时，如何将 chrome dev 或 firebug 内部的 css 文件保存到本地目录 [重复]