Относительная ссылка на таблицу стилей не работает на локальной машине, работает онлайн. Почему это?

Я пытаюсь связать свою таблицу стилей (styles.css) с index.html. Когда я делаю это с помощью функции сборки Sublime Text для Chrome, HTML выглядит нормально, но не ссылается на таблицу стилей (текст не синий). Когда я загружаю точно такой же код (в той же структуре папок) в BitBalloon, ссылка работает. Почему это так и как сделать так, чтобы ссылка работала в обеих ситуациях?

индекс.html:

<!DOCTYPE HTML>
<html>
<head>
    <title>I think I'm doing this right!</title>
    <link rel="stylesheet" type="text/css" href="/css/styles.css" />
</heaod>
<body>
    <div class="jumbotron">
      <div class="container">
        <h1>CareerFoundry Template</h1>
        <p style="background-color: red;">This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more &nbsp;&amp;&nbsp; unique.</p>
        <p><a class="btn btn-primary btn-lg" role="button">Learn more &raquo;</a></p>
      </div>
    </div>
</body>
</html>

стили.css:

body {color:blue;}

Работа с HTML и CSS на BitBalloon


html css stylesheet rel
person Erik V    schedule 16.11.2014    source источник
comment
Проверьте консоль, там будут ошибки, если ресурс недоступен.   -  person Etheryte    schedule 17.11.2014
comment
Какова ваша структура каталогов?   -  person muradin    schedule 17.11.2014
comment
Папка верхнего уровня (корневой каталог, если это правильный термин) — HTMLandCSSBasics. В HTMLandCSSBasics есть HTML-документ и папка с именем css. Внутри css находится styles.css.   -  person Erik V    schedule 17.11.2014

Ответы (2)


arrow_upward
4
arrow_downward

В стандартной настройке для вашего корневого каталога в Интернете установлено значение public_html (или www).

Первая часть этого:

/css/стили.css

Рассказывает, чтобы посмотреть в корень проекта "/" и идти оттуда. На вашем компьютере он использует «/» в качестве корня вашего компьютера.

Использование только «css/styles.css», вероятно, сработает, если папка css — это тот же каталог, в котором находится ваш html-файл.

В противном случае вы можете запустить локальный веб-сервер, такой как WAMP, который позволит вам иметь папку public_html как root на вашей локальной машине.

person Alex L    schedule 16.11.2014

arrow_upward
2
arrow_downward

Когда вы начинаете путь с /, например, /css/styles.css, вы говорите браузеру посмотреть на просматриваемый URL-адрес и взять его базовую часть. и добавьте /css/styles.css

Если ваш сайт размещен на BitBalloon, базовым URL-адресом будет shopkeeper-cnythia-30345.bitballoon.com, а полный путь к таблице стилей станет http://shopkeeper-cnythia-30345.bitballoon.com/css/styles.css

Когда вы просматриваете файл локально, URL-адрес, вероятно, выглядит примерно так: file:///Users/mbc/Documents/html-sites/html5up-aerial — в этом случае нет базового домена, поэтому ваш браузер ищет файл: file://css/styles.css, а его не существует.

Есть два способа обойти это.

  1. Используйте действительно относительный путь, например css/styles.css. Это говорит браузеру взять каталог, в котором вы находитесь, и добавить css/styles. Недостатком этого является то, что вам придется позаботиться, если вы находитесь на подстранице, такой как /about/index.html, поскольку тогда браузер попытается получить /about/css/styles. .css, и вам потребуется ссылка на ../css/styles.css, чтобы обойти это
  2. Используйте абсолютный путь и запустите локальный веб-сервер. Вот действительно хороший список строк, которые позволят вам запустить простой веб-сервер из командной строки в каталоге: https://gist.github.com/willurd/5720255, это гарантирует, что ваш сайт будет вести себя одинаково, когда вы просматриваете его локально и когда вы развертываете его в BitBalloon.

Я бы порекомендовал привыкнуть к запуску локального веб-сервера. Как только вы начинаете больше играть с Javascript, запросами Ajax и т. д., это все равно становится необходимостью.

person Biilmann    schedule 17.11.2014