Относительный и абсолютный путь к файлу
В данном уроке мы объясним новичкам, что такое абсолютный и относительный путь к файлу, а также в каком случае какой из них лучше использовать. Если вы уже знакомы с данной темой, вы можете переходить к следующему уроку.
Итак, начнем с определения самого термина «путь»:
Путь (англ. path) — набор символов, показывающий расположение файла в файловой системе, адрес каталога.
Википедия
Если говорить о сайтах, то путь — это то же, что и ссылка. Ссылки могут быть абсолютными и относительными. Рассмотрим оба варианта более подробно.
Что такое абсолютный путь к файлу
Абсолютный адрес ссылки на файл включает в себя протокол (например, http://), имя сайта в Сети, подкаталог (или несколько подкаталогов), название файла. Пример того, как выглядит абсолютный URL:
https://www.google.com/images/branding/googlelogo.png
Абсолютный путь можно использовать в CSS. Например, чтобы задать рисунок в качестве фона, вы можете взять абсолютный URL к файлу с изображением И указать его в таблице стилей:
background-image: url(http://www.example.com/img/bg.png);
Абсолютная ссылка всегда будет указывать на одно и то же место, независимо от того, где расположен содержащий ее документ (в нашем случае таблица стилей). Чего не скажешь об относительной ссылке.
Что такое относительный путь к файлу
С относительным адресом всё намного интереснее — он может отсчитываться как от корня сайта, так и от текущего документа. Корневой относительный путь — это путь, который указывает на расположение файла относительно корневого каталога сайта. В этом случае адрес не содержит ни протокола, ни имени домена, и начинается со знака слэша /, который указывает на корневую папку. Выглядит этот адрес так:
background-image: url(/img/bg.png);
Как легко определить корневой относительный адрес? Просто возьмите абсолютную ссылку и уберите из нее протокол и название домена, оставив слэш и все символы, которые идут дальше.
Относительный путь к файлу от документа — это путь к файлу относительно текущего документа. Такой адрес зависит от расположения файла, в котором он записан. Так, когда относительная ссылка указывается в таблице стилей, она рассчитывает путь к файлу, отталкиваясь от таблицы стилей, а не от текущей веб-страницы либо корневой папки. Приведем несколько примеров.
Пример I
Если наша таблица стилей style.css и файл с фоновым рисунком bg.png находятся в одной папке (не обязательно корневой), то относительный путь от таблицы до рисунка будет выглядеть так:
background-image: url(bg.png); /* вы просто пишете имя файла */
Пример II
Если таблица стилей находится в корне, а рисунок — в папке img, относительная ссылка будет таковой:
background-image: url(img/bg.png); /* слэш в начале не нужен */
Пример III
Если таблица стилей находится в папке, а рисунок соседствует с этой папкой, то относительный путь будет таким:
background-image: url(../bg.png); /* две точки — подняться на один уровень */
Пример IV
Если таблица стилей находится в двух папках, а рисунок соседствует с первой папкой, то относительный путь будет следующий:
background-image: url(../../bg.png); /* поднимаемся на два уровня */
Две точки и слэш в начале относительного пути означают подъем на один уровень вверх. В зависимости от количества уровней (каталогов), на которые нужно подняться, необходимо прописать нужное количество точек со слэшом. К примеру, если таблица стилей лежит не в двух, а в четырех папках, запись, соответственно, будет следующей:
background-image: url(../../../../bg.png);
В том случае, когда рисунок спрятан в папку img, а таблица стилей — в папку css, вам понадобится выйти из папки css и зайти в папку img. Вот так:
background-image: url(../img/bg.png);
Если папок несколько, необходимо также прописать их. Изменим предыдущий пример: представим, что в папке img есть еще одна папка backgrounds, в которой лежит наш рисунок. Относительный путь будет таким:
background-image: url(../img/backgrounds/bg.png);
Какой путь лучше использовать
Абсолютный адрес ссылки понадобится использовать, если файл, на который вы ссылаетесь, находится на другом сайте. В пределах одного сайта абсолютный путь практически не используется (хоть он и будет работать). Это связано с несколькими моментами: во-первых, такие ссылки могут быть весьма громоздкими, а во-вторых, если имя домена изменится, то возникнет проблема — все ссылки будут вести на старый домен, что может повлечь за собой множество ошибок и битых ссылок.
Корневой относительный путь будет работать на веб-сервере, но он бесполезен при разработке на локальном компьютере. Но преимущество этого типа ссылок в том, что вы можете перемещать свою таблицу стилей в любую папку сайта и не бояться, что адреса фоновых изображений станут нерабочими.
Относительный путь от документа — наилучший вариант при веб-разработке на локальной машине без использования сервера. В браузере вы сможете нормально просматривать веб-страницы, хранящиеся на вашем компьютере, и адреса файлов будут работать. Они будут работать и на живом сайте, но с одним условием — если не перемещать таблицу стилей в другое место (иначе придется корректировать пути).
Попробуйте потренироваться в использовании относительных путей как на локальном компьютере, так и на веб-сервере. Понимание того, как это работает, непременно пригодится вам в любом проекте.
Далее в учебнике: свойство background-repeat — управление повтором фонового изображения.
