Как прописать путь к css в html

Относительный и абсолютный путь к файлу

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

Итак, начнем с определения самого термина «путь»:

Путь (англ. path) — набор символов, показывающий расположение файла в файловой системе, адрес каталога.

Википедия

Если говорить о сайтах, то путь — это то же, что и ссылка. Ссылки могут быть абсолютными и относительными. Рассмотрим оба варианта более подробно.

Что такое абсолютный путь к файлу

Абсолютный адрес ссылки на файл включает в себя протокол (например, http:// ), имя сайта в Сети, подкаталог (или несколько подкаталогов), название файла. Пример того, как выглядит абсолютный URL:

Абсолютный путь можно использовать в 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 — управление повтором фонового изображения.

—
Длительность: 6:53

Итак, этот урок, на самом деле, имеет первостепенную важность. Просто важный-важный-важный, очень важный сейчас урок. Его порой сложновато-таки понять, поэтому читайте внимательно, и после урока ещё обязательно попишите сами код, повставляйте картинки, попрописывайте пути, чтобы закрепить это окончательно и не забыть. К тому же, правила, которые я сейчас буду говорить относятся абсолютно ко всем путям, которые вы используете при разработке сайтов. Те же самые правила, которые вы используете, когда прописываете путь к CSS-ке, те же самые правила, когда вы прописываете путь к картинке, или, когда вы будете в CSS прописывать пути к картинкам. Всё идёт от одного и того же, поэтому поехали!

Итак, давайте для начала, перенесу картинку в корень.

И в значении src оставлю просто название «Audi».

Я просто прописываю название нашего файла.

Внимание, этот файлик лежит в одной папке с «index.html». Поэтому, если мы пишем просто название файла, то открываются все файлики, которые лежат в той же папочке, где и наш файл, в котором мы прописываем код. То есть, если бы это была другая html-ка, которая лежала бы в другом месте, то исходные пути считались бы относительно этой html-ки. В данном случае у нас идёт отсчёт от нашего index.html.

Дальше мы эту картинку переносим в папочку «img», поэтому в src прописываем «img/».

Как это работает? Вы прописываете название папочки, в которую нужно перейти, в данном случае папочка «img». Ставите «/» и после него пишите файл, который нужно найти.

Если у вас файлик jpg или gif, то пишите jpg или gif. То есть вдруг вы там перепутаете, что нужно приписывать «png». Вы пишите полностью название файла с его расширением либо png, либо jpg, либо gif. В принципе, это те расширения, которые используются.

Итак, мы прописали пути к нашим папочкам, к нашему файлику. В принципе, сейчас всё легко. В начале пути слеш не ставите.

А что если вдруг у нас получится вот такая вот ситуация? Наша папочка «img» лежит не в корне нашего проекта, а немножчко назад, то есть в предыдущей папке.

То есть если вы поставите вот так «», то у нас ничего не откроется. Поэтому мы в начале мы ставим две точки и слеш:

Всё правильно прописали и открылось.

Разница в чём? Во-первых, есть такая тема, как абсолютные пути и относительные пути. Абсолютный – это тот путь, который мы с вами сейчас прописали, то есть относительно корня вашей файловой системы. Ни в коем случае так прописывать не надо. Многие по началу пишут именно так, потом закидывают на сервер и говорят: «А почему не открываются картинки?» Потому что вы прописали абсолютный путь, то есть, если вы закидывает на другой компьютер ваш проект, то этот путь абсолютно меняется. То есть, если там был «Иванов Кирилл» логин вашего аккаунта, то всё меняется. Получается, у другого человека будет другое название аккаунта и как минимум вот этот вот параметр изменится. Если вы перешли на Windows, кинули там с Mac’а или с Windows на Mac, то вообще этот путь изменится и будет другим. Поэтому обязательно всегда прописываем относительные пути относительно вашей папочки с «index.html».

Давайте с CSS-кой помудрим немножечко. В данном случае CSS-ка лежит в корне проекта, рядом с «index’ом», поэтому мы просто пишем название нашего файла.

Если мы захотим разделить всё это на подпапочки, то в пути добавляем папку ( и создаем ее в корне проекта) «css» и в нее закидываем «style.css».

То есть, если у вас потом будет много CSS-ок, то мы можем их просто закинуть в одну папку «css» и там все файлики держать, чтобы у нас не было хлама в корне.

Скажу вам на будущее: если вдруг что-то не подключается, не работают картинки, CSS-ка вдруг не подключилась, стили не задаются, то обязательно, в первую очередь, проверьте, как вы прописали пути. В самую первую очередь проверьте, есть ли у вас слеши вначале. Если у вас абсолютные пути прописаны, то удаляйте их к чертям и ставьте относительные пути. Если правильно, значит вы молодец, всё должно работать, ищите в другом проблему. Но, скорее всего, в первую очередь, смотрите на прописание путей. Самая частая по началу ошибка, когда не работают картинки, не получаются CSS-ки, там что-нибудь ещё не подключается, скорее всего, вы неправильно прописали пути. Поэтому после урока сразу же попрописывайте разные пути, поэкспериментируйте с этим, закрепите у себя в голове, потому что через час вы уже забудете всё, что я вам рассказывал, и потом будет паника: «Почему не подключаются файлики?»

Это очень важная тема, и она будет вас преследовать абсолютно всю жизнь. Поверьте мне. Поэтому хорошо её закрепите и попрактикуйтесь. Всё, надеюсь, у вас всё будет классно с этим уроком. Давайте, удачи! Идите дальше.

Прописать путь к css. Spring проект.

alt text

body < margin: 0; >

#head < height: 150px; /* Высота блока */ width: 100%; /* Ширина блока */ background: red; opacity: 0.8; >

Подключаю вот так, не работает. Все те же самые стили до этого лежали в самом html — все работало. Подскажие, как прописать путь.

Отслеживать
задан 11 мая 2013 в 18:05
3,329 6 6 золотых знаков 31 31 серебряный знак 54 54 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

У вас практически правильно, нужно только на уровень выше:

../../resources/css/main.css

Отслеживать
ответ дан 11 мая 2013 в 18:35
2,660 2 2 золотых знака 20 20 серебряных знаков 32 32 бронзовых знака

Не работает:( Хотя все логично, должно работать. Из стилей, когда все это было в html ссылался на изображения ./resources/image/fon.png

11 мая 2013 в 19:54 вот это заработало, не понимаю, в чем логика 11 мая 2013 в 20:13
@alex91, всё это зависит от логики spring , видимо, основной html файл сохраняется в папку webapp
11 мая 2013 в 20:18

а из css к изображениям вот теперь только так работает:) background: url(../../resources/image/mainfon.png)

11 мая 2013 в 20:38

логика тут простая, вспомните команду Change Directory (CD или CHDIR) параметр «..» в ней означает на уровень вверх, вот и гуляйте по каталогам, хоть куда.

13 мая 2013 в 5:15

«..» — это выход на уровень выше. «/» — вход в папку/файл.

Отслеживать
ответ дан 24 июн 2016 в 16:57
user213751 user213751
11 1 1 бронзовый знак

веб-программирование
html
css

Важное на Мете

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Абсолютные и относительные ссылки

Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.

Абсолютные ссылки

Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.

https://htmlacademy.ru https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2

Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.

Относительные ссылки

То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:

Предположим, мы загрузили страницу по такому адресу:

https://htmlacademy.ru/blog/frontend/html/index.html

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

Ссылка на файл в той же папке

1.html https://htmlacademy.ru/blog/frontend/html/1.html

Файл расположен в той же папке, где и текущая страница. Пишется без дополнительных знаков.

Ссылка на файл в папке ниже текущей

directory/3.html https://htmlacademy.ru/blog/frontend/html/directory/3.html

Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.

dir1/dir2/5.html https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html

Страница находится на две папки ниже текущей.

Ссылка относительно корня сайта

/2.html https://htmlacademy.ru/2.html

Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.

/dir1/dir2/4.png https://htmlacademy.ru/dir1/dir2/4.png

Файл на два уровня ниже корня сайта.

Ссылка на папку выше текущей

../6.html https://htmlacademy.ru/blog/frontend/6.html

На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .

../../7.html https://htmlacademy.ru/blog/7.html

На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.

Комбинированная ссылка

../../../dir1/dir2/8.html https://htmlacademy.ru/dir1/dir2/8.html

На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .

Все приведённые примеры одной картинкой:

id-ссылки (якорные ссылки)

Якорные ссылки пригодятся, если нужно сослаться на определенное место документа — например, на заголовок. Для этого заголовку нужно установить определенный атрибут id , а в ссылке через # дописать этот атрибут в конце.

Содержание первой главы

Ставим якорную ссылку на той же странице:

Ставим якорную ссылку на другую страницу:

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

Что будет, если ошибиться

Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.

Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .

Обратите внимание на текст ссылки

Сейчас, конечно, такого никто в больших компаниях не допустит — но если вы сначала делаете страничку на своём компьютере, могут быть нюансы. Поэтому пользуйтесь нашей шпаргалкой, чтобы избежать ошибок.

Ссылки — сила:

Что такое ссылки и как их ставить. Тег a
Как ставить пустые ссылки
Что лучше использовать: ссылки или кнопки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

Что такое HTML?

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

Основы разметки

Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.

Теги обычно идут парами: открывающий тег и закрывающий тег . Например:

Мой заголовок
 Это мой первый абзац. Привет, мир!

Некоторые теги можно не закрывать:

Теги и атрибуты

У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:

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

Формы и элементы форм

Формы используются для сбора данных от пользователей. Например, когда вы вводите что-то в поисковой строке или заполняете регистрационную форму.

— это тег формы.
action — куда отправляются данные.
method — метод отправки (обычно get или post ).
— поле для ввода данных. Тип text означает текстовое поле.
— метка для поля ввода.

Списки в HTML

Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.

Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):

Первый элемент списка
Второй элемент списка
Третий элемент списка

Элемент списка с маркером
Еще один элемент с маркером

Ссылки и навигация

Чтобы ваши пользователи могли переходить от одной страницы к другой, используются ссылки. Тег для создания ссылки — , атрибут href указывает на адрес, куда должна вести ссылка:

Таблицы

  Имя  Возраст  
 Джон  30  
 Элис  25

Имя	Возраст
Джон	30
Элис	25

Использование изображений

Семантическая разметка

Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:

  Заголовок статьи
 
 Первый абзац статьи.
 
 Автор статьи

Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��

1 ноября 2023

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

18 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

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

18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

12 сентября 2023

Осмысленный alt-текст: 6 правил

Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.

Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.

31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

13 июня 2023

Как понять, что перед вами заголовок

Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.

Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.

При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.

В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.

8 июня 2023

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

1 июня 2023