В какой папке файлы css. Абсолютные и относительные ссылки. Подключаем CSS к HTML
В этой части самоучителя мы познакомимся с новыми для вас терминами, которые используются при описании папок и HTML-элементов.
Примечание: папку также часто называют директорией или каталогом.
Структура сайта
Не держите все файлы в одной папке. Даже небольшими сайтами намного проще управлять, если разложить HTML документы , изображения и другие ресурсы в разные папки, создав тем самым определенную структуру расположения различных файлов. Структурируя файлы как вам удобно, вы можете выбрать для себя достаточно гибкую систему организации файлов, учитывая то, что сайт может расти, система файлов при этом будет оставаться ясной и понятной. Структуру (иерархию) каталогов, в которых располагаются различные файлы, обычно можно увидеть в виде древа. Рассмотрим в качестве примера следующее изображение.
Как вы видите, структура - это всего лишь схема, отображающая вложенность одних каталогов в другие. В примере мы использовали всего три каталога, однако этого будет достаточно для того, чтобы описать всю необходимую информацию. Часто каталоги описывают с помощью терминов наследственных (семейных) связей. У нас есть папка под названием "Бананы", она расположена внутри папки "Фрукты". Папка "Фрукты" - это родитель каталога "Бананы", а каталог "Бананы" - ребенок (дочерний каталог) папки "Фрукты". Также у нас есть еще папка "Киви", которая является тоже ребенком каталога "Фрукты".
Чтобы вам лучше запомнить, опишем термины отдельно:
- Дочерний каталог - это папка, над которой в иерархическом древе есть родительский каталог.
- Родительский каталог - это папка, содержащая другой каталог.
- Есть еще такое понятие как "корневой каталог" - это основная (главная) папка, в которой расположены все прочие каталоги и файлы.
Структура элементов
Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:
Схему, показывающую вложенность элементов, можно представить следующим образом:
- Дочерний элемент - это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком .
- Родственный элемент
- это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими
, в примере такими элементами являются и ,
и . На практике это выглядит следующим образом: Самый лучший Блог Тут пример: отображение CSS-стилей в документе HTML
Обратите внимание на то, что внутри тега мы пишем код также по правилам CSS, используя фигурные скобки. В последующих статьях я более подробно расскажу правилах синтаксиса в CSS.
Подключение нескольких CSS-файлов к одному HTML-документу.
Правила HTML допускают подключение сразу нескольких файлов CSS. Многие вебмастера используют это: создают отдельные CSS-файлы для текста и для картинок. Или отдельные файлы для хедера, футтера и основного тела страницы. Давайте разберемся, как это реализовать.
Мы создаем несколько файлов с CSS-стилями. Пусть их названия будут style-1.css и style-2.css. Размещаем, как и в способе номер один, в одной папке с HTML-файлом.
Самый лучший Блог Тут пример: отображение CSS-стилей в документе HTML
Все по аналогии с первым способом, только в данном случае мы указываем ссылки сразу на два в файла.
Ссылка на CSS-файл внутри на файл этого же типа.
Кроме всех выше перечисленных способов, есть способ, который позволяет внутри одного CSS-файла размещать ссылки на множество других!
Реализуется это следующим образом:
Во-первых, нам необходимо подключить все тем же способом хотя бы один файл CSS к Вашему коду.Во-вторых, в уже подключенный файл вписываем следующий код:
@import url("style-2.css");
Данная строка подключает к нашему файлу дополнительный файл CSS. Если у Вас возникли какие-то трудности при подключении CSS, можете задать их в комментариях.
Как мы поняли из предыдущих двух уроков, технология CSS является мощнейшим инструментом, которым должен овладеть каждый вебмастер! Для улучшения усваивания материала я решил в конце каждого урока добавлять обучающее видео + тест на закрепление полученной информации.Тест на закрепление материала:
Нам необходимо подключить CSS-файл путем размещения на него ссылки в HTML-файле. Какой способ из ниже указанных является верным?
Вариант 1:
Вариант 2 :
Вариант 3:
Вариант 4:
Можем ли мы разместить каскады CSS непосредственно в файле HTML?