Подключите css файл style css находящийся в директории на два уровня выше
У меня две папки. Одно называется app, которое содержит index.html, sass, img. И вторая сборка с папками: css, js. Какой путь я должен ввести в index.html, чтобы получить доступ к файлу style.css, который находится в build / css / style.css? Я пробовал это, но не работает.
Ваши папки css и js должны находиться в том же каталоге, что и приложение , где index.html находится тогда, попробуйте css/style.css
Если обе папки app и build являются братьями и сестрами, используйте это
Вы должны изменить это стать
Включите это в свой HTML-файл: -
Папки css и js должны находиться в том же каталоге, что и приложение , где находится index.html , а затем попробуйте css/style.css
Итак, приложение , которое содержит index.html, sass, img, теперь должно также содержать папку js и css. Тогда это обязательно должно сработать.
Если вы сохраняете каталог файлов как есть, вы должны понимать.
* Начиная с / , возвращается в корневой каталог и начинается там, затем ../ перемещает один каталог назад и начинается там и так далее ../../ . В этом случае должен работать.
Picture.jpg находится в той же папке, что и текущая страница
Picture.jpg находится в папке изображений в текущей папке
Picture.jpg находится в папке изображений в корне текущего веб-сайта.
Picture.jpg находится в папке на один уровень выше текущей папки
Относительный путь относительно файла, в который вы поместили ссылку. В вашем случае style.css находится в папке build / , которая находится рядом с папкой app , которая охватывает index.html . Поэтому, если вы хотите сделать ссылку на style.css из index.html, обычно вам следует использовать относительный путь ../build/css/style.css .
Но убедитесь, что файл css действительно доступен. Это зависит от того, используете ли вы веб-сервер, какой веб-сервер используете и какова отправная точка, с которой вы запускаете свой проект.
Если вы просто откроете index.html , щелкнув файл в проводнике, то сможете использовать его для работы style.css:
Однако вышеуказанный метод не рекомендуется. Обычно вам нужно использовать веб-сервер для обслуживания таких статических файлов, как js, css.
Если вы используете веб-сервер для обслуживания статических файлов, убедитесь, что вы запускаете его с начальной точкой, которая уже охватывает папки app и build (т.е. все файлы вы хотите, доступны), например, с родительской папкой этих двух папок. В таком случае, когда вы хотите открыть index.html , вы собираетесь посетить что-то вроде http: // localhost: 8000 / app / index.html (поскольку index.html находится в папке app /, вам нужно добавить" app / "). Когда применяется этот макет, у вас есть 2 способа вставить строки css:
Кстати, в этом случае это тоже нормально, с абсолютным путем:
Все будет по-другому, если вы используете другие механизмы для обслуживания статических файлов, таких как css, js. Но основной принцип таков прост: убедитесь, что файлы, которые вы хотите, доступны, а относительный путь, который вы используете, действительно показывает отношение пути между опорной точкой и целевым файлом, на который указывает ссылка.
В прошлых уроках мы познакомились с разметкой элементов с помощью HTML. Многие из этих элементов уже имеют какое-то своё визуальное оформление: параграфы имеют отступы, ссылки выделяются подчёркиванием и цветом, заголовкам устанавливаются другие значения размера шрифта. Обычно этого недостаточно для создания полноценных современных сайтов. Какие-то стили нам просто не подходят, а какие-то элементы мы хотим стилизовать отдельно.
Для визуального оформления WEB-страницы создан язык CSS. CSS переводится как каскадные таблицы стилей (Cascading Style Sheets). Именно этот язык отвечает за то, как наши HTML-элементы будут выведены пользователю в браузере.
В этом уроке мы разберём ту часть аббревиатуры, которая относится к таблицам стилей. Что такое каскадность и как это работает, вы сможете прочитать в следующем уроке.
Селекторы
Селекторы — краеугольный камень всего CSS.
«Не так важны стили, как то, к чему они применяются» © Народная мудрость
Селекторы позволяют выбирать элементы, к которым будут применяться стили. Это очень мощный и многогранный инструмент, который позволяет выбирать не только по тегу, но и по классу, идентификатору, наведению мыши, разным атрибутам, выбирать только чётные или нечётные элементы и так далее.
Разбор каждого селектора — это тема для целого курса. Сейчас нас интересуют три основных селектора, которые можно назвать базовыми:
Рассмотрим все три селектора на реальном примере:
Файл index.html
Файл main.css
После применения этих стилей получится следующая картина:
Использование тега style
Вторым способом использования CSS является использование стилей в специальном теге style. Для этого нет необходимости создавать отдельный файл и подключать его к HTML. В этом случае тег style обычно указывается внутри секции head. Хоть это и не обязательное правило, но желательно придерживаться именно такой структуры.
Данный способ не является основным, хотя и рекомендуется для некоторых стилей. Это позволит отобразить некоторые стили ещё до того, как загрузится CSS-файл. Какие стили рекомендовано так выносить, вы сможете узнать в процессе становления вас как профессионала.
Подключение CSS
Использовать CSS на странице можно с помощью нескольких способов:
- использование специального файла;
- использование тега внутри HTML-разметки;
- записывая стили непосредственно у нужного тега. Этот способ называется инлайн (inline) записью.
Разберёмся с каждым способом отдельно.
Inline-стили
Последним вариантом использования CSS являются инлайн-стили. Они подключаются с помощью атрибута style у любого тега в разметке. Это наименее предпочтительный способ. Его тяжело читать, особенно если у тега десяток стилей. К тому же вы не сможете записать стили для всех одинаковых тегов. Придётся для каждого указывать отдельно. Это приведёт к постоянному копированию стилей.
Возьмём прошлый пример и добавим inline стили:
Решение
Сусанин_ Иван, вам правильно подсказали. Прописывайте путь к файлу со стилями корректно.
Означает, что папка css находится в той же папке что и файл, с которого на него идет ссылка. В вашем случае index.html
При перемещении index.html в папку Lop, находящуюся в корне сайта Saite, мы должны изменить путь к стилям. Он станет следующим
Добавил на свой сайт точку входа через index.php, который лежит в /www
Остальные файлы сайта лежат в папках на одном уровне с /www, стили лежат там же (/styles).
Как указать путь к стилям в файлах с вёрсткой, чтоб они стали видимыми?
Пробовал так:
Сохранение по относительному пути
Добрый день. Прошу форумчане помогите разобраться со скриптом Стоит задача в макросе сохранять.
Создание папок по относительному пути
Делаю простой текстовый квест на Java, разбираюсь с хранением настроек в файле. В теории.
Загрузка картинки в image по относительному пути
Есть image в который нужно загрузить картинку из папки images,файл у меня называется так же как и.
Создание файла по указанному относительному пути
есть кусок кода, он работает, создает файл "Set.txt" Procedure Create() If CreateFile(0.
Если "styles" и "www" - соседние папки, то написано верно. Попробуйте проверить, может где в пути ошибка в одну-две буквы закралась, например папка не "styles", а "style" называется.
п.с. Да, еще желательно атрибут type указываеть (но браузер без него должен прочитать):
Это не так. В HTML5 type="text/css" и пользуется по умолчанию для rel="stylesheet". Поэтому, нет никакого смысла указывать его/
DrankUser, что пишет консоль? Кэш чистили?
У меня проект, в папке www лежит index.php
в соседней папке styles находится main.css
вот код из файла template.php из папки views, которая тоже на том же уровне
Если я перекину папку styles внутрь www и уберу точки в начале, то всё работает.
Добавлено через 10 минут
И да, я чистил кэш
Стили CSS
Любые стили CSS, будь то цвет текста или целая анимация, записываются по одной и той же формуле: название стиля: значение; .
Чтобы добавить стиль к элементу, необходимо использовать селектор. Он указывает, к какому именно элементу или элементам нужно добавить наши стили. Для примера возьмём следующую HTML-разметку:
Изменим размер и цвет шрифта в этом предложении. Это можно сделать следующей CSS-записью:
Что означает эта таинственная запись выше? Её можно условно разбить на три основные составляющие:
- p — это селектор. Здесь мы говорим, чтобы браузер выбрал все параграфы на странице. О том, какие бывают селекторы, мы поговорим чуть позже.
- Фигурные скобки . Они отделяют селектор от правил. Все правила записываются уже внутри этих фигурных скобок.
- Свойства. Они записываются по схеме, которая представлена ниже. Чем больше у вас будет практики, тем больше различных свойств и их значений вы будете знать. Не пытайтесь выучить их все сразу. Всегда используйте документацию. Даже опытные разработчики прибегают к ней, чтобы вспомнить правильные значения того или иного свойства.
Разберём некоторые свойства, которые помогут вам оформлять текст:
- font-size. Это свойство позволяет задать размер шрифта. Со временем вы узнаете множество различных единиц, в которых можно записать значение. На начальном этапе используйте значения в пикселях. Это достаточно простая и понятная единица измерения, которая не зависит от того, какие ещё стили указаны у текста.
- color. Это свойство поможет вам установить новое значение цвета для выбранного текста. Цвет может записываться разными способами. Помимо этого есть большой набор цветов, которые можно записать словами. Это отличный способ познакомиться со свойством color. Посмотреть на все такие записи можно здесь.
- text-align. Свойство, устанавливающее положение текста. Может принимать одно из следующих значений: left, right, center, justify.
Решение
Эм.. похоже ваш хостер настроил права доступа таким образом, что все файлы сайта должны лежать только внутри папки "www"
И снова мимо)
Ибо сервер у меня поднят собственными руками, причём на локалхосте
В коде php присоединение файлов таким образом работает, короче, работает всё, КРОМЕ этого чёртового CSS
Я уже и не знаю что вообще может быть не так
Короче, я создал отдельно файлы html и css, первый просто с body и подключением стиля, второй с окраской body в красный, ну в общем тестовый вариант.
По папкам раскидал как на своём сервере.
Теперь итог:
1. Консоль я так и не понял что должна сделать, в хроме она пуста
2. Запуск файла html с компа красит его в красный
3. Запуск этого же файла через сервер не делает ничего.
Добавлено через 15 минут
И ещё я заметил одну прикольную штуку
Если в линке указать относительный путь ../styles/main.ccs, а саму папку положить в www, то стили будут подгружаться
Узнал в чём моя проблема.
Папка www у меня является DOCUMENT_ROOT сервера, именно поэтому невозможно было получить CSS и JS файлы из других папок. PHP скриптов эта проблема не касается
Как вставить по относительному пути
Есть код <Image x:Name="Im5d55" Source="Images/5d55.jpg" /> Но если он просто лежит в папке.
Как обратиться к каталогу по относительному пути
Здравствуйте. Есть исполняемый .jar файл, там есть относительные ссылки, например /Data/Labs/.
Найти абсолютный путь к файлу по относительному пути
Здравствуйте, надо автоматизировать рутинную работу, решил сделать это на python. В.
Как загрузить файл в TextBox по относительному пути
Имеется программа состоящая из нескольких форм. При открытии одной из форм в TextBox загружается и.
Всем доброго времени суток. На связи Алексей Гулынин. В данной первой статье по CSS, я бы хотел рассказать в целом о CSS, и о том, как подключить CSS к html-странице. CSS — это каскадные таблицы стилей (или просто можно называть стилями), которые отвечают за то, как отобразить элементы на вашей html-странице. Если просто добавлять элементы на html-страницу без атрибутов, то все они будет размещаться сверху вниз и будут выравнены по левой стороне браузера. Это скучно и однообразно.
Элементы html — это каркас нашей страницы , т.е. html отвечает за то, ЧТО отображать на странице. CSS, в свою очередь, отвечает КАК отображать все эти элементы. Можно создать одну и ту же html-страницу и придумать для неё тысячи вариантов оформления. И всё это будет выглядеть, как различные сайты. Вы можете погулять по интернету и посмотреть сколько много красивых сайтов на его просторах.
На данный момент, вы должны были уяснить, что, если вы хотите создать красивый дизайн, то без знания CSS, вы этого сделать не сможете. Поэтому вперед, к постижению данной науки, называемой CSS .
Давайте подключим файл стилей CSS к html-странице. Делается это в заголовке документа, между тегами
.. :Давайте разберемся, что мы здесь написали. Файлы стилей подключаются с помощью тега link . Знакомый уже нам атрибут href указывает на путь до файла стилей. Тут можно указывать, как абсолютные, так и относительные пути. В данном случае подразумевается, что наш файл style.css находится в одной директории с файлом, в котором мы подключаем стили. Атрибут type="type/css" указывает, что тип документа — css, атрибут rel="stylesheet" говорит браузеру, что мы подключаем стили ( rel с англ "relationship" — отношения).
Можно также задавать стили элементам и другими способами. Давайте создадим html-страницу со следующим содержимым:
Помимо создания файла со стилями, мы может записывать стили в заголовок документа с помощью тега . Это, так называемый, внедренный стиль . Давайте сделаем, чтобы все наши абзацы имели красный цвет (подробнее об этом поговорим в следующей статье, посвященной селекторам CSS). Код будет иметь следующий вид:
Таrже стили можно задать прямо в элементе, с помощью атрибута style (это так называемый inline-стиль ). Давайте сделаем второй абзац зеленым и выравним его по правому краю. Для этого нужно добавить такую конструкцию:
Теперь мы видим, что абзац стал зеленым и выравнился по правому краю.
Существует ещё один способ добавления стилей на html-страницу. Это импортированные стили . Они задаются в заголовке страницы, но из файла, а не напрямую:
При добавлении стилей на страницу могут возникать конфликтные ситуации. Например, в файле стилей мы можем задать цвет текста всех абзацев (тег p) красным, а к одному из них применить inline-стиль. Как же определить браузеру, какой цвет использовать? Давайте определим приоритеты, которые используются браузером:
1) Стили из файла (имеют самый низший приоритет)
2) Импортированные стили
3) Внедренные стили
4) inline-стили (имеют самый высокий приоритет, т.е. браузер выполнит их в первую очередь).
В данной статье вы узнали, как можно подключить CSS к html-странице и как можно применять эти стили.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Вложенность селекторов
В реальной разработке не всегда удаётся пользоваться только этими тремя видами селекторов в том виде, в которых вы их только что изучили. Зачастую нам необходимо ограничить область, для которой будут применяться стили. Разберём на примере.
Более простым решением станет использование вложенности селекторов. Вначале посмотрим, как решить нашу задачу:
Разберём, что за селектор был указан. Здесь мы указали комбинацию трёх селекторов: .news, article и h2. Каждый из них по отдельности вы уже знаете. Разделив их пробелом, мы сказали браузеру: «Возьми все заголовки h2 из article, который лежит внутри элемента с классом news, и примени к нему стили». Читать селекторы стоит именно таким образом — справа налево. Такой подход называется вложенностью селекторов. Можно комбинировать что угодно и с какой угодно глубиной.
Важно: для удобной работы не стоит использовать очень большую вложенность. Старайтесь использовать комбинацию не более 2 или 3 селекторов.
Важно понимать, что такая запись .news article h2 выберет все заголовки второго уровня во всех article, которые лежат внутри блока с классом .news. Давайте немного видоизменим вёрстку, чтобы это проверить.
Такой тип селекторов называется контекстным или селектор потомков. С его помощью мы выбираем всех потомков, которые встречаются внутри самого левого селектора.
Как же нам выбрать только те заголовки, которые относятся непосредственно к новостям, а не к похожим новостям или заголовкам других секций? Здесь нам на помощь придёт дочерний селектор. Его суть в выборе только тех элементов, которые непосредственно лежат внутри нужного нам блока. Без учёта всех остальных вложенностей. Чтобы указать такой селектор, используется символ > . Укажем, что нам нужны только те article, которые лежат внутри .news. И нам нужны заголовки, которые находятся внутри этих article. Это делается следующим образом:
Здравствуйте!
Такой вопрос. Есть сайт на жестком диске, на сайте есть около 10 страниц, на все страницы сделал гиперссылки, все стили css и java script работает. Но стоит мне перенести одну страницу в другую папку, (в той же папке сайта, основной.) как перестают работать все стили. Хотя тег link и путь указаны правильно. Почему не работаю стили?
css стили
На странице выводятся две конструкции 1) <div <ul> <li <div.
Css стили
Что нужно прописать ,чтобы картинка встала в отмеченной области? Html не предлагать ,так как нужна.
Стили в CSS
Добрый вечер. Я новичек в CSS и мне от Вас нужна очень небольшая помощь. body < font-family.
Если вы перенесли страницу в другую папку, то очевидно, что путь к css указан не верно.
Добавлено через 2 минуты
Либо же продемонстрируйте кодом как вы подключаете css к файлу.
Sn1p3rOk, путь для css остался как и был, я саму папку с css, ни куда не переносил.
Fedor92, Fedor92, спасибо за ссылку, но это не то. Так, как сайт находится на компе, использую относительные ссылки.
Вообщем опишу картину заново.
Есть главная страница сайта, называется "Index.html" она находиться в главной папке, которая находиться на рабочем столе, газвание папки Saite. Так же в папке Saite есть папка css в которой находиться файл stylesheet.css. Путь в index.html прописан так:
Все работает отлично, но стоит мне перенести файл index.html в созданную папку под названием Lop (в корневой папке), как все перестает работать.
Добавлено через 5 минут
P.s И да, если закинуть папку css в которой находиться файл stylesheet.css, в папку Lop - то все стили начинают работать.
Использование отдельного CSS-файла.
Данный способ один из самых удобных в реальной разработке. Так как стилей в проекте обычно много, то держать их в HTML-файле не очень удобно. Связано это с тем, что HTML-файл становится очень большим и ориентироваться в нём становится невозможно. Чтобы этого избежать, можно создать отдельный CSS-файл. Этот файл будет иметь расширение .css, имя же может быть произвольным.
Представим, что на компьютере создана отдельная директория с проектом. Она может выглядеть следующим образом:
Добавим основную информацию в файл index.html:
Теперь необходимо подключить файл main.css в наш файл index.html. Для этого используется специальный тег link. У данного тега необходимо указать атрибут href, значением которого будет путь до файла main.css. Тег link указывается в секции head.
Дополнительно разберём эту запись: ../css/main.css . Её можно условно разбить на три составляющие:
- ../ — переход в директорию выше. Изначально файл index.html находится в директории html, поэтому мы «выходим» из неё в директорию site.
- css/ — переход в директорию css.
- main.css — указание имени и расширения файла, который мы хотим подключить.
Если бы наши файлы index.html и main.css находились в одной директории, то подключение выглядело бы следующим образом: href="main.css" .
После подключения файла мы можем записывать все нужные стили именно в файле main.css. Они автоматически подключатся на наш сайт.
Читайте также: