Прописать путь к css. Spring проект.
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.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Относительный и абсолютный путь к файлу
В данном уроке мы объясним новичкам, что такое абсолютный и относительный путь к файлу, а также в каком случае какой из них лучше использовать. Если вы уже знакомы с данной темой, вы можете переходить к следующему уроку.
Итак, начнем с определения самого термина «путь»:
Путь (англ. 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 — управление повтором фонового изображения.
Как прописать путь к CSS файлу
На сайте путь, это тоже самое, что и ссылка. Ссылки могут быть абсолютными и относительными. Разберемся с определением термина «путь»:
Путь (англ. path) — набор символов, показывающий расположение файла в файловой системе, адрес каталога.
Википедия
Абсолютный путь к файлу Абсолютный путь описывает местоположение файла или папки, начиная с самого высокого уровня, и включает имена всех папок в иерархии их вложенности, ведущих к файлу.На самом высоком уровне находится корневая папка сайта. Абсолютный адрес ссылки на файл включает в себя протокол, например, http:// или https://, далее имя сайта, то есть доменное имя, подкаталог или несколько подкаталогов, и только затем название файла. Пример того, как выглядит абсолютный URL:
https://stylecss.ru/css/style.css
Из примера мы можем понять, что файл style.css находится в папке css, которая в свою очередь находится в корневой папке сервера с доменным именем stylecss.ru. Абсолютный путь к файлу всегда будет указывать на одно и то же место, независимо от того, где расположен содержащий ее документ, так как такой путь можно так же использовать и в CSS файле, например, чтобы прописать путь к картинке для фона. Ошибка в записи абсолютного пути приводит к тому, что нужный файл не будет найдет.
Относительный путь к файлу
Корневой относительный путь — это путь, который указывает на расположение файла относительно корневого каталога сайта. В этом случае адрес не содержит протокола, имени домена, и начинается со знака слэша /, который указывает на корневую папку. Пример того, как выглядит относительный URL:
/css/style.css
Относительный путь к файлу описывает местоположение файла относительно места расположения текущего документа, в котором инициализируется ссылка с данным адресом. Если вы указываете просто имя файла, без пути к нему, то браузер будет искать его в той же папке, где находится текущий документ. Если перед именем файла поставить точки, например ../css/style.css, то брауузер будет искать файл в папке, находящейся на один уровень выше, чем папка с текущим документом.
Как указать путь к файлу style.css?
Kinomonster (Папка 1 уровня) [ assets (Папка 2 уровня) [ css
7 ответов
Пробовал через ctrl и u открывать исходный код в браузере и нажимать на css файл? Если файл таким образом открывается, значит хорошо и файл подключён, просто через ctrl и f5 нужно обновить страницу в браузере или открыть в приватном режиме браузера.
Заархивируй папку с проектом киномонстр и выложи куда-нибудь, я у себя посмотрю, есть ли ошибка или исходный код скачай и запусти, там 100% все работает. Исходный код можно скачать, где видео уроки, справа сверху есть вкладка Файлы, разорхивировать только не забудь все файлы из архива исходного кода.
index.html должен находится в корне папки kinomonster, поэтому стили у тебя не работают. index.html или index.php всегда должен быть в корне, потому что по умолчанию всегда открывается этот файл, он индексный. Если хочешь, чтобы с твоей структурой папок и файлов работали стили, нужно так подключать: