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

Существует два варианта ссылок: относительные и абсолютные.

1. Относительные пути

Путь не посредственно из HTML-файла. Применяется для решения таких задач как:

• путь до изображения (значение атрибута src в теге img)
  <img src=»путь до изображения»>
• подключение стилей CSS в файл HTML
• подключение аудио, видео форматов, а так же шрифтов

Классический вид ваших папок с проектами будет выглядеть так. Основной файл index.html, .editorconfig (скрытый файл с настройками) и папки со стилями (css), шрифтами (fonts) и изображениями (img).

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

В папке img лежит изображение с названием «raspisanie_urokov.img». Для того что бы правильно прописать путь в теге img мы берем папку первого уровня и название изображения.

<img src=»img/raspisanie_urokov.img»>

Если бы внутри папки img была бы еще одна папка, назовем ее school, то нам бы прошлось указывать весь путь от папки первого уровня до конечного файла, в нашем случае это изображение «raspisanie_urokov.img»

<img src=»img/school/raspisanie_urokov.img»>

Тут важно запомнить синтаксис:

/ — разделитель между папками

и расширение файла в конце .img (.pdf .png и тд)

Бывает обратная ситуация, когда нужно идти не от первого уровня папок, а от самого файла. Это часто используется при написании пути в файле стилей style.css.

background-image: url(«путь к файлу»)

папка «css» — первого уровня. Файл «style.css» лежит внутри этой папки и получается занимает второй уровень.

папка «img» — первого уровня. Изображение «raspisanie_urokov.img» лежит внутри папки и так же занимает второй уровень.

Получается, что мы не можем внутри файле style.css написать таким образом:

background-image: url(«img/raspisanie_urokov.img«)

нам как бы нужно вернуться на первый уровень папок (в корневую папку) и «зайти» в нужную нам папку и оттуда забрать изображение.

background-image: url(«../img/raspisanie_urokov.img«)

Корневая папка на примере «Проектная работа» обозначается двумя точками.

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

2. Абсолютные пути

Это пути, когда в написании используется / в самом начале пути:

<img src=»/img/raspisanie_urokov.img»>

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

В каком же случае используются абсолютные ссылки?

Когда вы пишите значение атрибута href в теге a (ссылка)

<a href=»https://yandex.ru»>Яндекс</a>

CSS — это каскадные таблицы стилей. Что это значит? За счет стилей мы можем задавать разные визуальные настройки для нашего сайта (цвета, шрифты, размеры, элементы и прочее). Почему они каскадные? Потому что применяются друг за другом сверху вниз.

Поэтому если у вас сначала написано свойство

color: red

а потом (ниже)

color: black

то применится черный цвет, потому что он стоит ниже в коде css — так работает каскад.

CSS — это не язык программирования. Это язык таблиц стиля. Файл формата .css в котором можно прописать выборочно стили для разных элементов из файла .html

Из чего складывается CSS файл?

• Правило CSS — это единица таблицы стилей внутри которого содержится описание стилей для определенного элемента из файла HTML. Правило состоит из селектора и блока объявления стилей
• Селектор — это наименование тега или наименование класса.
• Блок объявления стилей — это все свойства которые прописаны для одного селектора. Заключается в фигурные скобки. Состоит из свойства и его значения.
• Свойство в блоке стилей — это параметр, который мы хотим определить для селектора (цвет, размер, высота, ширина, шрифт, прозрачность и тд)
• Значение свойства в блоке стилей — это итоговое значение, которое будет отображаться на сайте (черный цвет текста, высота блока параграфа, какой конкретно шрифт будет применен к тексту, какой % прозрачности элемента и тд)

На скрине вы видите правило CSS

где p — это селектор, { color: green; font-style: italic; } — это блок объявления стилей, color и font-style — это свойство в блоке стилей, а green и italic — это значения свойств в блоке стилей.

Теперь, для всех тегов <p> у нас будет работать свойство стилей. Цвет текста будет зеленый, а шрифт наклонный.

Таким образом вы можете задавать стили любому тегу <div> <ul> <body> <a> и тд. А так же можете назначать дополнительные стили для тегов, используя собственные названия для селекторов. Это будет более понятно в процессе практики.

Как подключить CSS к файлу HTML

Классический способ

Создайте в папке вашего проекта папке css. Внутри этой папки создайте файл style.css

*файл можно создать через VS Code

Внутри файле создадим CSS правило с селектором body в котором зададим стили для всего контента на нашем сайте.

Стили и свойства для них пропишем вот так:

Сохраните изменения в файле.

Чтобы подключить этот файл style.css к нашему файлу главной страницы index.html необходимо воспользоваться тегом link

В файле HTML в разделе head пропишите тег link. Это одиночный тег, у него нет закрывающего тега. У линка есть два атрибута, которые нам понадобятся для подключения файла css

Воспользуемся лайфхаком и напишем в VS link:css

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

Разберем содержимое:

rel=»stylesheet» — с помощью этого атрибута браузер понимает, что мы подключаем именно таблицу стилей stylesheet

href=»style.css» — это такой же атрибут, как для ссылок в теге <a>, в котором нам необходимо указать путь до файла css

Если сохранить файл html в таком виде и обновить браузер, то никаких изменений мы не увидим. Все потому что автоматически ссылка на файл css заполняется не верно. В 13 уроке мы изучали, как правильно писать ссылки (пути к файлам).

Давайте «найдем» наш файл style.css

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

<link rel=»stylesheet» href=»css/style.css»>

Сохраните изменения и обновите браузер.

С помощью css свойств мы изменили отображение контента на нешей странице.

background-color: darkgray; — сделал задний фон темно-серым

color: white; — сделал текст нашего сайта белым

font-size: 40px; — увеличил размер шрифта до 40 пикселей

Быстрый способ.

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

Для этого способа нам не нужен файл css, код мы пишем прямо в файле html в разделе head

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

Импорт файла CSS со стилями

Такой способ так же позволяет подключить файл .css в разделе head в теге style

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

Поэтому чаще всего мы будем пользоваться с вами первым способом подключения.