Как правильно записать абсолютный путь к локальному файлу при связывании CSS-файла с HTML? - PullRequest
Новая
       42

Как правильно записать абсолютный путь к локальному файлу при связывании CSS-файла с HTML?

1 голос
/ 17 октября 2019

Я полный начинающий html / css.

Я использую PHP для включения одного и того же заголовка в разные веб-страницы. В разделе head есть ссылка href, ссылающаяся на внешний css. файл, который стилизует макет нескольких веб-страниц.

Поскольку различные веб-страницы находятся в разных подпапках в корневой папке, я должен использовать абсолютный путь для ссылки на 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">

Ответы [ 4 ]

1 голос
/ 17 октября 2019

Чтобы получить частичный путь, используйте косую черту 

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

, обратите внимание, что / означает корень текущего диска.

У вас также есть ./, что означаеттекущий каталог.

И ../ означает родителя текущего каталога.

0 голосов
/ 17 октября 2019

Я забыл упомянуть, что я использую xampp для создания локального сервера для тестирования своего веб-сайта, и я обнаружил, что вместо того, чтобы направлять ссылку на путь к папке на моем компьютере, я должен указать ее на "http://localhost/root/...", и это решило проблему.

0 голосов
/ 17 октября 2019

С ссылками на HTML-ссылки, когда файл отправляется с сервера, вы не можете запрашивать файлы ниже корневого пути домена.

Например, с http://localhost/index.php, вы не можете получитьвсе, что проходит через корневой путь. (C: \ xampp \ htdocs \ root в данном случае по виду вашего примера кода)

Если вы начнете ссылку с косой черты, это даст вам ссылку absolute , ивсегда будет идти от корневого пути хоста. Это особенно полезно, поскольку вам не нужно знать, где вы находитесь на веб-сайте. 

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

Если вы хотите связать относительно с текущим путем, вы можете опуститьпервая косая черта, и это будет искать файл на основе текущего пути. 

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

Это также относится и к вашим файлам CSS, если вам нужно ссылаться на изображения и т. д.

0 голосов
/ 17 октября 2019

Полагаю, это распространенное заблуждение между контекстом выполнения на стороне сервера и на стороне клиента.

  1. Веб-сервер предоставляет HTML-документ для http://localhost/whatever/index.htm
  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-адреса.

...