Простая вёрстка в HTML + CSS. Урок №10.

Создаём файл CSS.

Продолжаем тему прошлого урока, где мы немного попытались понять, что же такое CSS. Прежде всего, нам необходимо создать файл со стилями, и сохранить его рядом с нашим файлам HTML. Но поскольку, в процессе создания сайта файлов, с расширением CSS может быть несколько, то лучше создать, для них отдельную папку.  И так открываем ту папку, где хранится наш файл index.html, в открытой папке создаём папку и называем её «CSS», так нам легче будет понять, что здесь хранится.  Далее открываем редактор «Notepad++» Файл > Новый, и сохраняем документ под именем «STYLE» с расширением «CSS», то есть должно получиться вот так, style.css. И у нас появляется две папки и один индексный файл.

Рисунок № 1.

 Простая вёрстка в HTML + CSS.  Урок №10.

Подключаем CSS к HTML.

Для того что бы наш фай style.css смог взаимодействовать с файлом index.html, необходимо меду тегами «HEAD» разместить, код вот такой строки:

<link rel="stylesheet" type="text/css" href="css/style.css">

Первым что мы видим это тег <link> который переводится как «канал связи», то есть мы говорим браузеру сейчас будет произведено подключение документа , далее атрибут  rel (relation- отношение) и  stylesheet  (стилям). То есть данный канал связи имеет отношения к стилям. Затем «type», то есть тип документа "text/css" и завершающим ответственным этапом здесь является сама ссылка на подключаемый файл, href="css/style.css", где указываем имя созданной папки со стилями и сам стилевой файл.

Рисунок № 2.

 Простая вёрстка в HTML + CSS.  Урок №10.

Переносим стили с HTML в CSS.

На предыдущих занятиях, мы с вами практически  создали стили, на всей нашей странички HTML. Теперь эти готовые стили нам необходимо перенести в файл style.css, и начнём с тега BODY, где у нас указан фон нашего шаблона.  В файле CSS пишем следующее body{}, где BODY является селектором тегов, а фигурные скобки это то место где будут размещаться стилевые правила для данного тега. Теперь в файле index.html, где после тега BODY идёт атрибут style, копируем всё то содержимое что идёт между двойных кавычек и вставляем в css. Немного подровняв, должно получиться вот так:

body{
                background-image: url('images/fon.jpg');
                background-attachment: fixed;
}

В файле index.html удаляем лишний код в теги BODY, что бы он остался вот таким чистым <body>, как будто мы его только создали. Сохраняем изменения в документе и идём к просмотру в браузере. Если всё сделали правильно, то фон нашей страницы должен исчезнуть, произошло это, потому что браузер не может найти путь к изображению. Давайте найдём причину ошибки. Обратите внимание на верхний код, браузер заходит и читает, что фон должен быть изображением, далее url, то есть путь и  он видит. Что в папке, в которую он вошёл, должна быть папка images и в ней файл fon.jpg, вроде всё правильно. Но всё дело в том, что браузер вошёл в папку CSS а в этой директории у нас нет никакой папки images и мы должны сказать браузеру начинай поиск с корневой папки, то есть основной. Для этого следует указать браузеру отступ на один шаг назад, вот таким образом (../) две точки, и косой слеш. Если бы наш файл style.css находился ещё глубже на одну папку то пришлось бы указать возврат на две директории, то есть продублировать (../../).  В общем, постарайтесь это понять и запомнить, чтобы отличать пути для файлов и документов, как прямые и вложенные.  В данном случае файл style.css вложенный и не может иметь прямых путей, для документов.

body{
                background-image: url('../images/fon.jpg');
                background-attachment: fixed;
}

После исправления этого пути, всё должно заработать и наш фон появится. На этом я предлагаю закончить данный урок, а вы в качестве домашнего задания протестируйте, моменты вложенности папок и пути к файлам. То есть создайте ещё одну папку, например с именем «STYLES» вложите туда папку «CSS» вместе с документом style.css и задайте правильный путь к изображению, что бы всё заработало.

А я жду вас в следующем уроке «Простая вёрстка в HTML + CSS.  Урок №11», где мы займёмся переносом всех оставшихся стилей и сравним разницу и преимущество «CSS», при его использование.



Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.