如何使用相对路径来包含 .css 等文件？

Question

如何使用相对路径来包含 .css 等文件？

8

我有一个包含一个 .css 文件链接的 header.php 文件。当我将 header.php 包含到不同文件夹中的另一个 php 文件中时，header.php 的 .css href 对于新的 php 文件来说是不正确的。我应该如何在我的 .css 文件中声明 href，以便包含 header.php，并且对于任何包含它的 php 文件来说都是正确的？

- zhang ruiting

1

为什么不使用相对于您的域名的路径，例如/styles/your.css？ - Mike Christensen

2

在您的header.php文件中使用完整的CSS链接。 - Adsy2010

8个回答

9

我可以看出需要动态和相对路径生成href链接的原因之一是，如果您在多个域或具有不同路径的站点上运行项目（例如，您的项目可在http://myproject.example.org/和http://example.org/myprojecttest/ 上使用），这样做会更方便。如果不是这种情况，我建议直接相对于根文件夹指定您的CSS包含内容：

<link href="/css/style.css" />

如果这对您适用，请尝试以下方法：

在每个需要header.php的顶层文档中，添加一个$ROOT变量，表示该顶层文档相对于根目录的位置。例如：

$ROOT = './';

或者

$ROOT = '../';

或者

$ROOT = '../../';

现在，在您的header.php文件中，您可以使用以下代码：

<link href="<?php echo $ROOT; ?>css/style.css" />

这可以让您创建一个header.php文件，适用于任何页面和任何相对路径。 完整示例 包含的文件（/path/header.php）

<html><body>
<head>
    <link href="<?php echo $ROOT; ?>css/style.css" />
[...]

文件1 (/path/index.php)：

<?php
$ROOT = './';
include 'header.php';
?>

文件1 (/path/admin/index.php)：

<?php
$ROOT = '../';
include '../header.php';
?>

File 3 (/path/admin/test/magic.php):

<?php
$ROOT = '../../';
include '../../header.php';
?>

- user1873439

这是一个很棒的解决方案！非常感谢！ - Casandra

7

您有几个选项，我试图在这里总结一下。 基本 href

<head>
<base href="http://www.mysite.com/" />
</head>

它的作用是将所有href设置为指向特定路径。设置后，即使您的页面深入到“http://www.mysite.com/pages/2012/public/secret_folder/myownphpfile.php”，您也可以使用<link rel='stylesheet' href='css/mycss.css' />并成功加载mycss.css文件。

绝对路径

您始终可以使用绝对路径，但以后更改文件夹可能会很麻烦。

<link rel='stylesheet' href='http://www.mysite.com/css/mycss.css' />

定义路径

正如@Discomatt所说，使用PHP定义路径是保持工作顺畅的一种简单方法。缺点是必须使用PHP。但如果您已经在使用PHP，那么没有问题^^

define('CSSDIR', 'http://www.mysite.com/css/);
<link rel='stylesheet' href='<?= CSSDIR ?>mycss.css' />

- Tom

2

请看如何加载与当前js文件相关的css文件的最初回答：
https://stackoverflow.com/a/56580810/4865307 使用这个技巧，你只需要在想要包含基于相对路径的css文件的地方调用c1CssImport()函数即可：

c1CssImport('./ui.css');

- Tobias Buschor

1

请写出 CSS 文件的绝对路径，例如：

<link href="http://site.com/css/style.css" />

- Munteanu Sergiu

0

根据Tom的回答，我结合了基本URL和PHP 定义（以减少打字）。

在PHP的某个地方：

define("HOST_BASE", "http://example.com/");

接下来在头文件中：

<base href="<?php echo HOST_BASE ?>">

对我来说，base标签是新的，我很担心兼容性问题，但它似乎运行良好。在MDN上有更多信息。

- Deplicator

0

像这样：

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

/ 的第一个斜杠表示“转到根目录并从那里查找”。这是一个相对路径。

- Paul Dessert

-1

只需定义您的基本URL并将其串联在CSS或JavaScript引用中。

请按如下方式定义它。

define ('host_address','http://localhost:85/grc/');
define('css', host_address.'styles/');

我已经通过host_address和CSS定义了基本URL，并在下面同时使用了它们。

<link rel="stylesheet" href='.css.'custom.css>

- Ravi

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

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

- discomatt · Accepted Answer

这就是许多大型应用程序安装时会尝试设置“根URI”常量/变量的原因。

如果您的应用程序位于域名/子域名的根目录中，则/css/style.css将起作用，否则它将失败（例如： /appName/css/style.css）

将“根”脚本文件夹的绝对URI与其他配置常量/变量一起存储，建立绝对链接将变得轻而易举。

define( 'SCRIPT_ROOT', 'http://localhost/yourApplication' );
// ...
echo '<link rel="stylesheet" type="text/css" href="'.SCRIPT_ROOT.'/css/style.css">';