Как подняться на уровень выше в директории html
Перейти к содержимому

Как подняться на уровень выше в директории html

  • автор:

Как подняться на уровень в пути src URL в HTML?

Я сохраняю таблицы стилей в /styles, а изображения в /images для веб-сайта. Как указать путь в таблицах стилей, чтобы искать в каталоге изображений для указанных изображений? например, в background-image: url(‘/images/bg.png’); html css relative-path

Поделиться Источник 26 января 2011 в 22:42

7 ответов

Используйте .. , чтобы указать родительский каталог:

background-image: url('../images/bg.png'); 

Поделиться 26 января 2011 в 22:43

  • Начиная с, / возвращается в корневой каталог и начинается там
  • Начиная с, ../ перемещает один каталог назад и начинается там
  • Начиная с, ../../ перемещает два каталога назад и начинается там (и так далее. )
  • Чтобы перейти вперед, просто начните с первого подкаталога и продолжайте двигаться вперед.

Нажмите здесь для получения дополнительной информации!

Поделиться 16 ноября 2016 в 08:48

background-image: url('../images/bg.png'); 

Вы можете использовать это часто, как хотите, например, ../../images/ или даже в разных позициях, например, ../images/../images/../images/ (то же самое, что и ../images/ , конечно)

Поделиться 26 января 2011 в 22:43

В Chrome, когда вы загружаете веб-сайт с какого-то HTTP-сервера, оба абсолютных пути (например, /images/sth.png ) и относительные пути к некоторому каталогу верхнего уровня (например, ../images/sth.png ) работают.

Но!

Когда вы загружаете (в Chrome!) HTML-документ из локальной файловой системы, вы не можете получить доступ к каталогам над текущим каталогом. То есть вы не можете получить доступ к ../something/something.sth , и изменение относительного пути на абсолютный или что-то другое не поможет.

Поделиться 26 января 2011 в 22:53

Если вы храните таблицы стилей/изображения в папке, чтобы несколько веб-сайтов могли их использовать, или хотите повторно использовать одни и те же файлы на другом сайте на одном сервере, я обнаружил, что мой браузер/Apache не позволяет мне перейти в какую-либо родительскую папку над корневым URL сайта. Это кажется очевидным по соображениям безопасности — нельзя просматривать на сервере любое место, кроме указанных папок веб-сайта.

Например, не работает: www.mywebsite.com/../images

В качестве обходного решения я использую Symlinks:

Перейдите в каталог www.mywebsite.com Запустите команду ln -s../images images

Теперь www.mywebsite.com/images укажет на www.mywebsite.com/../images

Поделиться 04 марта 2020 в 10:32

Предположим, у вас есть следующая структура файлов:

-css --index.css -images --image1.png --image2.png --image3.png 

В CSS вы можете получить доступ к image1 , например, используя строку ../images/image1.png .

ПРИМЕЧАНИЕ : Если вы используете Chrome, это может не работать и вы получите ошибку, что файл не удалось найти. У меня была та же проблема, поэтому я просто удалил всю историю кэша из Chrome и это сработало.

Поделиться 01 ноября 2018 в 10:11

Если вы хотите перейти в корневую папку, используйте / или ctrl+space, если вы хотите перейти в обратную папку, используйте../ и ctrl+space, если это не рекомендует, и не используйте живой сервер, если вы используете../

Как поднять рамку выше? [закрыт]

Закрыт. Этот вопрос необходимо уточнить или дополнить подробностями. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 7 лет назад .

введите сюда описание изображения

Может кто сталкивался? Можно их как то рядом поставить? вот как оно выглядит:D

Отслеживать
задан 2 дек 2016 в 7:54
3 1 1 бронзовый знак

2 ответа 2

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

Ссылка на страницу не помешала бы, но судя по всему у вас это блочные элементы, какими по-умолчанию являются теги есть несколько вариантов на вскидку:

  1. выставить этим блокам свойство css float (jsfiddle)
  2. обернуть в родительский элемент (если они на одном уровне с текстом) и этому родителю задать display: flex . Почитать доходчиво о flex можно здесь (пример jsfiddle, если будете копировать, не забудьте удалить комментарии из стилей)

