包括来自header.php的样式表和相对路径

Question

i am working on a website and i am looking for a way to include all my stylesheets and scripts relatively. Including the php-files is easy:

<?php include 'header.php'; ?>  

or

<?php include '../header.php'; ?>  

or by referencing the root-path:

<?php include '/header.php'; ?> 

But: All the stylesheets and scripts are not loaded on pages located in ‘/products‘, because they are located relatively to the root-directory and not to root/products.

For example:

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

Is there a way to include stylesheets and scripts relativlely, without taking care of where the page is located, that is calling header.php?

I am working on a local server with mamp and there are many websites in the mamp-directory.

Thanks in advance!

Tim

Answer 1

It's all about the HTML. The following will load a stylesheet relative to the page you are currently on.

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

For example, if your page is /products/page1.html. The browser will try to load /products/css/styles.css

An absolute path would look like:

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

Note the additional forward slash. In this case although your page is /products/page1.html. The browser will try to load /css/styles.css

You can also use the base tag to change the relative urls as in the first example.

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

This time the browser will try to load /assets/css/styles.css