Как прописать путь

20 октября 2010

Данный вопрос, в вариациях «как прописать путь к картинке в CSS», «как прописать путь к CSS в HTML» и других, часто возникает у начинающих веб-разработчиков. Даже довольно опытные разработчики частенько путаются с абсолютными путями в CSS.

Абсолютные пути

С абсолютными всё просто. Работают они одинаково как в CSS, так и в HTML. Если адрес сайта у нас, например, http://rmcreative.ru/, то /img/miimage.jpg будет указывать на http://rmcreative.ru/img/miimage.jpg какая бы страница не была открыта у пользователя.

Относительные пути в HTML

Относительные пути, если на странице нет тега base, отсчитываются относительно текущего пути страницы. Например, если мы находимся на странице http://rmcreative.ru/blog/post/tsitaty-prepodavateley, то ссылка вида <a href="test.zip">test</a> будет указывать на http://rmcreative.ru/blog/post/test.zip.

Если используется тег base, то ссылки отсчитываются от его href:

<head>
<base href="http://rmcreative.ru/" />
</head>
<body>
  <a href="test.zip">test</a>
</body>

Здесь ссылка test будет указывать на http://rmcreative.ru/test.zip.

Относительные пути в CSS

В CSS относительный путь отсчитывается не от пути страницы, а от пути к самому CSS.

Например, для файла http://rmcreative.ru/css/test.css

body {
  background: url("test.png");
}

браузер будет пытаться подгрузить картинку по адресу http://rmcreative.ru/css/test.png.

Комментарии RSS по email OK

№3251

Dmitry Scriptin 20 окт. 2010 г., 12:50:37

Странно, что эти "начинающие разработчики" никогда не читают документацию и не пробуют разобраться самостоятельно перед тем, как спросить. Надеюсь, что большинство из них хотя бы сначала спрашивают у поисковых систем.

Иногда уже просто достают с одинаковыми вопросами. Я на одном форуме веду раздел про программирование, так вот большинство новоприбывших (думаю, не меньше 60-80%) не пробуют написать свои программки на Pascal до того, как лезть на форуме. Видимо, эти люди никогда сами думать не пробовали. И ладно бы спрашивали про какие-нибудь частные случаи, так ведь спрашивают даже реализации популярных алгоримтов вроде нахождения наибольшего общего делителя.

Но такие люди тоже нужны, иначе на чьем фоне хорошо смотрелись бы профессионалы? ;)
№3254

Sam 20 окт. 2010 г., 13:10:52

Я думаю, что помогать надо. Со ссылками на документацию. Все мы когда-то были достаточно беспомощными, достаточно хорошенько вспомнить.
№3255

Ekstazi 20 окт. 2010 г., 13:22:19

Еще бы про ./ написать, раз уж про такие азы написано.
№3256

Костег 20 окт. 2010 г., 14:37:03

Что лучше использовать: тег base или же абсолютные ссылки (с хостом сайта)?. IE к примеру добавляет содержимое тега base к ссылке с анкором (#foo старен http://site.com#foo).
№3257

Sam 20 окт. 2010 г., 16:01:13

Ekstazi, так это то же, что и без ./. Или это было про всякие ..?

Костег, от ситуации зависит.
№3260

Ekstazi 21 окт. 2010 г., 0:01:43

Про всякие ..
№3343

СайтоДел 03 нояб. 2010 г., 9:23:14

Просто и понятно, может продолжая тему сделаете пару постов "как сделать пути на пхп посредством глобального массива"
№4102

St 12 марта 2011 г., 18:31:17

По опыту знаю, что лучше прописывать base. Иначе могут начаться танцы с браузерами.
№4136

Victor 19 марта 2011 г., 23:17:01

Ну мои эксперименты показали что тег влияет только на ссылки вида ./index.html и index.html. А вот /index.html ведет к корню сайта который задается другими методами...
№5152

новичек 06 авг. 2011 г., 23:15:37

Не хочу говорить плохо про умников плохо отзывающихся о новичках. Но не смотря на тонны причитанного остается один вопрос (и вероятно именно он и беспокоит всех новичков). Возможно ли прописать путь для той же картинки, если страница и картинка находятся в разных папках. Т.е. нужен абсолютный путь, а использовать его нет смысла, так как все это добро в localhost. Но зато есть острая необходимость просмотра на другом компе, а localhost уже другой. Тащишь ты всю эту неподъемную ношу на флешке в отвисающем от груза кармане, а в итоге ни одной картинки, ни страницы кроме стартовой ни видать. Лупает новичек глазенками, мол как же так я неделями не спал, а где же? А только на родном компе, или вываливай все страницы в одну папку даже если их аграх/ количество - так выходит? Или все таки есть способ?
№5153

Sam 07 авг. 2011 г., 4:10:10

новичек, в абсолютном пути не обязательно указывать имя хоста. Достаточно начать его с /.
№8042

Сергей 04 июня 2013 г., 15:34:56

Создаю регистрацию.В файле index.php ссылка на регистрацию <a href="registration.php">Регистрация</a> Но на сайте при нажатии на Регистрация сайт не видит файла и не отображает формы.Я пробовал <a href="./registration.php">Регистрация</a> <a href="/registration.php">Регистрация</a> Путь к файлу проходит через следущие файлы на сервере domains/stroy-master.in.ua/public_html/wp-content/themes/stroy-master/