Отслеживать
ответ дан 2 дек 2016 в 8:06
161 1 1 золотой знак 2 2 серебряных знака 13 13 бронзовых знаков
«Ссылка на страницу не помешала бы» — помешала бы. А вот минимальный воспроизводимый пример — нет.
2 дек 2016 в 8:13

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

как поднять элемент выше?

введите сюда описание изображения

элемент «video» ниже, чем надо. Выровнять с помощью padding и margin не вышло. Как выровнять элемент выше?

Отслеживать
задан 11 авг 2020 в 15:01
33 1 1 серебряный знак 4 4 бронзовых знака

1 ответ 1

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

а как надо? Рисунок в студию.

паддингами вы его не выравняете, т.к. паддинги — это отступы ВНУТРИ него.

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

float тут в принципе лишний.

а еще есть свойство transform:translate(x,y) . Попробуйте его.

Отслеживать
ответ дан 11 авг 2020 в 15:13
Инквизитор Инквизитор
5,955 1 1 золотой знак 7 7 серебряных знаков 25 25 бронзовых знаков

  • html
  • css
    Важное на Мете
Похожие

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

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

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

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.4.30.8420

Как вставить css в html: 3 способа добавить css в html

Вы можете по разному добавить css в ваш html-файл. Есть быстрые варианты, есть правильные. Мы рассмотрим все возможные.

1. Подключение внешнего файлы

Самый распространенный и правильный вариант — это просто подключить внешний файл CSS.

Это делается внутри тега с помощью тега link.

Какие преимущества у этого способа? Во-первых, это просто удобно. Все ваши стили будут лежать в отдельном файле. Не потеряются, как минимум. Да и редактировать можно без вмешательства в html. Во-вторых, вы сможете этот файл закешировать и ускорить загрузку вашего сайта.

Частый вопрос: что делать, если файл index.html лежит не в корне, а в отдельной папке — как тогда подключить стили?

Ответ простой: нужно прописать правильный путь к файлу styles.css. Предположим ваш файл styles.css находится в папке css, а index.html в папке templates. Тогда внутри тега в html подключаете стили таким образом:

Здесь вы, как бы, поднялись на один уровень вверх с помощью вот этих символов: «../». Если нужно подняться на два уровня вверх, то пишите вот так: «../../»

2. Внутренние стили

Внутренние стили можно прописать для конкретной html-страницы. Вы не подключаете файл, как в предыдущем примере, а вставляете css код прямо внутрь html. Но делаете это с двумя правилами.

Первое правило: вставляйте внутри тега

Второе правило: вставляйте css стили внутри тега

Таким образом у вас должен получиться вот такой код:

 body < background-color: #cccccc; >h1 

И все это нужно вставить внутри тега .

Зачем так делают? Возможно, у вас нет доступа к редактированию файлов css, либо вы хотите, чтобы новый css код срабатывал только на этой странице, а возможно вы не хотите ждать, когда загрузится файл styles.css и вставляете css код прямо в html страницу. Отчасти это ускорит загрузку страницы, однако, такой подход затрудняет поддерживать и редактировать сайт в дальнейшем.

Если вы вставляете css код через на странице, к примеру, contact.html, то эти стили будут действительны только на этой конкретной странице. На странице about.html они уже не будут работать.

3. Встроенные стили

Встроенные стили задаются для конкретного элемента через атрибут style. Давайте сразу покажем, как это выглядит. Предположим у вас есть заголовок h1 и вы хотите изменить размер шрифта и разместить текст по центру блока. Тогда прописываем вот так:

Заголовок страницы

Таким образом эти стили будут применены к конкретно этому элементу. Другие H1 будут без изменений, так как мы встроили инлайновые стили только для конкретно вот этого заголовка.

Одно из преимуществ такого метода, это то, что инлайновые стили как бы перекрывают стили прописанные в css файле. То есть они считаются более весомыми.

Есть еще несколько «экзотичных» методов вставки css в html код. Однако, мы их не будем рассматривать.

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *