Верстка — это самый базовый навык, которым необходимо обладать, для того чтобы стать фронтенд разработчиком. Верстка — это лицо вашего сайта

Что включает в себя этот курс:

• Резиновая верстка
• Блочная верстка
• История сеток, как создать свою сетку и использовать уже готовые
• Верстка писем
• Полноценная верстка всего сайта целиком
• HTML CSS

Первое, что необходимо сделать — скачать специальную программу «Visual Studio Code» в которой мы будем писать наш код. Есть и другие программы для работы с кодом, но так как я работаю именно с этой, мне будет проще проверять вашу домашку.

https://code.visualstudio.com

Выберите подходящий для вас вариант ОС (операционной системы), скачайте и установите программу.

Модуль 1

Верстка HTML — это язык текстовой разметки, с помощью которого вы говорите браузеру как показывать контент на сайте.

В этом модуле мы посмотрим как работает HTML, познакомимся с основными конструкциями, которые в нем есть и научимся их использовать

Элементы разметки.

Вспомните, как выглядит газета. Текст в ней удобно читать, он собран в колонки, между абзацами есть пробелы, используются картинки. Все это сделано с помощью специальной типографской разметки. Практически такая же разметка существует и в вебе, как раз за нее и отвечает синтаксис HTML. Это гипертекстовый язык разметки, благодаря ему мы объясняем браузеру как показывать контент на сайте.

Чтобы познакомится с HTML сразу перейдем к практике.

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

Откройте редактор кода Visual Studio Code (VS Code).

Горячие клавиши Ctrl + N — создаем новый файл — у вас в рабочей области появится новая вкладка (похоже на браузер).

Теперь этот файл нужно сохранить: Горячие клавиши Ctrl + Shift + S.

Название файла должно выглядеть так: index.html

Формат файла обязательно должен быть .html — это говорит нам о том, что такой файл будет открываться через браузер.

Теперь, введем в файле текст. В VS Code есть ряд встроенных плагинов, которые позволяют облегчить работу с кодом. Они умеют подставлять нужный код, подсвечивают ошибки и многое другое. Возможностей много, поэтому будем разбираться с ними постепенно.
В первой строке начните писать слово Lorem и VS предложит вам написать большое предложение. Нажмите клавишу TAB, чтобы добавить предложенный текст.

Lorem ipsum … — это временный текст на сайте, который показывает в каком месте распологаются текстовые блоки, какого они размера и какое форматирование у самого текста. Мы будем часто использовать эту фразу для создания текстовых блоков и проверки сайта на вместимость контента. 

Дальше, нам нужно сделать 3 таких текстовых абзаца и разделить их строками. Переход на новую строку делаем при помощи нажатия на клавишу Enter.

Как видите, текст уходит за рамки рабочего пространства, чтобы дальше нам было удобно его читать нажмите горячие клавиши Alt + Z. Вот, теперь все хорошо видно.

Рядом с названием файла вы можете видеть белый круг — это означает, что в файл были внесены изменения и они еще не сохранены. Сохраните изменения горячими клавишами Ctrl + S. Круг исчезнет. Когда работаете с кодом и проверяете его отображение в браузере, обязательно сохраняйте изменения, иначе они не отобразятся.

Теперь посмотрим, как нам этот файл будет отображать браузер.

Откройте браузер и нажмите горячие клавиши Ctrl + O и выберите созданный файл. Вы увидите, что текст в браузере отображается без разделения на строки. То есть браузер игнорирует пустые строки в html-файле.

Для браузера форматирование текста становится понятным, только при использовании «тегов».

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

Первым разберем тег <p></p> — Параграф. Необходимо «обернуть» наш текст Lorem… в этот тег. То есть поставить первую часть тега в начало параграфа, а вторую в конец.

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi aspernatur nam repellendus perspiciatis tempore est amet officiis, ab odit doloribus in ea architecto non saepe aperiam culpa porro cum possimus.</p>

Когда начнете ставить первую часть тега, вы увидите, что VS сам подставляет вам закрывающий (второй) тег </p>. Следите за этим, чтобы у вас не было лишнего кода. Второй закрывающий тег нужно ставить в конце параграфа. Так же, когда начнете прописывать закрывающий тег, VS сам допишет некоторые символы. Следите, чтобы вы случайно их не задублировали.

Теперь дополнительные пустые строки между абзацами нам не нужны. Удалите их. Сохраните изменения Ctrl + S.

Возвращаемся в браузер и обновляем страницу горячими клавишами Ctrl + R. Вы увидите, что текст разделился на абзацы и между абзацами появилось дополнительное расстояние.

Теперь подробнее про сам тег <p></p>.

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

Начальный тег — <p>

Конечный тег — </p>

Название тега — p

Содержание тега — Lorem… (тут содержание может быть любым)

У многих тегов есть свои стили по умолчанию. У тега параграф стили по умолчанию — это отступы сверху и с низу. Что мы наглядно увидели в браузере, когда обновили наш код.

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

Помимо названия тега он может содержать атрибуты. Атрибут позволяет более тонко настроить параметры тега.

Как атрибут вписывается в тег:

<p align=«right»>Привет!</p>

Align — атрибут

Right — его значение

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

Давайте добавим атрибут align в наш код в VS. Когда вы начнете прописывать атрибут и поставите знак = программа автоматически откроет вам кавычки. Вам остается только вписать значение атрибута.

Сохраните файл и проверьте в браузере результат. Первый абзац должен стать ориентированным по правому краю.

Наш редактор кода VS достаточно современный, чтобы определять устаревшие атрибуты. Вы можете увидеть, что атрибут align подсвечен красным цветом — так редактор сообщает нам, что атрибут устарел. Но пока мы ничего менять не будем.

Давайте исследуем страницу html в браузере.

Нажмите F12 на клавиатуре. Либо правой кнопкой мыши «Проверить элемент» или «Посмотреть код». У вас откроется дополнительная панель, в которой мы можем исследовать наш код. Содержимое веб-страницы.

Эта панель может быть как снизу страницы, так и сбоку. На примере показана панель в браузере Mac Safari.

А вот так выглядит панель в браузере Google Chome:

Не обращайте внимание на содержание, тут для нас главное понять какая вкладка нам нужна. А нужна нам вкладка Elements (Элементы). Там мы видим содержимое нашей страницы, именно так, как мы написали его в нашем файле index.html

Нажимая на стрелочки вы разворачиваете «дерево» и видите теги и их содержимое.

И если с тегами <p> всё понятно, то откуда взялись дополнительные теги <html></html>, <head></head> и <body></body>?

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

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

Это тег <!doctype html> Благодаря этому тегу браузер понимает какая спецификация html используется. Мы не будем использовать другие спецификации, поэтому не будем заострять на этом внимание.

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

• Рекомендую первое время прописывать теги руками, а не пользоваться автозаполнением. Так вы быстрее запомните существующие теги и будете проще в них ориентироваться. А уже со временем переходите на автозаполнение, т.к. это очень упростит вашу работу.

Тег <!doctype html> всегда пишется первым. Обратите внимание, что этот тег одиночный — у него нет закрывающего тега.

Следующим идет парный тег <html></html>

• Очень важно запомнить, что весь контент (код) вашего сайта должен находиться внутри этого тега, кроме тега <!doctype>.

С помощью этого тега браузер считывает код вашего сайта.

Добавьте тег <html> в ваш файл и перенесите параграфы внутрь тега. Следите за открывающим и закрывающим тегами.

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

После того, как вы скопируете параграф и вставите его в тег html он будет без отступа. Нажмите мышкой в начале параграфа, вы увидите моргающий курсор, нажмите кнопку TAB и параграф сместится на нужно расстояние. О том как правильно оформлять документ еще будем говорить подробнее в других уроках.

Если мы вернемся в браузер и еще раз посмотрим на панель с исследованием кода, то мы увидим, что параграфы «вложены» еще глубже — в тег <body>.

Два тега <head> и <body> так же всегда будут присутствовать в нашем коде. Значение этих тегов отражено в их названии:

head — голова. Внутри этого тега хранится важная информация, которая не отображается визуально в браузере, но имеет прямое отношение к коду. Без этой информации сайт не будет работать корректно. Позже мы будем подробно разбирать этот раздел и информацию в нем.

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

Добавьте теги <head> и <body> в свой документ и перенесите контент. Обратите внимание, что оба тега парные, обязательно добавьте закрывающие теги.

Сохраните изменения в файле. Перейдите в браузер и обновите страницу. Вы увидите в инспекторе кода, что все теги, которые мы прописали, отображаются корректно, в том числе и <!doctype>

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

Для лучшего понимания работы тегов, возьмем за основу статью и разберем ее на составляющие.

• Все теги выучить практически не возможно, их огромное множество. Поэтому абсолютно нормально пользоваться сторонними сервисами, например, https://html5book.ru/ теги ищите в разделе html. Так же там вы найдете атрибуты, подходящие под каждый тег и описание использования тега в разных ситуациях.

Для начала скачайте pdf-файл, который будет служить вам примером для работы: Кодстайл в веб-вёрстке

Мы будем переносить разметку в наш файл по порядку и постепенно изучим несколько новых тегов.

Заголовки <h></h>

Самое первое, что мы видим в статье — большой заголовок.

В html заголовки бывают 6 типов:

<h1>Заголовок 1</h1>

<h2>Заголовок 2</h2>

<h3>Заголовок 3</h3>

<h4>Заголовок 4</h4>

<h5>Заголовок 5</h5>

<h6>Заголовок 6</h6>

Важность заголовков. Самый важный заголовок H1. Наглядно это можно увидеть в текстовом редакторе:

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

Далее заголовок H2. Он отлично подойдет для названия разделов.

После по значимости идет заголовок H3. Его можно использовать, например, для выделения нескольких тем в разделе.

И так далее до заголовка H6.

Технически, если вы присвоите разделу тег H3 ничего не произойдет, ваш код будет отображаться корректно. Но при написании кода существуют правила, чтобы не только вы могли читать свой код, но и другие разработчики. А так же, чтобы вы сами могли прочитать свой код, вернувшись к нему спустя несколько месяцев, а то и лет. Если не будет правил и структуры, поверьте, вы уже не вспомните для чего и какой тег вы использовали. Поэтому, будьте внимательны к структуре, привыкайте к ней и запоминайте. Чистый, читаемый код — залог вашего успеха!

Для примера заголовок H1 на разных сайтах. Он хорошо выделен по сравнению с другим текстом, он крупнее.

«Создаем интерьеры для жизни», «Гибкая упаковка», «Психология как искусство быть рядом»

Хочу подчеркнуть, что по дизайну заголовки h1-h6 могут быть абсолютно одинаковыми, но вот внутри кода их лучше разделять по смыслу. Иногда может не быть видимого заголовка h1, а на главной странице мы увидим сразу второстепенные заголовки, это нормально. В таком случае заголовок h1 может быть скрытым, благодаря коду, но поисковые системы его все равно будут считывать.

Давайте вернемся к нашему PDF-файлу.

Первое что мы видим — большой заголовок «Зачем нужен кодстайл в веб-вёрстке»

Посмотрите всю статью, выделите для себя другие заголовки, подумайте, как бы вы их распределили от h1 до h6. Помните, что не обязательно использовать все заголовки до h6. Чаще всего используют максимум h3-h4. Можете записать себе отдельно, а походу выполнения задания сверяться со своими записями.

Откройте ваш файл index.html. Удалите все абзацы, скопируйте текст из статьи и вставьте его в код.

Давайте выделим заголовок статьи. Разместите текст заголовка в тег <h1></h1>. Откройте файл index.html в браузере и посмотрите результат. Заголовок отделился от неформатированного текста и стал крупным.

Посмотрите внимательно на статью. Дальше в ней идут несколько абзацев, которые мы уже умеем выделять с помощью тега <p>.

Так как VS умеет дописывать закрывающие теги, работа пойдет быстрее если вы выделите и вырежете параграф (Ctrl + X), пропишите тег <p></p> и вставите в значение тега текст (Ctrl + V).

Сделайте в своем файле три параграфа после заголовка.

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

Посмотрите в браузере результат. Три параграфа должны визуально отделиться друг от друга.

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

Текст выделенный жирным шрифтом Теги <b></b> и <strong></strong>

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

Тег <b></b> — просто выделяет текст жирным шрифтом. Это делается просто для дизайна.

Тег <strong></strong> — для поисковых систем этот тег очень важен. Для них он сильнее чем тег b. То есть текст, выделенный тегом strong несет очень сильную смысловую нагрузку. И голосовыми помощниками он будет выделяться сильнее. Такими помощниками, например, пользуются слепые люди.

Текст выделенный курсивом Теги <i></i> и <em></em>

Тег <i></i> — просто выделен курсивом ради дизайна.

Тег <em></em> — несет важную смысловую нагрузку для поисковых систем и голосовых помощников.

Еще немного про отличие этих тегов. Тег strong — этот тег несет самую большую смысловую нагрузку. Эта та часть текста, где бы вы сказали «ВНИМАНИЕ!». Тогда как тег em выделить ту часть текста, где нужно сказать «Очень важное примечание! Не пропусти».

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

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

Далее идет предложение «Это называется порядком однородных определений.» В данном случае четко указывается на какое-то слово, что это порядок именно однородных определений, а ни каких-то других.

Далее слова понимать и кодстайл. Эти слова хоть и выделенны жирным, но не сильно влияют на интонацию в тексте.

Проверьте себя:

Сохраните ваш код и посмотрите, как изменилась ваша статья в браузере.

Следующий блок в нашем файле со статьей — Цитата. Тег <q></q>

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

Если же автор цитаты указать необходимо используется следующая конструкция:

<p>

       <q>Цитата</q>

       <cite>Автор</cite>

</p>

Если мы просто обернем слова в теги <q> и <cite> не используя при этом тег <p>, то мы просто выделим текст среди общей массы.

Именно поэтому дополнительно эти теги «оборачиваются» в параграф <p>. Чтобы отделить цитату от общей массы неформатированного текста. Так же обратите внимание, что тег <q> автоматически подставляет кавычки, поэтому лишние кавычки из текста можно убрать.

Добавьте цитату в ваш index.html и посмотрите, что получилось в браузере.

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

Далее в статье идет параграф с двумя выделенными и подчеркнутыми словами Яндекс, Google. Таким образом в файле отображаются ссылки. И еще один параграф без дополнительного форматирования.

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

Слово или текст, к которому должна быть прикреплена ссылка оборачиваются в тег <a></a>.

Если воспользоваться автозаполнением от VS, то вы увидите, что он дополнит ваш тег свойством href=»». Напоминаю, как выглядит тег со свойством: <a href=»»></a>

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

Если ваши ссылки не синего цвета, а фиолетового — это значит, что вы уже нажимали на эти ссылки и переходили по ним.

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

Далее в статье можно отследить заголовки второго уровня h2 (HTML, CSS, JS)

Почему это заголовки именно второго уровня. Мы помним, что заголовок h1 у нас может использоваться только 1 раз и мы его уже использовали для самого главного заголовка статьи. Для ее названия. Эти заголовки объединяют под собой некий сгруппированный текст по смыслу. Поэтому все три заголовка одинаковые по значимости и поэтому мы используем следующий уровень после h1. То есть тег h2.

Добавьте нужный тег к заголовкам.

Не забывайте удалять лишние пробелы в коде и выстраивать красивое дерево.

Так же можно заметить, что в разделе HTML «потерялись» теги, которые нам необходимо было прописать текстом. Так как браузер считывает теги, но не отображает их мы сталкиваемся с такой ситуацией. Но когда нам нужно вывести в тексте именно текст, то необходимо пользоваться специальными символами: &lt и &gt получится (&ltimg&gt, &ltbr&gt и другие)

И последнее задание на этот урок: Комментирование текста.

Вернемся немного выше, туда, где мы оставили подпись изображение из статьи. «Как выглядит наш сайт кодстайла»

Если у вас в коде есть какая-то часть кода или текст, которые вы бы не хотели удалять, но в данный момент они вам не нужны в визуальном отображении в браузере — этот элемент можно закомментировать.

Как это выглядит:

<!— Закомментированная часть, которая не будет отображаться —>

Умный VS подсветит нам закомментированную часть зеленым цветом. Закомментируйте текст в своем файле, сохраните и проверьте визуальное отображение в браузере. Текст для описания изображения должен исчезнуть.

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

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

Так как мы работаем в интернете мы обязательно должны обращать внимание на то, какой вес имеют изображения. Слишком «тяжелые» картинки могут влиять на продуктивность работы сайта. То есть как быстро сайт будет грузиться у пользователя. Чем лучше показатели загрузки сайте, тем лучше он выдается в поисковых запросах. Поэтому этот момент важен не только для пользователя, но и для владельца сайта.

Есть два вида изображений: векторные и растровые.

Растровые изображения

это изображения состоящие из множества точек (пикселей). Например, все фотографии — растровые. И при приближении таких изображений вы можете наблюдать, что оно теряет качество.

Основные форматы:  jpeg, png, webp, avif, gif

jpeg — используется чаще всего для иллюстраций, где не требуется высокое качество изображений. В этом формате не возможно сделать прозрачность.

png — хорошо сохраняет качество и имеет прозрачность

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

avif — новый формат изображений, который поддерживается браузерами не всеми браузерами (около 70%)

gif — многие из вас встречали гиф-ки на просторах интернета, это небольшое анимированное изображение с постоянно повторяющимся действием. Но бывают и статические гиф-ки. Сейчас формат используется крайне редко, так как лучше использовать для анимации видео.

Векторные изображения

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

Формат: svg

svg — это код, благодаря которому на экране отображается рисованное изображение.

Все изображение перед использованием на сайте необходимо «сжимать».Это позволит оптимизировать работу сайта. Для этого можно использовать различные сайты-помощники. Вот некоторые из них:

https://tinypng.com/

https://squoosh.app/

https://www.iloveimg.com/ru/compress-image

Возвращаемся к практике

В прошлом уроке мы пропустили изображение в нашей статье. Давайте вернемся к нему сейчас и изучим тег <img>.

Тег <img> не парный. У него нет закрывающего тега.

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

Чтобы это сделать нужно прописать свойство тега src=»ссылка на картинку»

Так же для тега img используется атрибут alt=»Тут нужно описать, что изображено на картинке»

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

На примере изображен белый прямоугольник и текст «Код-стайл Оглавление». В этом месте должна быть картинки, но я не указала на нее ссылку и браузер не смог ее загрузить. Вместо этого он показал мне описание из атрибута alt.

Так же атрибут alt считывается голосовыми помощниками и поисковыми системами.

Еще атрибуты для тега img — width и height

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

Как пишется код, когда в нем указывается несколько атрибутов.

<img src=»ссылка на картинку» alt=»описание картинки» width=»ширина» height=»высота»>

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

Возвращаемся в наш рабочий файл index.html

Раскомментируйте описание картинки. Удалите символы <!— —>. Так описание сново будет видно на странице браузера. Горячие клавиши Ctrl + /

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

Оберните описание картинки в параграф <p></p>.

Добавляем изображение в файл.

Если мы просто пропишем над описанием картинки тег img, то текст будет вплотную прилегать к ее нижнему краю.

Для визуального разделения двух элементов картинку так же можно обернуть в тег <p></p>.

Добавьте тег изображения с двумя атрибутами src и alt (высоту и ширину добавлять сейчас не будем)

Сохраните изменения и посмотрите в браузере, что получилось.

Так как мы не указали ссылку на картинку, у нас появилось ее описание из alt атрибута.

Скачайте изображение на ваш компьютер: Изображение для статьи

Далее зайдите в папку, где лежит это изображение, нажмите по нему правой кнопкой мыши и выберете «Скопировать путь». Вставьте эту ссылку в тег src и посмотрите, что получится.

У каждого из вас будет своя ссылка.

Если изображение получилось очень большим, просто пропишите ему дополнительный тег width и поставьте значение 600. Этого будет достаточно.

<img src=»ссылка» alt=»описание» width=»600″>

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

Тег <figure></figure>

Этот тег связывает какое-то изображение с текстом. То есть это группирующий тег.

<figure>

          <img src=»ссылка» alt=»описание»>

          <figcaption>Описание</figcaption>

</figure>

То есть описание изображения у нас теперь не в отдельном параграфе, а связанно с ним и заключено в специальный тег <figcaption></figcaption>

Давайте уберем в нашем файле index.html параграфы у изображения и его описания. Поставим вместо них тег figure и figcaption.

Вот, что у нас получилось.

Сохраните изменения и посмотрите, как изменится ваш текст в браузере. Вы можете заметить, что изображение и описание сместились правее.

Нажмите F12 и давайте посмотрим, что нам покажет инспектор кода в браузере.

Если вы наведете на тег figure, то браузер вам подсветит оранжевые области. Этим цветом обозначаются отступы.

Мы не прописывали эти отступы руками, получается, что у тега figure они встроенные, то есть применяются по умолчанию. Это встроенные стили тега.

Для начала этих знаний нам будет достаточно для работы с изображениями.

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

В этом уроке мы будем разбираться в каких случаях используется тег <a></a> — ссылка, а в каких тег <button></button> — кнопка.

Тег <a></a>

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

Тег <button></button> — это кнопка

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

Давайте посмотрим на примерах, чтобы лучше разобраться.

Ссылка. Тег <a></a>

<a href=»ссылка»>текст ссылки</a>

href — это атрибут тега. В кавычках мы указываем адрес, по которому пользователь перейдет при клике на ссылку. При написании ссылки обязательно нужно указывать полный путь к странице. Не просто sokhareva.ru, а https://sokhareva.ru

Когда вы только начинаете верстать веб-страницу, возможно, вы еще не знаете какая точно ссылка будет указана в атрибуте тега. Поэтому принято использовать знак #. Как это выглядит:

<a href=»#»>текст ссылки</a>

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

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

Как это выглядит можно посмотреть в видео.

Атрибут target=»_blank»

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

<a href=»https://sokhareva.ru» target=»_blank»>текст ссылки</a>

В результате, после клика по ссылке, у вас будет 2 открытые вкладки в браузере: Основная вкладка со статьей и Сайт sokhareva.ru

Атрибут download

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

<a href=»index.html» download>текст ссылки</a>

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

Атрибут download — это атрибут булевого типа. Различные типы атрибутов мы будем изучать в следующих уроках.

Якорные ссылки

Скорее всего вы часто встречали эти ссылки на лендинговых страницах в интернете. Когда при нажатии на какой-то раздел, вас перекидывает вниз по странице к этому разделу. Наглядно это можно посмотреть на моем сайте sokhareva.ru. Где при нажатии на раздел «Тарифы» вас перекидывает вниз в списку предложений о покупке.

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

Дл того чтобы сделать якорную ссылку необходимо присвоить ID параграфу или другому тегу, куда вы хотите поставить «якорь». То есть то место в которое пользователя будет перекидывать при клике на ссылку.

Например в параграф:

<p id=»paragraph»>Текст параграфа</p>

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

<a href=»#paragraph»>Текст ссылки</a>

Кнопка. Тег <button></button>

Раньше кнопки использовали в основном для отправки данных. Например, пользователь вводил в форму какие-то данные и по нажатии кнопки эти данные «улетали» на сервер. Теперь кнопки несут в себе разный функционал, а не только отправка формы. Например, вы часто встречали всплывающее окно на сайте с вопросом «Ваш город Москва?» и там же кнопки с ответом Да/Нет. Настраивать функционал кнопок мы будем в следующих уроках.

Когда вы будете смотреть на макет в дизайне не всегда будет очевидно понятно где кнопка, а где ссылка. Так какой же тег тогда выбирать? Самое главное подумайте о том, какой будет результат при нажатии на этот блок: переход на другую страницу, переход по сайту внутри страницы, скачивание? Тогда это ссылка. А если это опрос, отправка формы, включение фильтров и прочие действия — используйте кнопку.

Вернемся к нашей статье.

Откройте файл index.html и давайте закончим ссылки, которые мы подготовили раньше.

• пропишите адрес (href) для ссылок Яндекс и Google.
• добавьте атрибут target, чтобы ссылка открывалась в новой вкладке

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

В html бывает два вида списков: Нумерованные и Ненумерованные

Нумерованный список — ordered list. Тег <ol></ol>

Часто такие списки используются при перечислении каких-то параметров

1. Параметр один
2. Параметр два
3. Параметр три

Ненумерованный список — unordered list. Тег <ul></ul>

Это просто маркерованные список, когда для него не важны порядковые номера.

• Пример один
• Пример два
• Пример три

Элемент списка — list item. Тег <li></li>

Важная особенность списков заключается в том, что внутри тега списка (ul или ol) может быть только тег элемента списка (li). Если вы в список поставите другой тег, разметка работать не будет.

Примеры кода:

<ol>
       <li>элемент списка</li>
       <li>элемент списка</li>
       <li>элемент списка</li>
</ol>

<ul>
       <li>элемент списка</li>
       <li>элемент списка</li>
       <li>элемент списка</li>
</ul>

Откройте пример нашей статьи. В разделе HTML вы как раз увидите не нумерованный список, обозначенный фигурами. В нашем случае это точки. Эти фигуры могут быть разными, главное, что это не цифры. А в разделе JS вы найдете нумерованный список.

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

Давайте добавим список в наш файл index.html. Начнем с ненумерованного списка в разделе HTML.

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

Если смотреть на эту часть статьи мы четко видим: Заголовок — Параграф — Ненумерованный список — Параграф.

Давайте обернем нужными тегами текст в нашем файле index.html

Обратите внимание на строки текста, когда вы копируете текст из сторонних программ или файлов и вставляете в VS он не всегда корректно становится по строкам. Не забывайте поправлять эти ошибки.

Пример: при копировании текста из pdf файла статьи одно из предложений разделилось на 2 строки кода (40-41)

Добавьте нужные теги, сохраните файл и проверьте отображение в браузере.

Горячие клавиши.

Для того чтобы быстро поменять парный тег можно воспользоваться горячими клавишами CTRL + D. Как это работает? Двойным кликом выделяете начальный тег, нажимаете CTRL + D. У вас дополнительно выделится закрывающий тег. Далее можете написать новый тег сразу в двух местах — в открывающем и закрывающем теге. Для практики попробуйте изменить тег ul на ol. Посмотрите результат в браузере.

Не забудьте вернуть правильные теги, как в статье.

Атрибут списка strat

<ol start=»1″></ol>

Этот атрибут показывает с какого номера будет начинаться нумерованный список. Хотите чтобы ваш список начинался с номера 50, тогда пишем start=»50″ и т.п.
Если у вас стандартная нумерация списка то атрибут start=»1″ можно не прописывать. Это значение у списка стоит по умолчанию.

Самостоятельно поработайте с разделом статьи JS.

Добавьте необходимые теги, которые мы изучали ранее.

Проверка вашей работы.

Скинуть в телеграм чат ваш файл index.html

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

Но таблицы интересны тем, что их структуру можно использовать для верстки и отображения разных данных. Потому что таблицы просты и понятны, внутри нее (относительно ее сетки) можно легко настроить расположение других блоков. Раньше практически все сайты писали именно так — используя таблицы. Сейчас технологии верстки уже ушли далеко вперед, но иногда еще можно встретить такой вариант, например в верстке формы письма.

Тег <table></table> — Таблица

Этим тегом мы сообщаем браузеру, что сейчас будет таблица, внутри которой будут другие элементы таблицы.

Тег <caption></caption> — Заголовок таблицы

Тег <tr></tr> — Строка в таблице (table row)

Тег <td></td> — Ячейка в строке таблицы

Собираем таблицу 2х2:

<table>
          <caption>Заголовок</caption>
          <tr>
               <td>Ячейка 1</td>
               <td>Ячейка 2</td>
          </tr>
          <tr>
               <td>Ячейка 1</td>
               <td>Ячейка 2</td>
          </tr>
</table>

Так же у таблицы есть разные атрибуты: высота, ширина, толщина линий и тд.

Атрибут border — отвечает за толщину внешних границ таблицы.

<table border=»10″></table>

Атрибут cellspacing — отвечает за расстояние от внешней границы ячейки до границы таблицы

Атрибут cellpadding — отвечает за отступ внутри ячейки.

В более сложные таблицы добавляются новые теги: thead, tbody, th. Давайте посмотрим, как их использовать.

<table>
          <caption>Товары</caption>
<thead>
               <tr>
                    <th>Номер</th>
                    <th>Наименование</th>
                    <th>Цена</th>
               </tr>
           </thead>
           <tbody>
               <tr>
                    <td>Номер 1</td>
                    <td>Молоко</td>
<td>100 руб</td>
               </tr>
               <tr>
                    <td>Номер 2</td>
                    <td>Хлеб</td>
<td>50 руб</td>
               </tr>
            </tbody>
</table>

У нас получилось довольно много кода, но посмотрите на компактный результат:

Тег thead — выделяет первую строку таблицы, чаще всего там пишется название столбца. Заголовки столбцов выделяются жирным шрифтом.

Поэтому теги ячеек внутри тега thead называем th.

Тег tbody — это основная масса данных таблицы.

Тут, внутри тега tbody используем уже знакомые нам теги tr + td

Та же в таблице может быть заключительная строка. Чаще всего она подводит какой-то итог или для написания какого-то примечания для таблицы.

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

Для ячеек в теге tfoot используется стандартная связка тегов tr + td.

В итоговом варианте хорошо видно, как «ломается» сетка таблицы из-за того, что в последней строке количество ячеек отличается от предыдущих. Появляется как бы пустая ячейка без четких границ.

Как это исправить?

Нам нужно «растянуть» вторую ячейку и объединить ее с третьей. Нам поможет атрибут colspan. В значении атрибута необходимо написать какое количество ячеек должно быть объединено. В нашем случае — 2.

Так же обратите внимание, что тег заголовка таблицы caption находится внутри тега table, но не входит в thead или tbody. Он пишется отдельно от них.

Ячейки в строках мы объединять научились, но иногда приходится объединять ячейки в столбце. Для этого нам нужен атрибут rowspan. 

Он работает по аналогии с colspan, вам так же нужно указать значение, сколько ячеек сгруппируется по вертикали (в столбце).

Очень внимательно посмотрите, как это пишется в коде:

Все ячейки в таблице выстраиваются от левого края и не делают автоматически перенос. Поэтому, если мы добавим в строку дополнительное наименование «Ряженка», то ячейка выйдет за пределы таблицы и верстка «сломается» — появится еще один столбец.

Для того, чтобы это исправить, «Ряженку» нужно поставить на следующую строку — на третью. А «Кефир», соответственно, на четвертую.

Не забудьте, что так у вас получится 3 строки для «Молочной продукции». Поэтому, не забудьте увеличить rowspan у «Молочной продукции» до трех.

Переходим к верстке таблицы в нашей статье

В статье в разделе CSS внимательно посмотрите на таблицу и представьте все её элементы. Какие теги вы будете использовать при ее оформлении.

В таблице (table) мы видим:

• заголовок таблицы (caption)
• жирным текстом выделена первая строка, а значит это thead с 3 ячейками (th)
• нам нужно создать в tdoby из 5 строк (tr) по 3 ячейки (td)
• tfoot в данной таблице отсутствует

Приступим к оформлению кода.

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

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

Давайте добавим атрибут border со значением 1. И посмотрим результат в браузере.

Уже лучше, но мы видим, что линии в таблице двойные. Это потому что сама таблица имеет рамку и каждая ячейка в ней, так же имеет рамку. Чтобы соединить эти рамки нужно убрать cellspacing. Присвоить ему значение 0. Посмотрим в браузере, что получилось.

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

Это решается атрибутом cellpadding. Давайте пока что присвоим ему значение 20. То есть отодвинем на 20 пикселей границы от текста внутри ячейки.

Смотрим, что получилось.

Вы уже точно обратили внимание на то, что даже если в вашем коде текст написан с новой строки, в браузере он все равно идет одной строчкой. Всё потому что браузер не считывает перенос строк, для этого есть специальный одиночный тег <br>. Он ставится в том месте, где вы нажимаете Enter для переноса строки. То есть в конце строки, после которой будет переход на новую строку.

<td>

     position: relative;<br>

     left: 0;<br>

     right: 0;<br>

     top: 0;<br>

     bottom: 0;

</td>

Добавьте тег в вашу таблицу, где это необходимо и посмотрите на результат в браузере.

В целом, визуально таблица совпадает с той, что у нас в статье, только не хватает ширины таблицы. Это можно сделать атрибутом width. Значение можно поставить 800.

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

Служебные теги

Такие теги позволяют браузеру считывать техническую информацию о странице и ее настройки.

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

lang=»ru»

Этот атрибут прописывается не в теге head, а выше в теге html

2. Кодировка страницы

Ранее мы с вами посмотрели структура страницы и оставили пустое место в теге <head></head>.

Тег <meta> 

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

Атрибут тега meta charset=»UTF-8″

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

Кодировок текста довольно много, но в современных браузерах мы используем именно UTF-8.

Для понимания вот список других кодировок в браузере Safari

Поэтому обязательно прописывает атрибут charset для тега meta

<meta charset=»UTF-8″>

3. Поведение страницы внутри сайта

Атрибуты для тега meta

name=»fiewport» — этот атрибут отвечает за масштаб отображения сайта. По умолчанию он всегда равен 1.

content=»width=device-width» — этот атрибут говорит браузеру, что ширина страницы будет равна ширине экрана устройства. Именно с помощью этого атрибута браузер подстраивается под экран планшета или телефона в горизонтальной или вертикальной ориентации.

initial-scale=»1″ — этот атрибут так же отвечает за масштаб.

Собираем всё вместе:

<meta name=»fiewport» content=»width=device-width» initial-scale=»1″>

Почему мы использовали 2 тега meta? 

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

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

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

4. Имя страницы.

Сейчас имя вашей страницы index.html — это служебное название и когда вы открываете его в браузере, вы видите это название во вкладке браузера.

Так же, если вы сохраните в закладке эту страницу, она так же будет с именем index.html и пользователь никак не сможет понять о чем эта страница.

Это исправляется при помощи служебного тега:

<title>Название страницы</title>

В этом названии мы пишем заголовок. Чтобы пользователь знал, что это за страница.

Название во вкладке браузера так же стало отображать текст, который вы прописали в теге title

Этот заголовок title считывается поисковиками так же, как и аголовок H1.

Наглядный пример.

Давайте наберем в поисковой системе yandex запрос: Жизнь на Марсе

Мы увидим несколько ссылок в которых содержится поисковая фраза «жизнь на Марсе»

Перейдем по 3 ссылка на Википедию и откроем инспектор кода.

Мы увидим, что в title прописано именно то, что показывает поисковая система.

Итог

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

Проверка вашей работы.

Самостоятельно добавить служебные теги в файл. Скинуть в телеграм чат ваш файл index.html

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

Тег <br>

Мы уже использовали ранее этот тег для переноса строки в таблице. Но я хочу обратить ваше внимание на то, что тег <br> — это принудительный перенос строки. То есть текст после этого тега всегда будет с новой строки. Чем это чревато?

Сейчас в мире очень много различных девайсов (смартфоны, планшеты, электронные книги, мониторы). У всех девайсов разное разрешение (разный размер экрана). Соответственно, контент на них отображается по разному. И если для экрана смартфона перенос строки будет уместен, то для монитора в этом нет никакого смысла.

В современном коде, используется адаптивная вёрстка (о ней мы будем говорить в следующих уроках), которая автоматически подстраивается под размер экрана. А тег <br> применяется в исключительных ситуациях, где действительно необходимо сделать принудительный перенос строки и это не повлияет на отображение контента на разных экранах.

Тег <pre></pre> — сохранение исходного форматирования

Это значит, что всё, что будет прописано в html файле, будет отображаться в браузере.

Например, мы уже знаем, что лишние пробелы в html файле браузерами не считываются, так же как и новые строки. Смотрим в коде:

Смотрим в браузере:

Если обернуть текст в тег <pre></pre>, то пробелы и перенос строки станут считываться в браузере и мы получим:

Все пробелы, перенос строки и даже шрифт будут без какого-то дополнительного форматирования

Тег  — нижний регистр

Часто используется для математических формул и химических элементов. Например: Н₂O

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

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

Справится с проверкой помогут специальные сервисы по проверки валидности кода.

Мы будем пользоваться сайтом: validator.w3.org

На этом сайте вы можете:

• Проверить валидность кода сайта. В строку нужно вставить url сайта

• Проверить валидность отдельного файла

• Проверить валидность кода

Давайте проверим на валидность ваш код из файла index.html

Выделите весь код целиком (CTRL + A), скопируйте его (CTRL + C) и вставьте в окно валидатора (CTRL + V) и нажмите кнопку Check

Валидатор покажет вам ошибки. Давайте разберемся с тем какие ошибки бывают и что с ними делать.

Я сознательно убрала из тега <html> атрибут lang, чтобы показать вам уровень ошибки «Warning» — предупреждение. Этот уровень ошибки не критичный, его можно пропустить, но если есть возможность, то лучше ее исправить.

Уровень ошибки «Error» — эти ошибки игнорировать нельзя. Они требуют обязательного исправления.

Как читать ошибки, чтобы понять как их исправить.

«Атрибут initial-scale не разрешен в элементе meta в данный момент.»

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

Дальше синим текстом нам подсвечивает в какой строке находится эта ошибка: From line 5

Так мы быстро сможем перейти в наш код и исправить ошибку. Это ошибку мы сознательно пропускаем.

Не правильно написан путь к изображению для атрибута src в элементе img. Ошибка в написании пути: не допускаются пробелы.

Как видите, в пути до файла у меня есть папка название которой я поставила с пробелами — такого быть не должно. Все файлы, которые вы будете добавлять в свой код должны иметь имя без пробелов, желательно на английском языке.

Эта ошибка у нас расположилась на 32 строке.

Переходим в VS и нажимаем CTRL + G и пишем номер строки

VS сразу перекидывает нас на нужную строку. Исправляем ошибку.

Следующая ошибка говорит нам о том, что на 55 строке в елементе img пропущен атрибут src.

Произошло это потому что я не поменяла символы тега на спец символы для отображения тега в барузере: &lt и &gt

Исправляю ошибку:

Сохраню изменения в файле и еще раз отправлю код в валидатор, чтобы убрать исправленные ошибки.

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

Самостоятельная работа

Проверьте ваш код из файла index.html в валидаторе, исправьте ошибки. Отправьте файл на проверку в телеграм-чат.

Для удобства работы с кодом программа VS Code предоставляет нам множество расширений, которые упростят жизнь и увеличат продуктивность.

Откройте программу VS Code. В левой панели выберите последний раздел «Плагины»

В этом разделе представлен список всех расширений, которые можно установить на VS Code. Конечно, все они нам не понадобятся. Мы установим только необходимые.

HtmlHint

Найдите такой плагин и нажмите кнопку «Установить»

Этот плагин подсвечивает вам не валидный код (не правильный). Так вы сразу будете обращать внимание на ошибки в процессе написания кода.

Проверяем работу плагина.

Если допустить ошибку в написании кода, плагин будет подсвечивать эти области разными цветами. Например, ошибку в теге <p!> плагин подчеркнул желтым.

В левом нижнем угле VS Code есть символы, которые показывают сколько ошибок в коде. Если нажать на треугольник с восклицательным знаком, откроет панель, в которой будут написаны ошибки и их положение в коде — Строка #.

Emmet 

Встроенный плагин VS Code. Устанавливать отдельно его не нужно, но нужно знать, что он существует.

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

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

Самый классный пример это — начать писать в коде !

Emmet сразу же создаст для вас стандартную структуру сайта. Очень экономит время! Просто напишите ! и нажмите TAB

Когда вам нужно сделать более сложную структуру, например таблицу

Модно прописать основной тег tr знак больше > и вложенный тег td. Нажать TAB или Enter и Emmet автоматически пропишет вам несколько вложенных тегов

Вариант посложнее, когда вложенных одинаковых тегов должно быть несколько

И еще более сложный вариант. Когда в таблице много строк и столбцов

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

EditorConfig

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

Например, сейчас при использовании табуляции автоматически ставится 4 пробела (выделенная строка №12)

В некоторых проектах их может быть 2 или 3.

Для того чтобы EditorConfig работал необходимо создать системный файл. Системные файлы — это файлы не имеющие названия, а только расширение. В нашем случае файл будет называться .editoconfig

Перейдите в VS Code — Создать файл — напишите расширение файла без названия .editoconfig и сохраните в той же папке, где лежит файл index.html

Если VS Code ругается на файл, просто нажмите окей или согласитесь с его предупреждением.

Скорее всего, если вы откроете папку с этими файлами, то вы не увидите сам файл .editorconfig. Так как ОС не показывает системные файлы по умолчанию.

Внутри файла .editorconfig мы пропишем настройки для нашего проекта.

Настройки для разных типов файлов могут отличаться, но сейчас мы сделаем настройки для всех файлов. Для этого достаточно прописать [*] 

Звездочка (*) означает любое имя файла.

Далее, все файлы у нас будут иметь одинаковую кодировку: charset = utf-8 

Следующая настройка говорит о том, что мы не используем табуляцию напрямую, а имитируем пробелы: indent_style = space

А дальше зададим сколько пробелов будет в табуляции: indent_size = 2 — то есть 2 пробела в табуляции

Это значит, что при нажатии на TAB у вас не просто получится отступ, как это бывает, например в документах Word, а программа автоматически сделает 2 пробела.

Далее, настройка для вставки пустой строки в конце файла insert_final_newline = true Каждый раз когда вы сохраняете свои файлы, у вас автоматически подставляется 1 пустая строка в самом конце.

И последняя настройка — удаление не нужных пробелов trim_trailing_whitespace = true Теперь все лишние пробелы будут автоматически удалены и не будут загружать наш код.

Проверьте на своем файле  index.html как работают эти настройки.

Удалите все пустые строки после тега </html> если они есть

Сохраните файл и вы увидите, что автоматически добавилась 1 пустая строка. Это работает insert_final_newline = true

Поставьте несколько пробелов в самом начале файле после тега doctype

Сохраните файл и вы увидите, что лишние пробелы исчезнут. Это работает trim_trailing_whitespace = true

После сохранения файла, вы могли увидеть сокращение отступа. Это произошло, потому что табуляция стала равна двум пробелам. Это работают indent_style = space и indent_size = 2

А сейчас проверьте себя 🙂

Заметили ты вы, что после применения настроек табуляция стала равна 2м пробелам, но лишняя табуляция из документа не пропала?

На скрине видно разделение табуляции вертикальной полосой

Видите? По правилам отступов у нас должна быть только 1 табуляция.

Как же разом поправить эту ошибку в документе? Ведь руками убирать лишние пробелы будет очень долго.

В VS Code Нажмите CTRL + SHIFT + P  у вас появится строка для ввода. Начните набирать >format document. Система вам подскажет. Нажмите Enter или кликните мышкой.

Ваш документ будет отфармотирован согласно настройкам .editorconfig

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

На данном этапе мы можем оставить наш файл в таком виде. Далее мы приведем файл согласно код-стайлу нашего курса.

Мы помним, что поставили [*] в начале файла, тем самым дали понять программе, что хотим применять эти настройки ко всем файлам.

Но что делать, если мы хотим исключить какой-то тип файла из некоторых настроек? Например мы не хотим применять настройки добавления последний строки к файлам с форматом .js

На новой строке в файле .editorconfig мы пишем [*.js] , что означает любое имя файла с форматом .js пишем настройку insert_final_newline = false , что означает добавление последний новой строки = неправда, то есть не добавлять.

Теперь во все файлы с расширением .js не будет автоматически добавляться последняя строка.

Самостоятельная работа

Создайте в папке курса файл с расширением .editorconfig (этот файл должен находиться в той же папке, что и файл index.html).

Пропишите настройки:

Код-стайл — это набор определенных правил, которые будут указывать на то, как нужно оформлять код в конкретном проекте.

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

1. База

• Теги и атрибуты пишутся строчными буквами
• Для значения атрибута всегда используются двойные кавычки
• Для отступа вложенных тегов (ступеньки) всегда используется 1 табуляция. Рекомендованная табуляция — 2 пробела.
  

2. DOCTYPE

Обязательно в начале каждой страницы должен быть указан doctype.

Написание: <!DOCTYPE html>

3. Кодировка текста

Чтобы текст в браузере всегда отображался корректно, не забывайте указывать кодировку текста: utf-8

charset=»utf-8″

4. Подключение стилей

Стилевые файлы подключаются всегда внутри <head></head> с помощью тега <link>. Если пробовать подключить стили внутри <body></body> ничего не сработает.

Для тега <link> обязательно используются атрибуты:

• rel=»stylesheet» — атрибут подключения стиля
• href=»название документа со стилями»

О стилях мы будем говорить в следующих уроках.

5. Порядок атрибутов

Важно сохранять порядок атрибутов в разных блоках.

Атрибут class пишется всегда первым. Остальные атрибуты располагайте по своему усмотрению, но если они повторяются на странице их порядок должен сохраняться.

6. Селекторы

Селекторы используются для стилизации html кода. При помощи селектора class вы выделяете элемент кода, для дальнейшей ее стилизации. Class со своим названием может повторяться в коде несколько раз. То есть вы можете присваивать одинаковый класс нескольким элементам.

Тогда как селектор id с уникальным именем (вы с ним уже знакомились, когда ставили якорные ссылки) может использоваться на странице только 1 раз.

7. Alt атрибут

В каждом теге <img> обязательно должен быть прописан Alt — атрибут, чтобы в случае отсутствия изображения пользователь видел текст.

8. Всегда проверяйте свой код на валидность

Для этого используйте специальные сервисы. Например: https://validator.w3.org/

• Используйте теги по смыслу

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

Сайт, который на котором теги разделили по смыслу, в них можно провалиться и посмотреть что эти теги обозначают: http://html5doctor.com/#glossary

•  В названиях классов используйте простые и понятные слова

Чтобы вы могли быстро сориентироваться внутри своего кода.

Самостоятельная работа

Согласно код-стайлу нашего курса внесите необходимые правки в свой документ index.html

• Табуляция для тегов head и body внутри тега html отсутствует. Теги head и body отделяются от остального контента 1 пустой строкой
  
•  В параграфе отсутствуют лишние строки
  
• Заголовки пишутся в одну строку
  
• Alt в теге img прописывается в одну строку. Описание для изображения figcaption пишется в одну строку.
  
• Заголовок таблицы caption пишется в одну строку. Теги th и td пишутся в одну строку.
  

Отправьте файл на проверку в телеграм-чат.

Практическая 1

Для того чтобы выполнять некоторые практические работы мы будем пользоваться сайтом Codepen. В этом сайте удобный интерфейс и в нем сразу можно видеть результат своего кода не только в html, но и с применением css и js. То, что мы будем изучать на курсе в дальнейшем.

Задание выполняете прямо на сайте по ссылке — https://codepen.io/Sokhareva/pen/WNmKLjK

В разделе html правите код. В разделе js написано само задание. В разделе css прописаны стили, которые мы будем изучать в дальнейшем.

Примечание. В этом задание используется новый тег <div></div>. В дальнейшем вы часто будете его использоваться, а пока краткое описание. Сам по себе этот тег ничего не значит и никак себя не проявляет, но к нему можно применять стили и оформлять этот блок как угодно. Но самое важно, что div — это блок-контейнер, в который вы можете «положить» все что угодно, а потом это оформить. В нашем примере в div обернут весь контент для карточки товара и за счет стилей (атрибут class) мы сделали для него красивую рамку с тенью.

Результат вашей работы:

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

Практическая 2

Продолжаем отрабатывать базовые теги.

Задание выполняете прямо на сайте по ссылке — https://codepen.io/Sokhareva/pen/ExMprBQ

В разделе html правите код. В разделе js написано само задание.

Результат вашей работы:

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

Практическая 3

Создаем таблицу! Вам самостоятельно нужно сформировать данные в таблицу используя правильные теги.

Задание выполняете прямо на сайте по ссылке — https://codepen.io/Sokhareva/pen/GReBeMJ

В разделе html правите код. В разделе js написано само задание.

Результат вашей работы:

Скрин получившейся у вас таблицы скидывайте в телеграм чат.

Практическая 4

Исправляем невалидный код.

Задание выполняете прямо на сайте по ссылке — https://codepen.io/Sokhareva/pen/jOJpRGe

Для проверки валидности используйте сайт — https://validator.w3.org/

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

Эту работу вы будете выполнять в несколько этапов, постепенно добавляя в нее свои знания.

Подготовка.

Для работы с проектом всегда создавайте для него отдельную папку. Зачастую структура внутри будет повторяться. В нашей практической структура будет такой:
— файл главной страницы сайта index.html
— системный файл с настройками .editorconfig (его можно скопировать из предыдущего проекта, если не собираетесь менять настройки)
— файл для страницы сайта со статьей article.html
— папка для изображений img
— файл praktika.docx (Скачать тут)

Главная страница

За главную страницу сайта у нас отвечает файл index.html
Вам необходимо создать страницу в соответствии с примером:

Логотип: скачать тут

Перед тем как писать код, определите какие элементы вы видите на примере. Это поможет вам правильно подобрать теги.

Подсказка.

Принято, что логотип на сайте — это ссылка, которая ведет на главную страницу этого сайта. Используйте для логотипа практического задания ссылку на сайт https://sokhareva.ru она должна открываться в новой вкладке.

Создайте див в котором будут элементы «Уроки» и «Статьи»

элемент «Уроки» — должен вести к файлу lessons.html (его мы создадим в следующих уроках). Должно открываться в новой вкладке.

элемент «Статьи» — должен вести к файлу article.html Должно открываться в новой вкладке.

Создайте элемент, который должен скачивать файл praktika.docx

Страница статьи

Код страницы статьи у нас будет в файле article.html
Вам необходимо создать страницу в соответствии с примером (так будет выглядеть страница после стилизации): скачать тут

Перед тем как писать код, определите какие элементы вы видите на примере. Это поможет вам правильно подобрать теги.

Подсказка.

В этом уроке мы не стилизуем страницу, а только определяем теги.

В статье 4 раздела, определите их по смыслу и оберните каждый раздел в див.

Реализуйте якорный переход из содержания в нужный раздел.

Обратите внимание на изображения в статье. Они есть с подписями и без. Используйте соответствующие теги (img и figure).

Как в итоге должна выглядеть страница статьи после этого урока: скачать тут

Текст для статьи: скачать тут

Изображения для статьи: скачать тут

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

Проверка вашей работы.

Скиньте в телеграм-канал архив вашей корневой папки со всеми необходимыми файлами.

В прошлом уроке мы с вами подключили файл css к нашей веб странице и даже посмотрели как работают некоторые стили.

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

Перед этим еще немного потренируемся на отдельных элементах, чтобы лучше понять принцип работы с CSS.

CSS Селекторы — это имена стилей, в которых бы будете задавать настройки для элементов html. Бывает два вида селекторов: селекторы тегов и селекторы классов.

Селекторы тегов — это наименование любого тега из вашего html-файла, которому вы можете прописать стили (h1, table, body и тд).

Селекторы классов — это назначенные вами лично наименования, которые вы будете прописывать в атрибутах тегов. Например

в данном случае class — это атрибут тега h1, а «h1_main_page» — это селектор класса, который мы будем использовать в CSS для стилизации заголовка.

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

Внутри фигурных скобок мы и будем писать стили для всех заголовков h2.

Сначала пишется атрибут, а затем его значение.

В нашем VS Code задокументированы возможные атрибуты и при начале набора сразу появляется подсказка.

В нашем случае выберем атрибут color (цвет) и присвоим ему значение red (красный)

Обратите внимание на синтаксис и код стайл. Именно так вы будете оформлять CSS файл.

Селектор — фигурные скобки — атрибуты и их значения — точка с запятой после каждого значения атрибута.

Сохраните файл CSS и обновите страницу в браузере. Ко всем заголовкам h2 должны были примениться прописанные стили.

Но что делать, если нам нужно применить такие же стили, например к заголовку h1? Есть 2 несколько способов решения этой задачи.

1. Просто прописать стили к селектору h1
   
   Согласитесь, это совсем не эффективно, у нас получается много строчек повторяющегося кода, ведь значения внутри селекторов одинаковые. А если нужно будет так же стилизовать еще какие то элементы, то код будет громоздким.
2. Еще один вариант, это перечислять селекторы
   
   Так мы объединяем похожие по своему стилю селекторы и не заграмождаем код. Но это не самый действенный способ, так как не дает гибкости вашему коду. Например, если вы захотите часть заголовков h2 оставить черного цвета, а часть сделать красными, такой вариант вам не подойдет. Ведь селектор тега применяет свойства стилей к абсолютно ко всем тегам, которые вы прописали.
3. Но самый действенный вариант и способ которым мы будем пользоваться всегда — присвоение классов тегам, которые нужно стилизовать.
   
   На примере вы видите, что для заголовков h1 и h2 прописан атрибут class со значением heading.
   Теперь значение heading можно использовать как селектор в файле css и присваивать ему стили. Перед таким селектором класса обязательно необходимо ставить точку.
   
   Теперь все теги, в которые мы пропишем атрибут class=»heading» будут стилизованы одинаково, даже если теги будут различаться.

В среде разработчиков принято пользоваться классами, поэтому не будем отходить от негласных правил 🙂

Вес CSS селектора

Что такое вес селектора проще всего понять, когда знакомишься с еще одним вариантом стилизации — селектор по ID.

Например, у нас есть 3 параграфа с одинаковым классом «paragraph»

Пропишем ему в стилях CSS красный цвет

В браузере увидим, что все параграфы стали красного цвета

Но если мы добавим второму параграфу id со значением paragraph (атрибуты id и class не пересекаются и могут иметь одинаковые значения)

а в css файле создадим селектор со значением для id paragraph (селектор id обозначается #)

то в браузере мы увидим, что второй параграф сменил цвет на черный.

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

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

На проектах вы будете сталкиваться с разными ситуациями и применять id — селекторы вам рано или поздно все же придется, поэтому нам важно о них знать.

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

Вложенность селекторов

Это более сложный вариант работы с селекторами. Рассмотрим ее на примере див блоков.

У нас есть 1 див, в который вложено еще 3 дива. Сами по себе дивы не имеют никаких стилей, поэтому если посмотреть на итог в браузере, вы ничего не увидите.

Но если прописать им классы, то можно получить, например квадраты.

width и height будут отвечать за ширину и высоту, margin-bottom за отступ снизу, а background-color за цвет. Получаем три черных квадрата

А теперь рассмотрим, как работает вложенность селекторов.

Трем вложенным дивам, мы не присваивали никакие классы, но стили к ним применились. Все потому что мы присвоили класс объединяющему их диву, а в css прописали родительский див.

Другими словами мы говорим браузеру: возьми селектор main_block и примени стили ко всем div внутри тега с этим селектором.

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

Добавим немного кода в css, чтобы было понятно с чем мы имеем дело

я добавила color — который отвечает за цвет текста (я взяла белый) и padding-left — который создает отступ внутри нашего квадрата и текст не прилипает к его краю.

Посмотрим на результат в браузере:

Что мы видим. Не смотря на то, что я прописала цвет текста белый, текст абзаца всё равно остался черным. Это потому что наш браузер обращается ко всем div внутри родительского div у которого прописан атрибут class=»main_block», игнорируя все остальные элементы (в нашем случае параграф <p>).

Давайте немного усложним и добавим еще один div, но уже вне родительского div с квадратами.

Что получим в браузере?

Стили, которые применились для дивов внутри родительского div не сработали для последнего элемента, так как он не вложен в родительский див и селектор его игнорирует.

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

Итог

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

Для корректной работы с кодом нам необходимо разобраться какие бывают единицы измерения и правильно использовать их в разных ситуациях.

Пиксели (px)

Абсолютная единица измерения. Это говорит нам о том что это точное значение, которое не изменяется. То есть мы понимаем, что пиксель — это самая маленькая составляющая изображения (если мы говорим о графике) или самая маленькая точка в матрице (если говорим об экранах девайсов).

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

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

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

Давайте посмотрим на примерах.

Создадим див и представим, что это контейнер, который ограничивает контент на нашем сайте по ширине. Для чего это нужно? Бывают ситуации, что контента на сайте очень много и если его не ограничить по ширине, то он просто «выйдет» за рамки браузера и его не будет видно. Верстка сломается.

max-width: 1000px говорит нам о том, что контейнер ограничен шириной 1000px и как только контента станет много он будет переходить на следующую строку, а не выйдет за пределы браузера.

Еще один пример может быть связан с дизайнерским решением. Например, дизайнер отобразил какие-то элементы с определенной высотой. Допустим, это будет высота карточки товара высотой 100 px. Вы, как верстальщик понимаете, что контент внутри карточки товара будет разный. Там может оказаться большое описание или маленькое. Если не установить ограничение, то карточки товара имея разный контент внутри будут подстраиваться и иметь разную высоту.

В примере показаны 3 статьи. Их названия сейчас занимают 2 строчки, но что будет, если строчек станет три?  Если мы не ограничим высоту этой карточки, то она станет выше других и верстка «поедет».

Для ограничения по высоте в таком случае можно использовать min-heaght: 200px

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

Так же значение в пикселях практически всегда используется для border — это рамка и ее толщина как раз определяется пикселями.

Относительные единицы измерения

Это могут быть проценты (%)

В чем их плюс? Если у вас есть родительский контейнер с определенной шириной, то для обозначения ширины элементов внутри этого контейнера можно использовать значения в %. Так изменяя ширину родительского контейнера, элементы внутри него будут так же менять свою ширину в % соотношении. Это позволяет легче работать с кодом в случае внесения каких-то изменений. % широко применяются в адаптивной верстке.

Так же есть единицы измерения em и rem

em — зависит от размера шрифта родительского селектора, тогда как rem от основного шрифта заданного всему сайту.

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

Давайте вспомним, что элементы на странице бывают двух типов: строчные и блочные.

Блочные элементы — это те, которые занимают всю ширину строки браузера. Например параграф — это блочный элемент. Он занимает всю строку, даже когда в нем мало контента. И свойство display у него по умолчанию будет со значением block.

Заголовки, так же являются строчными элементами.

Строчный элемент — будет равен ширине контента, помещенного в него. Например, ссылка.

Смотрите, наш параграф с контентом «Привет» занял всю первую строку. Ссылка после него встала на вторую строку и ее длина (выделено синим) равно длине текста ссылка. В коде это выглядит так:

Что будет, если мы напишем еще одну ссылку?

В коде вторая ссылка стоит на 3 строке и имеет более длинный текст. Что получаем в браузере:

Вторая ссылка встала за первой, не смотря на то, что в html она написана с новой строки. Потому что ссылка не занимает всю ширину строки, а только ширину своего контента. В таком случае свойство display будет иметь значение inline по умолчанию. 

*Выжно! К строчным (inline) элементам нельзя применить внешние отступы сверху и снизу.

Да, тут можно заметить не логичность относительно названий, поэтому не путайтесь. Блочный — занимает всю строку, строчный занимает только размер своего контента.

Благодаря свойству display мы можем изменять поведение элементов. Сделать блочный элемент строчным или наоборот, прописав нужное значение в свойствах CSS.

Так же у свойства display есть значение none. При таком значении элемент становится невидимым не только визуально, но и не отображается в потоке кода, так, как будто его вообще не существует.

Значение inline-block для свойства display.

Это значение дает возможность комбинировать свойства inline и block. Применяя это значение мы получаем строчный элемент, не занимающий полностью всю строку, но имеющий возможность устанавливать отступы.

Итого свойство display имеет значения:

inline — когда элемент ведет себя как текст, не занимает всю ширину строки и не имеет отступов

block — когда элемент занимают всю ширину строки и ему можно настроить отступы

none — когда элемент полностью скрыт не только визуально, но и из потока кода

inline-block — когда элемент не занимает всю ширину строки, но при этом может иметь отступы

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

Margin

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

Есть разные варианты написания параметров этого свойства.

margin: 10px 20px 30px 40px;

Если четыре значения. Такое написание обозначает что у элемента будут внешние отступы 10px сверху и далее по часовой стрелке: 20px справа, 30px снизу и 40px слева.

margin: 10px 20px 30px;

Если три значения. При таком написание отступ сверху будет 10px, слева и справа 20px, а снизу 30px.

margin: 10px 20px;

Если два значения. Первое значение отвечает за верхний и нижний отступы (вертикаль), а второе за правый и левый (горизонталь).

margin: 10px;

Если одно значение. В таком варианте внешние отступы со всех сторон будут по 10 пикселей.

Очень часто вам будут попадаться ситуации, когда нужно будет задать отступ только с одной стороны. В таком случае будем использовать более точечные свойства:

margin-top: 10px; — отступ сверху

margin-right: 10px; — отступ справа

margin-bottom: 10px; — отступ снизу

margin-left: 10px; — отступ слева

Padding

Это значение отвечает за внутренние отступы.

Нагляднее всего это можно увидеть в карточке товара. Див с бекграундом в виде изображения, внутри которого есть текст.

Если не прописать в свойствах дива padding, то текст просто «прилипнет» в левому верхнему краю. За счет внутренних отступов мы можем гармонично выстраивать элементы внутри блоков.

Иными словами padding позволяет нам отделить контент от границ внутри элемента. А margin отделяет элементы друг от друга.

Принцип написания свойства и его значений такая же:

padding: 10px 20px 30px 40px;

Внешние отступы 10px сверху и далее по часовой стрелке: 20px справа, 30px снизу и 40px слева.

padding: 10px 20px 30px;

Отступ сверху будет 10px, слева и справа 20px, а снизу 30px.

padding: 10px 20px;

Первое значение отвечает за верхний и нижний отступы (вертикаль), а второе за правый и левый (горизонталь).

padding: 10px;

Внешние отступы со всех сторон будут по 10 пикселей.

padding-top: 10px; — отступ сверху

padding-right: 10px; — отступ справа

padding-bottom: 10px; — отступ снизу

padding-left: 10px; — отступ слева

Дополнение.

Если в каком-либо варианте вам нужно использовать значение ноль, то единицу измерения пиксели можно не писать, это будет корректно:

padding: 0 20px 0; 

при таком написании мы получим внутренние отступы сверху и снизу по 20 px, а слева и справа отступов не будет, потому что значение ноль.

Соединение отступов у блочных элементов

Свойства margin заданные двум блочным элементам, идущим друг за другом будут «схлопываться». Это значит, что margin-bottom и margin-top двух элементов не будут складываться. Расстояние между ними будет равно наибольшему значению margin одного из элементов.

Например, для верхнего элемента будет назначен margin-bottom: 10px, а для верхнего элемента margin-top: 30px. В таком случае расстояние между элементами будет равно наибольшему значению — 30 пикселей.

Border

Это свойство задает границы у элемента.

*Важно! Значение border суммируется с отступами!

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

Основные свойства:

border-width: 2px; — отвечает за толщину

border-style: solid; — за стиль исполнения границы (solid — сплошной, dashed — пунктир, dotted — пунктир в виде точек)

border-color: black; — цвет

Есть так же упрощенная запись свойства border:

border: 2px solid black;

Перечисляем все значения в таком порядке.

Так же свойство border можно применять точечно для каждой стороны (top, right, bottom, left). Написание соответствующее:

border-top: 2px solid black;

Ширина и высота

Ширина (width) и высота (height) определяют фиксированный размер элемента. Если мы зададим точный размер, а контента внутри блока будет слишком много, то он выйдет за границы этого блока.

Что бы не происходило подобный ситуаций, лучше всего пользоваться свойством min-height — когда необходимо определить минимальную высоту блока исходя из дизайна и max-height — если вы точно знаете, какую высоту может занимать этот блок максимально.

Если вы не знаете сколько именно контента будет внутри блока, то достаточно воспользоваться одним свойством min-height. При этом, если контента будет много, блок будет подстраиваться под него автоматически.

То же самое можно делать и с шириной блока, задавая ему свойства min-width и max-width

Блочную модель еще называют боксами. Нам важно знать свойства, которые влияют на эту модель. Косвенно, мы уже изучили эти свойства в предыдущих уроках, теперь просто соберем их все вместе.

Посмотрим на примере див блока с заданными стилями:

Если вы зайдете в браузер и в инспекторе кода (F12) посмотрите на свойства этого дива, вы увидите наглядое отображение блочной модели:

Все эти свойства мы уже знаем и умеем задавать нашему блоку. Прочерки обозначают, что эти свойства равны нулю. Остальные размеры указаны в пикселях.

Самые внимательные скорее всего заметили, что мы задали только ширину блока 100px, а высота у нас равно нулю. Но почему тогда в браузере мы видим высоту, почему в инспекторе когда, высота будет отображаться как 60px?

Все потому, что мы задали внутренние отступы (padding) по 20px и оформили border по 10px. Что вместе нам дает высоту блока 60px.

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

Свойство box-sizing

Это свойство имеет несколько значений:

• content-box
  Это значение по умолчанию. При таком значении внутренние отступы (padding) увеличивают ширину элемента. То есть, если у вас ширина элемента (width) задана 100px и вы установите внутренние отступы по 10px. Общая ширина элемента станет 120px, так как прибавятся отступы слева и справа.
• border-box
  При таком значении свойства внутренние отступы «съедают» размеры внутри блока, не увеличивая его заданную ширину. То есть элемент с заданной шириной 100px, останется размером 100px при любых значениях padding. Сейчас это стандартное свойства для блочных моделей, поэтому в дальнейшем мы будем очень часто им пользоваться.

Свойство display (повторение)

имеет значения:

• block — элемент займет всю ширину родительского элемента, следующий элемент после него будет расположен на следующей строке
• inline — границы элемента будут равны контенту внутри него, следующий за ним элемент будет расположен последовательно на той же строке, нельзя назначить внешние отступы сверху и снизу
• inline-block — границы элемента будут равны контенту внутри него, следующий за ним элемент будет расположен последовательно на той же строке, можно назначить внешние отступы сверху и снизу
• none — элемент полностью отсутствует на странице и не участвует в потоке кода, никак не влияет на другие элементы

Построение сетки

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

Предлагаю воспользоваться сайтом codepen.io чтобы сразу видеть результаты нашей работы. Если вы еще не зарегистрировались на этом сайте, самое время это сделать. Этот сайт дает вам прекрасную возможность отрабатывать какие-то кусочки кода, практиковаться или искать ошибки.

После регистрации просто нажмите на значок Pen в левом верхнем углу сайта:

Создадим четыре дива с классом grid и чтобы нам увидеть их наглядно зададим им несколько css стилей:

При таких свойствах стилей наши дивы остаются блочными элементами, так как это свойство у них по умолчанию. Поэтому каждый див стоит с новой строки. Изменим свойство отображения display на inline-block и увидим, что наши элементы выстроились в ряд:

Если зайти в инспектор кода (F12) и посмотреть на стили у родительского элемента body, то мы увидим, что по умолчанию у него есть внешние отступы (margin) по 8 пикселей. Мы можем переназначить эти стили, чтобы нам было легче разобраться, как работает сетка.

Зададим родительскому элементу body внешние отступы по 20 пикселей, ширину поставим 400 пикселей, и сделаем видимый бордер:

Мы видим, что не смотря на то, что ширина каждого элемента 100 пикселей, а ширина родительского элемента 400 пикселей, один элемент был перенесен на следующую строку. Так же мы видим отступ справа между элементами, хотя мы его не задавали. Этот отступ барузер задает автоматически и даже если вы посмотрите через инспектор кода, никаких отступов там видно не будет. Именно из-за этих отступов наши див элементы не помещаются в родительский контейнер. Сейчас разберемся, как это можно исправить.

Зададим родительскому элементу body размер шрифта со значением ноль: font-size: 0; После этого тексты внутри наших блоков исчезнут, но так же мы увидим, что исчезли отступы между элементами:

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

Дальше поработаем со свойством box-sizing.

Мы помним, что это свойство определяет поведение ширины элемента за счет его внутренних отступов (padding). Сейчас вы можете видеть, что контент внутри наших дивов расположен в левом верхнем углу без каких либо отступов. Давайте зададим внутренние отступы 5 пикселей и посмотрим, что получится:

Последний элемент опять переместился на вторую строку. Все потому, что по умолчанию у дивов  свойство box-sizing со значением content-box. Это значит, что внутренние отступы прибавляются к ширине элемента, в нашем случае к 100 пикселям ширины, прибавится 10 пикселей (по 5 слева и справа). Элементы стали по 110 пикселей и больше не помещаются в родительский элемент шириной 400 пикселей. Это наглядно видно в инспекторе кода:

Чтобы переназначить это свойство нам нужно воспользоваться значением border-box и элементы снова встанут на свои места:

Псевдоклассы

Чтобы познакомиться с псевдоклассами немного доработаем наш код. Сделаем его более похожим на карточки товаров в интернет магазине.

• увеличим ширину родительского элемента до 720 пикселей, а ширину дивов до 180
• высоту дивов сделаем 50 пикселей
• цвет заднего фона сделаем светло-серым
• увеличим внутренние отступы до 40 пикселей

Мы хотим, чтобы наши карточки отделились друг от друга. Для этого нужно задать им внешние отступы (margin). Мы воспользуемся точечным способом и сделаем отступы по 5 пикселей только справа:

В таком случае мы уже знаем, что произойдет: последний элемент переместится на 2 строку, так как ему не будет хватать места. Сейчас мы просто увеличим ширину родительского блока на 20 пикселей, которые у нас появились за счет внешнего правого отступа у каждого элемента.

Элементы встали в ряд, но очевидно, что правый отступ у последнего 4го элемента лишний. И вот тут к нам на помощь приходят псевдоклассы. Они нужны нам когда нужно в упорядоченных элементах, найти какой-то конкретный элемент. В данном случае — это последний элемент среди всех элементов в родительском контейнере (Элемент 4).

:last-child — для последнего элемента в контейнере

:first-child — для первого элемента в контейнере

:nth-child(3) — свойства будут применяться только к 3 элементу. В скобках может быть любое число, того элемента для которого нужно назначить другие свойтсва

:nth-child(3n) — свойства будут применяться к каждому третьему элементу. В скобках может быть любое число

В нашем случае нам нужно применить свойство к последнему элементу и убрать отступ справа. Синтаксис в таком случае будет такой:

.grid:last-child {
     margin-right: 0;
}

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

*так же в CSS мы заменим стилизацию по селектору тега body на стилизацию по классу «chi»

Но мы всё равно видим отступ. Давайте посмотрим в инспекторе, применилось ли наше свойство к последнему элементу?

В инспекторе мы видим, что margin имеет прочерк, что равно нулю. Свойство last-child применилось корректно. Вспоминаем, что мы задавали размеры и border родительскому контейнеру и идем считать:

Ширина родительского контейнера 740 px, вычитаем ширину блоков (180 х 4) и не забываем про расстояние между блоками, которое мы определили по 5px (5 x 3). Получаем 740 — (180 х 4) — (5 х 3) = 5. Пять лишних пикселей у нас осталось и теперь, если мы уменьшим родительский блок до ширины 735 px, то все встанет на свои места.

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

Добавим в родительский контейнер еще 4 дива и увидим, что верстка опять сломалась.

Это произошло потому, что у нас только у последнего элемента отсутствует margin-right (Элемент 8). Так как у 4 элемента отступ справа сохранился, то он уже не поместился в контейнер и был перенесен на следующую строку.

В таком случае нам нужно применить свойство :nth-child(4n) — чтобы каждый четвертый элемент принимал значения этого свойства.

Синтаксис:

.grid:nth-child(4n) {
margin-right: 0;
}

Все встало на свои места. Теперь сколько бы новых блоков не добавили в родительский контейнер, всегда 4 элемент не будет иметь правый отступ и верстка не поедет.

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

Контент внутри блоков

Когда мы не знаем, какое количество контента будет внутри каждого отдельного блока, мы можем столкнуться с такой ситуацией:

Я добавила больше текста в Элемент 1 и 6. Сделала border всем элементам, чтобы отделить их визуально. И убрала height, чтобы блок не был ограничен по высоте, а растягивался на всю высоту контента.

Очевидно, что наша вёрстка «поехала» и элементы расположены не красиво. Допускать подобное не сайте не приемлемо.

Для построение красивой сетки, можно воспользоваться тегом vertical-align. Этот тег позволяет располагать элементы по вертикали и имеет такие значения:

top — все элементы прижимаются к верхнему краю

bottom — все элементы прижимаются к верхнему краю

left, right — все элементы прижимаются к левому или правому краю

middle — по центру

В нашем случае нам удобнее было бы прижать все элементы к верхнему краю.

vertical-align: top;

Теперь, сколько бы не было контента внутри каждого блока, все они будут располагаться на одной линии.

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

На странице CodePen добавьте дополнительный контент в блоки в разделе html, чтобы они отличались по высоте. Примените свойство CSS vertical-align, чтобы блоки были прижаты к верхнему краю.

Нажмите «Save» в правом верхнем углу сайта и пришлите в чат ссылку на страницу с вашей работой.

Как вы уже видели, некоторые теги в html документе имеют уже встроенные стандартные стили. Как, например, у параграфа (тег <p>) есть отступы сверху и снизу. А заголовки (теги <h>) имеют не только отступы, но и размер шрифта, которые отличается от всего остального текста в документе.

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

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

Разберемся, как это можно сделать на примере нашей статьи, которую мы начали форматировать в предыдущих уроках.

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

Как мы уже знаем, стили мы задаем в файле css. Откройте в VS Code файл style.css для вашей статьи. Напомню, что он лежит в папке «css»

Он у нас пока пустой. И сейчас мы посмотрим какие существуют варианты сброса отступов.

1. Прописать через * новые значения для внешних и внутренних отступов (margin, padding). Так как мы хотим сбросить имеющиеся значения нам нужно поставить отступы 0 пикселей.
   
   Сохраним изменения и в браузере увидим, что все отступы исчезли
   
   Метод переназначения стилей через * не совсем корректен в данном случае, так как * в css обращается абсолютно ко всем элементам, даже если у них нет стандартных встроенных стилей. Что дает загрузку системы, так как браузер будет последовательно проходить по всем элементам и обнулять стили даже там, где этого не нужно. И если в нашем случае с довольно простым кодом это никак не повлияет на загрузку страницы, то в большом проекте, такие действия не желательны.
2. Есть еще один вариант для сброса всех встроенных стандартных стилей. Такой файл называют reset.html и в нем прописывают все параметры для сброса. Отступов, размеров заголовков, обозначений для списков и тд. Но прописывать все эти параметры руками не очень удобно, всегда есть шанс что-то упустить или убрать слишком много. Подробно не будем останавливаться на этом методе, так как использовать его в своей практике мы не будем. Просто знайте, что вы существует такая возможность полностью сбросить все стили прописывая код руками в отдельном файле reset.
3. Третий способ, который мы будем использовать для сброса стандартных встроенных стилей — normalize.css
   Это уже готовый файл, который вы можете скачать и применять к своим проектам. Просто смотрите самую последнюю версию, она будет учитывать все новые фишки браузеров и облегчит вам работу со стилизацией кода.
   Сейчас последняя версия v8.0.1
   Скачать можно на сайте https://necolas.github.io/normalize.css/
   Для того чтобы применить сброс стилей создайте в папке с Проектной работой файл normolize.css (не забудьте, что файлы .css лежат у нас в соответствующей папке).
   
   Откройте файл normolize.css в VS Code
   Нажмите на сайте кнопку Download и скопируйте весь текст, который есть в браузере (для выделения всего текста используйте горячие клавиши Win + A).
   Вставьте скопированный текст в файл normolize.css и сохраните изменения.
   
   Все стили, которые применяются в этом файле подписаны комментариями (зеленый текст /** ………….*/). Сейчас многие стили вам еще не знакомы, но в целом можно понять, какие стили сбрасываются или переназначаются.
   Например, удаление отступов во всех браузерах для всего контента внутри body
   
   Файл normolize.css будет обнулять или переназначать стили для всех возможных браузеров. Поэтому вам легче будет верстать сайт по заданному дизайну и тратить меньше времени на высчитывание отступов их сложение и вычитание.
   Все стили из этого файла сейчас мы рассматривать не будем, просто поблагодарим добрыйх программистов, которые за нас проделали эту работу и упростили нам жизнь :)Ну и, конечно, не забудем подключить наш css файл к основному html документу. Действуем по тому же принципу, как подключали стили css.** Не забудьте удалить из style.css код, который мы писали в первом пункте, благодаря которому мы обнуляли margin и padding.

   Почему link с файлом normolize.css идет выше, чем style.css? Вспоминаем о каскадах. Сначала применяется то, что идет выше. То есть, сначала мы файлом normolize.css сбрасываем лишние стили, а потом файлом style.css начинаем добавлять собственные стили.

Дополнительное обнуление внутри файла style.css

Что нам нужно добавить в файл style css:

html {
     box-sizing: border-box;
}

этот стиль нам позволяет не учитывать рамку наших элементов. То есть, если вы какому-то элементу пропишите стиль border: 1px; то этот 1 пиксель будет учитываться в размерах этого элемента. box-sizing: border-box; — делает так, чтобы размеры бордера не учитывались в общих размерах элемента.

Как выглядит стандартная настройка ссылки? Она синяя, с нижним подчеркиванием. Или фиолетовая, если мы на нее уже нажимали.

Чаще всего нам нужно будет задавать собственные стили для кнопок, поэтому мы сбросим эти настройки использовав стили:

a {
     color: inherit;
     text-decoration: none;
}

color: inherit; — наследует стиль родительского элемента, где стоит ссылка. То есть цвет ссылки будет как у всего документа в нашем случае.

text-decoration: none; — убирает нижнее подчеркивание у ссылки.

Всем картинкам мы задаем максимальное значение ширины — 100%, чтобы у нас не было полосы прокрутки (как справа в браузере), если картинка слишком большая по размеру и выходит за рамки ширины браузера или высоты элемента.

img {
     max-width: 100%;
}

Далее мы сбросим все отступы для заголовков h. Делаем мы это для того, чтобы нам не пришлось постоянно высчитывать какой отступ будет между элементами, так как вертикальные отступы схлапываются и остается больше значение. Но при этом, визуально нам хотелось бы отделить заголовок от основного текста. Для этого мы поставим отступ снизу равный размеру шрифта (1em). Дополнительно сбросим отступ слева и справа.

h1, h2 {
     margin: 0 0 1em;
}

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

Нам необходимо создать класс для родительского элемента, который содержит весь контент сайта — это body (файл html)

А в файле со стилями прописать подходящие отступы:

.container {
     padding: 2rem 1rem;
}

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

Давайте посмотрим на наши списки. Если мы проинспектируем код в браузере, то увидим, что списки так же имеют отступы по вертикали:

Переназначим отступы для наших списков:

ul, ol {
    margin: 0;
}

Вот что получается в итоге в нашем файле style.css

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

Проверка вашей работы.

Скинуть в чат телеграм сжатую папку с вашей Проектной работой.

Возвращаемся к нашей большой практической работе. В этом уроке начнем стилизовать наш сайт.

Мы уже знаем, что для подключения стилей к html файлу нам необходимо создать отдельную папку в наше проекте CSS и создать в папке файл style.css. Не забудьте скопировать наши базовые сбросы стилей для файла css. Пока остановимся на основных:

Так же не забудем скопировать из нашего предыдущего проекта файл normolize.css

Теперь подключим наши файлы со стилями в html файл практической работы.

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

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

Оберните весь контент в тег div с классом main-container

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

display: flex — позволит нам управлять нашими элементами вне потока. Flex-блоки мы будем разбирать очень подробно в следующих уроках, так как это очень большая и сложная тема.

flex-direction: column — выстроит наши блоки в колонну, друг под другом

align-items: center — все элементы центруются по горизонтали

justify-content: center — все элементы центруются  по вертикали

min-height: 100vh — (vh) означает «Viewport Height» это велична видимой части экрана. Значение определяется в %. В нашем случае 100vh означает 100% от величины видимого экрана. Для лучшего понимания, можете изменить значение на 50vh и посмотреть, что изменится в браузере.

color — будет определять цвет текста

background-color — цвет заднего фона

Добавим ссылке с логотипом класс со значением logo и сделаем нижний отступ 50px (margin-bottom).

Так же мы помним, что ссылка — это строчный элемент и нам нужно, что бы ее отступы отображались корректно. Переведем ссылку из строчного элемента в удобный для нас формат — display: inline-block

Далее поработаем с нашими ссылками и для их родительского дива создадим класс со значением links. Добавим нижний отступ 50px по аналогии с предыдущим элементом

Присвоим ссылкам «Уроки» и «Статьи» класс со значением link и сделаем их блочно-строчными. Добавим внутренние отступы (padding) визуально отделим эти элементы друг от друга. Сверху и снизу — 24px, слева и справа 49px

Текст в наших ссылках визуально разделился, но вот в инспекторе эти элементы по прежнему стоят вплотную

Исправим это, назначим внешний отступ для класса link — margin-right: 25px; Обновим браузер и посмотрим в инспектор кода

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

Вспоминаем про псевдоклассы not(last-child) — применять стиль ко всем элементам, кроме последнего.

Заглянем в инспектор кода и увидим, что у первой ссылки правый отступ есть, а у второй (то есть последней в родительском элементе) нет

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

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

Мы стилизовали главную страницу сайта. Но у нас есть еще одна html страница — Статьи (article.html)

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

• имя должно быть коротким
• должно подходить по смыслу к элементу, которому оно присваивается
• желательно на английском языке
• если имя состоит из двух слов, то разделяйте их дефисом (mane-page)

Для начала скачайте пример итоговой вёрстки страницы «Статьи» — тут

Опираясь на пример давайте стилизуем нашу статью. Напоминаю, что стилизацию мы делаем в файле style.css

1. Подключаем к фалу article.html наши файлы css (normolize и style)
   *Подсказка. Можно скопировать из файле index.html
2. Чтобы отделить контент от краев браузера обернем весь контент в контейнер (div). Тут придется поработать над отступами для вложенности. Чтобы иметь возможность сразу двигать несколько строк в VS Code кликайте на каждую строку с зажатой клавишей Alt, а потом просто нажмите Tab.
   Сейчас вам придется потратить на эти действия достаточно много времени, но помните, что в дальнейшем мы будем упрощать себе жизнь и идти последовательно по верстке, чтобы не запутаться во вложенности и стилях.
   Так же предлагаю скомпоновать код. Такой метод компановки допустим по код-стайлу и помогает сократить количество строчек кода. Поставим теги контент в них в одну строку, если внутри тега нет других вложенных блочных тегов.
   В нашей статье это заголовки и параграфы, а так же описания для изображений.
   Возвращаемся к нашему родительскому диву и присвоим ему класс container. Стилизуем этот класс:
   .container {
        margin: 0 auto;
        padding: 80px 0;
        width: 1170px;
   }
   

   Давайте разберем, что мы сделали:
   margin 0 auto; — располагает контейнер по центру.
   padding: 80px 0; — делает внутренний отступ в контейнере сверху и снизу по 80 пикселей, так контент не прижимается к краям
   width: 1170px; — ограничивает контейнер по ширине. Теперь всё, что будет находиться внутри родительского контейнера не уйдет за пределы этой ширины и будет располагаться в видимой части браузера.

3. Заголовок h1 у нас, как мы помним, может быть только один на странице.
   Задайте класс для заголовка h1 и стилизуйте его. Если вы пока не так хорошо владеете английским языком, для стилизации элементов используйте переводчик. Так заголовок по английский будет heading, но чтобы выделить, что это именно самый главный заголовок, можно назвать класс: main-heading
   — уберем верхний отступ у заголовка, чтобы он не смещался по вертикали, так как margin-top заголовка суммируется с padding-top родительского контейнера.
   — переназначим margin-bottom и сделаем нижний отступ 40 пикселей
4. Выделим в отдельный класс заголовки 2 уровня (h2)
   Задайте собственный класс для этих заголовков
   — сбросим верхний отступ (значение 0)
   — переназначим margin-bottom и сделаем нижний отступ 10 пикселей
5. Не забудем про заголовки 3 уровня (h3)
   Задайте собственный класс для этих заголовков
   — сбросим верхний отступ (значение 0)
   — переназначим margin-bottom и сделаем нижний отступ 10 пикселей
   Сейчас может показаться, что можно было объединить заголовки уровня 2 и 3 под одним классом, ведь сейчас там одинаковые стили. Так можно было бы сделать. Но может получиться так, что нам придется переназначать какие-то стили для заголовков 2 или 3 уровня и тогда придется создавать отдельный класс. Мы это предугадыаем и для разных по назначению тегов, задаем разные стили.
6. Далее создадим класс для всех параграфов (p)
   Класс задаем для всех параграфов, кроме тех, которые расположены в серых блоках на макете. Там визуально видно, что нижний отступ у них меньше, значит они не подходят нам в этот класс.
   
   — ширина параграфа будет ограничена 872 пикселя
   — сбросьте верхний отступ (значение 0)
   — переназначьте нижний отступ — 40 пикселей
7. Два серых блока «Содержание» и «Итог» должны находиться в отдельных дивах
   Объедините эти дивы одним классом и стилизуйте:
   .gray-box {

        border-radius: 20px;

        padding: 30px;

        background-color: #f3f3f3;
   }

   border-radius: 20px; — закругляет углы нашего контейнера
   padding: 30px; — делает отступ внутри контейнера, чтобы текст не был прижат к краям контейнера
   background-color: #f3f3f3; — задает серый фон нашему контейнеру
   margin-bottom: 40px; — задает отступ снизу для серого блока, чтобы все элементы статьи имели одинаковые отступы

8. Псевдоклассы. Надеюсь, вы обновляете браузер и следите за процессом стилизации. Вы можете увидеть, что серый блок не имеет нижнего отступа и нам нужно его назначить. Но, если мы назначим отступ в классе gray-box, то и у нижнего блока с этим классом (Итоги) будет назначен отступ и он будет суммироваться с внутренним отступом родительского контейнера:
   
   
   Поэтому мы воспользуемся псевдоклассами и сделаем нижние отступы для всех элементов этого класса, кроме последнего
   .gray-box:not(:last-child) {

         margin-bottom: 40px;

   }

   Проверьте в инспекторе кода, что класс подключился корректно и у последнего серого блока нет внешнего отступа.

9. Теперь поработаем с параграфами внутри серых блоков.
   Ограничим их по ширине и настроем отступы. Для начала выделите эти параграфы в отдельный класс
   — задайте ширину параграфам 692 пикселя

   — сбросьте верхний отступ (значение 0)
   Обратите внимание, что у параграфа, находящегося в последнем сером блоке нижний отступ суммируется с внутренним отступом серого блока (Итого).
   — сбросьте нижний отступ (значение 0)
   Вспоминаем про last-child и делаем нижний отступ 10 пикселей для всех параграфов, кроме последнего.

10. Стилизуем список
    Присвойте списку отдельный класс
    — сбросьте внешние отступы (значение 0)
    — задайте внутренний отступ слева — 15 пикселей
    Присвойте отдельный класс всем элементам списка
    — задайте внешний отступ снизу — 20 пикселей всем элементам кроме последнего
11. Сгруппируйте под один класс все изображения, кроме изображения внутри тега figure
    — задайте отступ снизу 40 пикселей
    
12. Настроим стили для элементов тега figure. Там у нас лежит изображение и описание
    У тега figure есть стандартные отступы со всех сторон (проверьте это в инспекторе кода)
    — сбросьте внешние отступы (значение 0)
    — задайте внешний отступ снизу — 40 пикселей
    — задайте ширину блока 872 пикселя
    *Подсказка. Два варианта переназначить внешние отступы:
    margin: 0 0 40px;
    или
    margin: 0;
    margin-bottom: 40px;
    Логично выбрать первый вариант, так как он занимает всего одну строчку кода.
    
    

Проверка вашей работы

Скиньте в телеграм-канал архив вашей корневой папки со всеми необходимыми файлами.

Позиционирование

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

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

Позиционирование назначаем с помощью свойства — position

основные значения свойства:

• static —  элемент позиционируется по правилам потока (значение по умолчанию)
• relative — позиционирование элемента относительно его исходного положения в потоке
• absolute — позиционирование элемента относительно родительского элемента не имеющего значение static
• fixed — элемент позиционируется относительно экрана
• stickу — закрепляет элемент в заданной точке экрана

Position: static

По другому такие элементы называют непозиционированными, так как положение элементов в потоке всегда не изменно (слева на право, сверху вниз, друг за другом), если мы не назначаем им другое позиционирование.

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

Position: relative

Это что-то среднее между static и absolute. Элемент со свойством position: relative остается в потоке, но мы можем назначать ему позицию с помощью свойств top, right, bottom, left

Для примера я создала два дива. Сейчас в согласно потоку черный див идет первым, а красный далее слева на право.

Назначим черному диву позиционирование со значением relative и попробуем позиционировать оба элемента с классом block

Как мы видим, позиционирование относительно top и left получил только черный блок, так как он имеет свойство position: relative. А у красного блока свойство position по умолчанию static и на него не влияют свойства top и left. Красный элемент остается на месте, не смотря на то, что он так же имеет класс block.

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

Position: absolute

Это позиционирование полностью убирает элемент из потока.

В примере я просто заменила значение relative на absolut и мы можем наглядно видеть, как черный блок ушел из потока, на его место встал красный блок, так как будто он стоит первым в потоке. Но фактически в коде он стоит после черного блока. На черный блок по прежнему продолжают действовать свойства top и left.

Представим, что у вас всего лишь один элемент. По умолчанию у всех элементов в потоке position равен значению static и свойства top, right, bottom. left на него не влияют.

В таком случае, мы можем переназначить свойство позиционирования на absolut и элемент станет подвижным.

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

В инспекторе кода можно наглядно увидеть, что к изображению смайлика применено свойство position: absolute.

Связка элементов с position: absolute и position: relative

Как раз такая связка нужна для позиционирования блоков с разными элементами внутри. Изучите внимательно код. Я создала родительский див с позиционированием relative, а внутри него элемент с позиционированием absolute. Черный квадрат будет позиционировать относительно родительского красного квадрата.

Если у родительского элемента убрать позиционирование relative, оно станет по умолчанию static. То черный элемент перестанет позицинироваться относительно красного элемента, а будет позиционироваться относительно всей страницы, так как нет другого родителя с позиционированием relative.

То есть элемент с position: absolute будет позиционироваться относительно ближайшего родителя с position: relative, даже если это несколько вложенностей. Если ни у одного родительского элемента не будет position: relative, то элемент с position: absolute будет позиционироваться относительно всей страницы, то есть слева на право.

Вот пример, когда элемент с классом main имеет position: relative (серый блок), поэтому черный элемент с position: absolut будет позиционироваться относительно серого элемента. Красный же элемент, имея позиционирование по умолчанию static встанет в левый верхний угол, относительно серого элемента.

*Примечание. Так же вы можете позиционировать элементы с position: absolute внутри родительского элемента с position: absolut. То же самое с position: relative. Главное, чтобы у родительского элемента не было position: static

Position: fixed

Такие элементы позиционируются относительно видимой части сайта (viewport) они ни как не связываются со своими родителями.

Вы точно уже сталкивались с примерами такого позиционирования. Когда на сайте при прокрутке вниз его header остается всегда в верхней части экрана и вы всегда можете его видеть и взаимодействовать с ним.

Пример такого хедера можно посмотреть на одном из проектов нашей студии: https://vita-italia.ru/

Position: sticky

Этот вариант до сих пор используется довольно редко, так как не все браузеры правильно считывают свойства такого позиционирования. Sticky — липкий элемент, работает примерно так же как fixed, но только позиционируются относительно родительского элемента.  Так как этот вариант работает не всегда корректно, сейчас мы не будем его использоваться. Но вы всегда можете столкнуться с ним в других проектах и должны знать о его существовании.

Обтекание

Рассмотрим на примере текста и картинки. Сейчас у нас есть два элемента img и p, они идут последовательно друг за другом. Так как картинка это блочный элемент, он занимает всю свою строку и текст идет за ним на следующей строке.

Нам нужно научиться менять положение текста относительно картинки. Делать так, что бы текст обтекал изображение слева или справа.

Для этого необходимо воспользоваться свойством float

• none — значение по умолчанию. При таком значении изображение по прежнему занимает всю строку, а текст идет после него с новой строки
• left — при таком значении картинка прижата к левому краю, а текст будет размещаться справа на той же строке
  
  *чтобы отодвинуть текст от картинки нужно использоваться внешний отступ
• right — при таком значении картинка прижата к правому краю, а текст будет размещаться слева на той же строке
  

Локальный скролл

Скролл — это прокрутка страницы по вертикали или горизонтали. Чаще всего скролл мы видим именно на глобальной веб-странице. Справа в браузере появляется полоса прокрутки.

Но бывает такое, что скролл нужен или не нужен внутри самого контента сайта. Рассмотрим такой вариант.

Бывает такое, что какой-то элемент сайта жестко ограничен размерами дизайна. И не может растягиваться, если контента в нем становится больше.

В примере видно, что блок жестко ограничен по высоте (height: 200px), но контента в нем гораздо больше, он выходит за пределы блока.

В таком случае можно использоваться свойство overflow

• visible — значение по умолчанию. Любое количество контента будет все равно отображаться на странице, даже если он выходит за пределы контейнера. Но такой вариант является не приемлемым, так как мы иногда не знаем, сколько контента будет располагаться внутри блока
• hidden — при этом значении весь лишний текст, выходящий за рамки контейнера, перестает отображаться на странице. Согласитесь, не очень хорошее решение, так как часть контента просто не возможно посмотреть.
  
• scroll — значение, при котором в контейнере появляются полосы прокрутки справа и внизу. Эти полосы прокрутки будут видны всегда, не важно сколько контента будет находиться внутри родительского блока. Опять же это не самый лучший вариант, для повсеместного использования. Такой вариант может подходить в тех случаях, когда мы четко знаем, что в заданном блоке может появиться большее количество контента, по сравнению с его размерами. Например, поле, куда пользователь будет писать какой-то текст. Вы могли такое встречать на сайтах при заполнении форм заявок, где требовалось описать подробно ваш запрос.
  
• auto — самое универсальное решение в случае с ограниченным пространством. Скролл будет появляться только в том случае, когда контент начнет выходить за пределы родительского контейнера. Во всех остальных случаях, скрол видно не будет.
  
  Я убрала часть текста, теперь он полностью помещается в родительский блок и скролы полностью исчезли
  

Свойство overflow можно переназначать по вертикали и по горизонтали:

• overflow-x — горизонталь
• overflow-y — вертикаль

Фактически: overflow = overflow-x + overflow-y
overflow: auto = overflow-x: auto + overflow-y: auto

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

Слои

Это третье измерение в верстке. Мы уже знаем, что есть y — вертикаль, x — горизонталь. Но так же есть ось z — всё, как в геометрии.

Свойство z-index позволяет нам двигать элементы на передний иди задний план относительно других элементов.

Наглядно это видно, когда мы переназначаем свойство position на значение absolute или fixed и элемент становится над всеми остальными элементами. То есть выходит на передний план. При этом появляются слои и мы можем регулировать из свойства с помощью z-index

На примере мы видим, как выстраиваются блоки по слоям. Первый слой — это слой, который стоит выше в коде html по правилам потока. Чем ниже в коде расположен элемент, тем выше будет его значение z-index. Эти значения идут по умолчанию.

Для того, чтобы поменять расположение элементов в слоях, при этом не меняя код html, можно воспользоваться свойством z-index.

Добавим свойство z-index со значением 1 красному элементу.

* Примечание. Значение z-index по умолчанию auto, но проще всего отталкиваться от нулевого значения. То есть, при значении z-index: 0 красный блок по прежнему будет оставаться на заднем плане, на нулевом слое

Может ли принимать z-index отрицательные значения? Да, может. Но я не рекомендую пользоваться таким методом, так как в дальнейшем это может сильно усложнить вашу работу со слоями.

Самый оптимальный вариант работы со слоями — это считать значение z-index от нуля и идти, например десятками (0, 10, 20, 30 и тд).

Еще раз про принцип работы слоев. Чем больше значение z-index, тем выше слой с элементами. z-index применяется к элементам, которые имеют позиционирование: absolute, relative, fixed

Цвет. Свойство color

На сайтах в коде все цвета определяются:

— 6-тизначным буквенно-числовым кодом, который называется HEX, в формате #000000;

— названием на английском языке, привязанным к этому коду;

— в RGB-палитре, в формате rgb(000, 000, 000).

Например, для Белого цвета буквенно-числовой код будет — #FFFFFF, название на английском – White, а rgb(255, 255, 255) или Красный — #FF0000, Red, rgb(255, 0, 0)

Есть 16 ключевых цветов, которые чаще всего используются при написании сайта:

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

Например:

color: red - Цвет текста – красный

background-color переводится как «фон», «задний план»

Например. У нас есть текст, который написан на оранжевом фоне:

background-color: orange
И сразу видно, что тут есть фон-цвета: оранжевый

Не забываем о том, что цвета могут обозначаться и буквенно-числовым значением (HEX). В таком случае в коде увидим:

color: #000000 - Цвет текста – черный

Код HEX может иметь 3 или 6 цифр. Если значение HEX состоит из 6 одинаковых букв или цифр, то их можно сократить до трех цифр #fff = #ffffff белый цвет и #000 = #000000 черный цвет

Чаще всего именно этот вариант написания цвета применяется в вёрстке. Вы просто берете значение цвета из макета и прописываете в стилях.

А также в палитре RGB. В мониторах любой цвет получается при смешивании трех основных цветов: R-red (красный), G-green (зеленый), B-blue (синий). Соответственно в коде мы увидим:

color:rgb(255, 229, 180) - Цвет текста – персиковый

Таблица наиболее распространенных цветов (название, HEX, RGB)

Для определения цвета, его названия или его кода можно пользоваться различными сервисами. Самым удобным для себя я выбрала сервис https://colorscheme.ru/

В котором на главной странице сразу представлен цветовой круг

В правом нижнем углу цветового круга можно нажать на значение RGB: и там откроется дополнительное окно с параметрами цвета. Тут показано значение HEX и RGB. В это окошко можно вписывать свои значения HEX или RGB.

Если нужно узнать название цвета, то нужно навести курсор на кнопку «Далее…» в правом верхнем углу сайта и перейти в раздел «Названия цветов». Тут можно пользоваться поиском по названию цвета на русском языке.

Становится понятным, что не все цвета могут быть прописаны английским словом, поэтому обращаем внимание на значения HEX и RGB. Если вдруг не знаем перевод какого-то слова, всегда можно воспользоваться yandex-переводчиком (https://translate.yandex.ru/)

Альфа канал

Это значение отвечает за прозрачность цвета.

При написании цвета в формате rgb можно добавить альфа канал.

color:rgba(255, 229, 180, 0.5) - Цвет текста – персиковый

Значение альфа канала может быть в диапазоне от 0 до 1. Где 0 — полная прозрачность, а 1 полная не прозрачность. В нашем примере значение 0.5 дает половину интенсивности цвета

не смотря на то, что в rgb прописан красный цвет, при значении альфа канала 0,5 цвет становится тусклым.

color: transparent; — значение при котором цвет становится полностью прозрачным. Можно использовать в коде, как альтернативу альфа каналу

Opacity

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

В примере блок с текстом без свойства opacity полностью виден, а после применения opacity: 50%; и цвет и текст стали прозрачными и не такими яркими.

Значения для свойства opacity можно выставлять в % (от 0 до 100) или по принципу работы альфа канала от нуля до единицы (0 — 1).

запись opacity: .1; будет считаться, как opacity: 0.1; и будет верно считываться браузером.

При работе с готовыми макетами от дизайнера вам нужно будет четко разделять как реализуется прозрачность: всему блоку или отдельному элементу?

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

В css мы можем назначать разные стили для текста: подчеркивания, размер, наклон и тд. Обычно все свойства начинаются на text-…. и дополняются каким то дополнительным свойством

text-decoration

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

underline; — подчеркивание

none; — нет подчеркивания

line-through; — перечеркнутый текст

overline; — подчеркивание сверху

text-align

Свойство, которое описывает поведение текста относительно родительского элемента.

left; — текст прижат к левому краю (значение по умолчанию)

right; — текст прижат к правому краю

center; — текст расположен по центру

justify; — текст будет занимать 100% пространства родительского блока. Этот вариант не принято использовать в вёрстке из-за того, что мы не всегда можем знать, сколько контента будет в блоке и как это значение повлияет на его отображение.

text-transform

Свойство отвечает за регистр букв. ВЕРХНИЙ РЕГИСТР и нижний регистр.

none; — значение по умолчанию. В таком случае буквы будут такими, как вы их написали в коде.

uppercase; — весь текст большими буквами. При этом в коде текст может быть прописан любыми буквами

lowercase; — весь текст маленькими буквами. При этом в коде текст может быть прописан любыми буквами

capitalize; — первая буква каждого слова будет большой. При этом в коде текст может быть прописан любыми буквами

line-height

Свойство отвечает за высоту строки. Как правило это значение устанавливают чуть больше чем размер самого шрифта (примерно в 1,5 раза). Нужно это для того, чтобы строки не заходили друг на друга и не сливались, при увеличении размера шрифта.

Значение line-height может быть как в абсолютных, так и в относительных величинах. Так как это значение напрямую зависит от размера текста, то лучше всего использовать относительные величины — проценты. Таким образом, в случае внесения изменений в размер шрифта, вам не потребуется дополнительно изменять line-heaigh, он сделает это автоматически, так как задан в % от величины шрифта.

letter-spacing

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

text-indent

Свойство отвечает за красную строку. Свойство будет распространяться только на первую строку.

white-space

Свойство отвечает за пробелы между словами и перенос строки

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

nowrap; — текст не будет переноситься на новую строку

pre; — текст будет расположен так же, как вы напишите его в коде, сохраняя все пробелы и переносы

word-spacing

Свойство отвечает за пробелы между словами в пиксельных значениях. Так, если мы зададим значение 0 пикселей, то между словами совсем не будет пробелов, а будет сплошной текст. А если зададим значение 50px, то расстояние между словами будет 50 пикселей. Так же это значение может принимать отрицательные значения. В таком случае слова будут совмещаться и перекрывать друг друга.

normal; — значение, которое устанавливает расстояние между слов по умолчанию, как прописано в шрифте.

Шрифты

font-family

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

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

Самое распространенное семейство шрифтов без засечек: sans-serif  Такой шрифт есть практически на любом устройстве. А шрифт с засечками из этого семейства будет: serif

Так же мы можем перечислять семейства шрифтов через запятую:

Какой же шрифт будет применяться в таком случае? Сначала браузер будет считывать первый шрифт (helvetica). Если этот шрифт установлен на устройстве, то контент будет отображаться этим шрифтом. Если такого шрифта нет, браузер переходит ко второму шрифту (arial). Это довольно распространенный шрифт и часто встречается на разных устройствах. Но если и его не окажется, то браузер прочитает следующий шрифт. И так далее, пока не найдет совпадение. Если совпадений не будет, браузер отобразит шрифт по умолчанию, так, как если бы вы вовсе не задавали свойство font-family.

Можно подключать собственные шрифты, а не только стандартные. Как это сделать будет дополнительный урок.

font-size

Свойство, отвечающее за размер шрифта. Мы уже сталкивались с ним ранее. Может обозначаться в единицах: rem, em, px, %

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

Но есть еще вариант написания значений для этого свойства: small (размер меньше чем основной размер шрифта body), smaller (резмер немного больше чем small) и тд. Но мы не будем использовать такие значения, так как по общепринятому код-стайлу используются цифровые значения для обозначения размера шрифта.

font-style

Этим свойством мы можем управлять текстом и делать его: наклонным,

italic — наклонный шрифт. Это значение можно использовать если у шрифта существует наклонное начертание.

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

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

normal — значение по умолчанию. Когда текст принимает именно то начертание, которое прописано в его настройках.

font-weight

Толщина шрифта. Выделяют такие толщины как: regolar (обычная толщина), bold (жирный), light (тонкий), black (очень жирный) и тд. Эти толщины определяются начертаниями шрифта, когда мы будем подключать шрифты, вы наглядно в этом убедитесь.

normal — значение, которое соответствует толщине шрифта regolar

Так же толщину шрифта можно прописывать цифровыми значениями. Эти значения так же определяются параметрами каждого отдельного шрифта.

light = 300

black = 900

Порядок расчета идет сотнями: 100, 200, 300 … 800, 900. Но по прежнему определяется настройками шрифта.

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

font

С помощью этого свойства можно объединить свойства в одну строку, чтобы ускорить процесс вёрстки.

font: 400 15px / 40px Arial;

Объединяет в себе font-weight, font-size, line-height, font-family

400 = font-weight

15px = font-size

40px = line-height

Arial = font-family

Возвращаемся к нашей статье «Код-стайл» и применим к ней наши новые знания.

Вот так сейчас выглядит ваша папка с Проектной работой по статье:

В последний раз мы подключили к нашему проекту со статье normolize.css и внесли в style.css некоторые стили.

Давайте немного подготовим нашу статью к вёрстке:

• Проверим, что все пути к файлам прописаны правильно
  
  Правильно:
  
• Удалим из таблицы прописанные ранее свойства. Потому что все свойства мы будем писать через классы в файле style.css
  
  Правильно:
  
• Полностью удалим весь код из файла style.css. Потому что теперь мы знаем, что самый лучший вариант — это работа через присвоение классов для тегов
  

Скачайте пример готовой статьи: скачать тут

Опираясь на пример создадим стили:

• Общий контейнер
  В примере мы видим, что статья располагается не во всю ширину экрана. Ранее мы уже создали класс для главного контейнера body
  
  — зададим ему ширину 1170 пикселей и поставим его по центру нашей страницы
  — добавим шрифты для всей статьи: Arial, Verdana, sans-serif
  
• Главный заголовок
  Для главного заголовка создадим класс main-title и присвоим ему стили:
  — переназначим верхний отступ 20 пикселей, чтобы отделить заголовок от верхнего края
  — переназначим нижний отступ и зададим ему 30 пикселей
  — зададим размер шрифта 50 пикселей
  — сделаем цвет текста #3f2aff
  
  *раньше верхний отступ мы задавали через body, так тоже можно делать, но нужно четко понимать, что в таком случае у вас всегда будет верхний отступ. Ведь бывает так, что верхний отступ вам не нужен. Например, первым элементом идет изображение и оно по дизайну должно быть вплотную к верхнему краю браузера.
• Стилизуем параграфы
  Всем параграфам, одинаковым по стилю из примера, необходимо создать класс text. Зададим стили:
  — сбросим отступы
  — переназначим нижний отступ 30 пикселей
  — для удобства чтения сократим ширину до 730 пикселей
  — зададим размер шрифта 20 пикселей
  — расстояние между строк 160%
  — цвет шрифта серый #333
  
  Сверимся с макетом:
  
• Стилизация цитаты
  Цитата имеет фоновый цвет и отличается в начертании. Обратите внимание! Цитата должна находиться в контейнере, для того чтобы мы могли стилизовать его.
  — задайте класс для контейнера цитаты
  — задайте классу контейнера ширину 900 пикселей
  — задайте цвет фона со значением #ebebeb
  — задайте внутренние отступы, чтобы отделить контент внутри контейнера: 25 пикселей сверху и снизу, 120 пикселей слева и справа
  — задайте нижний отступ 30 пикселей
  — поставим текст цитаты по центру родительского блока
  
  Посмотрим на результат:
  
  Мы видим, что ширина серого контейнера гораздо больше чем на макете. Это произошло потому что мы назначили внутренние отступы слева этому элементу. Напоминалка из предыдущего урока:
  
  Поэтому мы зададим для всего документа новое свойство:
  
  Теперь все элементы которым мы будем задавать внутренние отступы будут иметь значение border-box и не увеличиваться в размерах за счет них.
  Теперь поработает с текстом цитаты:
  — создайте класс для самого текста цитаты
  — толщину шрифта зададим со значением 700
  
• Стилизация изображения
  В примере статьи изображение прижато к левому краю, а в нашем случае у тега figure есть встроенные отступы.
  — назначим тегу figure класс
  — сбросим все отступы
  — переназначим нижний отступ 60 пикселей
  
  Зададим ширину изображения внутри тега figure 900 пикселей
  
  Синий блок после изображения — это подпись к нашему изображению. Назначим собственный класс для тега с подписью и присвоим ему стили:
  — цвет фона #3f2aff
  — цвет текста белый
  — назначим внутренние отступы, чтобы отделить текст от краев 12 пикселей со всех сторон
  — сделаем размер шрифта, как у всех параграфов 20 пикселей
  — поставим текст по центру
  — зададим максимальную ширину 900 пикселей
  
• Заголовки второго уровня
  Далее у нас идут повторяющиеся элементы — заголовки. Выглядят они одинаково и имеют одинаковый смысл в статье, поэтому мы можем использовать для них один общий класс.
  — сбросим все отступы
  — переназначим нижний отступ 10 пикселей
  — цвет текста серый #333
  — размер шрифта 40 пикселей
  
• Стилизуем список
  Зададим списку собственный класс и пропишем свойства:
  — сбросим отсутпы
  — назначим отступ снизу 20 пикселей
  — размер шрифта 20 пикселей
  — цвет текста серый #333
  — чтобы сделать расстояние между элементами списка воспользуемся не нижними отступами а расстоянием между строк
  

Проверка вашей работы

Скиньте в телеграм-канал архив вашей корневой папки со всеми необходимыми файлами.

CSS — фоновые изображения, тени и границы

В этом уроке мы посмотрим стили оформления блоков и декоративные приемы.

border

Мы уже изучали это свойство ранее в html и принцип работы с ним в css будет очень похожим. (Урок 19)

border: 3px solid black;

Так же вспомним про border-radius, который закругляет края блока.

Бывают ситуации, когда вам необходимо закруглить не все углы.

Вариант, когда закругляем все углы:

Но если нам нужно закруглить левый верхний угол, то так и пишем:

border-top-left-radius

По аналогии вы можете переназначать значение радиуса угла для каждого отдельного случая:

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

Не забывайте о том, что размер border суммируется с размером самого блока. В нашем примере размер блока 300х300px, а border 3px. Значит эти 3 пикселя прибавляются к каждой стороне. Ширина и высота элемента в таком случае станет 306х306px.

Чтобы этого избежать используйте свойство outline вместо border. В таком случае размер границы не будет суммироваться с размерами блока.

Тени

box-shadow

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

Стандартное расположение тени — направленное направо и вниз.

box-shadow: 3px 3px black;

Мы можем переназначить положение, чтобы тень была направлена вверх и налево.

box-shadow: inset 3px 3px black

Первое значение в пикселях отвечает за расположение тени по горизонтали, а второе за значение повертикали. Далее идет цвет тени.

Так же к тени можно добавить степень размытия. Это не обязательный параметр, по умолчанию он задан 0. Степень размытия пишется перед цветом, значения указываются в пикселях. Чем выше значение, тем более размытой будет тень объекта.

*Важно. Тень — это очень ресурсозатратное свойство. Если вы используете его для анимации всегда обращайте внимание на производительность. Простыми словами следите за тем, чтобы ваш сайт не тормозил при воспроизведении анимации с тенями.

Так же есть очень похожее свойство text-shadow, которое задает тень для текста. Тень задается для каждой отдельной буквы.

Раньше этим свойством пользовались для того чтобы сделать эффект неоновых букв. Сейчас этот стиль уже устарел и его все меньше применяют в верстке и дизайне веб-сайтов.

Цвет заливки (фона)

Это свойство вы уже знаете: background-color

Так же помним, что цвет можно назначать по разному:

• #000000 или сокращенно #000
• black
• rgb (0, 0, 0)

Некоторые элементы имеют цвет заливки по умолчанию и если он не подходит вам по дизайну вы всегда можете его сбросить сделав его прозрачным:

background-color: transparent;

Так же фоном можно сделать изображение с помощью свойства background-image:

background-image: url(«https://sokhareva.ru/wp-content/uploads/lego-cart.jpeg»);

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

Основной параметр — это, конечно, url ссылка на само изображение:

url(«https://sokhareva.ru/wp-content/uploads/lego-cart.jpeg»)

так же может быть прописан внутренний путь к папке (по аналогии, как мы подключаем стили к файлу)

url(«img/lego-cart.jpeg»)

background-image: none; — значение, которое удаляет изображение с фона. Например, вы задали background-image для группы элементов, но для одного из элементов необходимо его убрать. В таком случае, вам поможет переназначение свойства в none.

Если у блока не будут заданы параметры размеров (высота и ширина), то и background-image вы не увидите. Либо в элементе уже должен быть какой-то контент.

background-position

Это свойство позволяет позиционировать изображение относительно родительского блока.

background-position: center center; — центрует изображение по вертикали и горизонтали

Значения можно комбинировать со значением в пикселях:

background-position: 0px center; — в таком случае по горизонтали не будет никакого смещения изображения, а по вертикали изображение будет по центру.

То есть первое значение опять же отвечает за горизонталь, а второе за вертикаль. Поэтому мы можем использоваться значения left и right для горизонтального позиционирования и top и bottom для позиционирования по вертикали.

Так же можно использовать относительные величины в процентах.

Если значения совпадают, можно писать упрощенно: background-position: center;

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

Для background-image есть одно интересное свойство по умолчанию — background-repeat

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

background-repeat: no-repeat; —  при использовании этого значения, картинка не будет повторяться. Мы будем очень часто пользоваться этим свойством в верстке, обязательно запомните его.

background-repeat: repeat-x; — будет повторять фон только по горизонтали

background-repeat: repeat-y; — будет повторять фон только по вертикали

Следующее свойство для фоновых изображений background-size. Свойство отвечает за размер изображения.

background-size: cover; — значение, при котором изображение будет полностью закрывать все пространство родительского блока, подстраиваясь под его значения, даже если они будут изменяться. Очень полезное свойство для верстки.

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

Если вам нужно полностью отобразить изображение необходимо применять значение: background-size: contain;

Так же можно задавать абсолютные размеры изображения в пикселях:

Можно сделать относительные значения в процентах:

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

В итоге для стилизации фонового изображения нам пришлось использовать 4 строки кода. Но существует короткая запись этого свойства:

background: указываем цвет / ссылка на изображение / повторение изображения / позиционирование изображения / размер изображения

Внимательно посмотрите на пример записи и синтаксис:

background: transparent url(«https://sokhareva.ru/wp-content/uploads/lego-cart.jpeg») no-repeat center center / cover;

В данном примере мы использовали значение tansparent (прозрачность) для цвета фона. Но я рекомендую при необходимости в вашей верстке использовать нейтральный серый цвет. Рассмотрим на примере:

Сейчас у нас есть какой-то текст белого цвета на фоне изображения и его хорошо видно. Цвет фона в данном примере прозрачный. Если мы случайно «повредим» путь к изображению и оно перестанет отображаться, мы получим не видимый блок:

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

Но если мы заменим значение цвета фона (transparent) на какой-то цвет, в моем случае gray, то текст белого цвета станет читабельным и пользователь точно увидит весь нужны контент. Даже если изображение по какой-то причине перестанет отображаться.

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

29. Практика. Стилизация статьи «Код-стайл»

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

Напоминаю, как должна выглядеть статья в итоге: посмотреть тут

1. Заголовок таблицы
   Присвойте заголовку таблицы класс и стилизуйте его
   — толщина шрифта со значением bold
   — размер шрифта 20 px
   — отступ снизу 10 px
   — расположение текста по левому краю
   
2. Первая строка таблицы
   Присвойте тегам th класс table-bord и стилизуйте его
   — задайте сплошную границу размером 1 px и цветом #afafaf

   ***
   Из предыдущих уроков мы знаем, что ячейки в таблице имеют расстояние между собой и чтобы их сбросить, нам необходимо задать стиль для всей таблицы. Присвойте класс для таблицы и стилизуйте его: для этого нам нужно свойство border-collapse со значением collapse.

   Посмотрите на результат:
   
   Остальные ячейки таблицы не имеют границ. Мы могли бы назначить им собственный класс и задать границу, но так как у нас гриницы во всей таблице одинаковые, то мы можем использовать один класс table-bord. Добавьте его во все ячейки. Да, это может показаться довольно трудозатратной работой, но верстальщики должны справляться с такими задачами.

   ****
   —  чтобы отделить контент от краев ячейки нам потребуется установить внутренний отступ для каждой ячейки. То есть класс table-bord опять подходит для всех ячеек в таблице. Добавим туда это свойство: внутренние отступы 30 px
   — так же необходимо выровнять контент внутри ячеек по верхнему краю (vertical-align)
   — задайте размер текста 20 px
   

   ****
   Вернемся к стилизации первой строки таблицы. Мы видим, что цвет шрифта отличается от цвета шрифта внутри таблицы и заголовки прижаты к левому краю. Поэтому, мы не можем использовать тот же класс, который применяли для стилизации ячеек. Нам нужно создать еще один класс.
   Делается это таким образом:
   
   Дополнительный класс просто пишется через пробел.
   — задайте цвет текста синий, такой же, как мы использовали ранее в статье.
   — расположите текст по левому краю

   ****
   Посмотрите на получившийся результат.
   Мы видим, что таблица уже, чем в итоговом примере, а так же у нее нет нижнего отступа. Исправим это.
   — в класс таблицы добавьте свойство ширины со значением 100%
   — сделайте нижний внешний отступ 60 px

3. Самостоятельно стилизуйте нумерованный список, используя свойства из маркированного списка

Проверка вашей работы

Скиньте в телеграм-канал архив вашей корневой папки со всеми необходимыми файлами.

30. Валидация CSS кода

Валидатор CSS кода работает абсолютно так же, как валидатор для HTML с которым вы работали ранее.
Для того чтобы проверить ваш код css

• перейдите на сайт https://validator.w3.org/
• перейдите в 3 вкладку Validate by Direct Input

• вставьте скопированный код css и нажмите Check
• валидатор вам покажет несколько ошибок. Это потому что сейчас он считал ваш код как html.

• необходимо поставить галочку в боксе CSS, чтобы валидатор работал корректно

• поставьте галочку и еще раз нажмите Check

Проверка вашей работы.

Проверьте свой код CSS в валидаторе и напишите в чате, какие у вас были ошибки

Наша статья почти готова, осталось добавить в нее немного дизайна с помощью CSS свойств.

Стилизуем главную страницу

Как должна выглядеть главная страница:

1. Для тега body создать класс и задать стили для шрифтов:
   — font-family: Arial, Verdana, sans-serif;
2. Для ссылок «Уроки» и «Статьи» задать стили:
   — толщина шрифта 700
   — размер шрифта 18 px
   — цвет фона #8b008b
3. Задать стили для ссылки для скачивания практической работы:
   — толщина шрифта 700
   — размер шрифта 18 px
   — цвет текста #8b008b
4. Зададим фоновую картинку ссылки для скачивания. Это будет иконка рядом с текстом (справа). Будем использовать свойство background-position
   — скачайте картинку для фона: скачать
   — задайте свойство фонового изображения с помощью background-image: url(«../img/download.png»);
   — позиционируйте изображение справа по горизонтали и по центру по вертикали
   — задайте размеры для изображения 25 на 25 px
   — уберите повторение фонового изображения
   — чтобы картинка вышла за рамки ссылки используйте свойство внутреннего отступа (padding)

Стилизуем статью

Как должна выглядеть статья: скачать

1. Для тега body создать класс, такой же, как был на главной странице:
   — font-family: Arial, Verdana, sans-serif;
2. Стилизуем главный заголовок:
   — толщина шрифта 600
   — размер шрифта 60 px
   — межстрочный интервал 50 px
   — цвет текста #333
   Как вы видите, на готовом макете заголовок имеет 2 размера шрифта. Чтобы выделить другим размером часть текста используйте тег <span> и стилизацию по отдельному классу:
   — толщина шрифта 400
3. Задать стили для всех параграфов. Обратите внимание, что ранее параграфы на сером фоне имели другой класс, а теперь все параграфы нужно объединить еще одним классом:
   — толщина шрифта 400
   — размер шрифта 20 px
   — межстрочный интервал 32 px
   — цвет текста #333
4. Стилизуем заголовки 2 уровня:
   — размер шрифта 40px
   — межстрочный интервал 46px
   — цвет #333
5. Изменим цвет точек у элементов списка. Используем псевдоэлемент ::marker — он применяет свойства к маркерам списка:
   — зададим цвет точкам #3f2aff
   
6. Стилизуем ссылки в списке:
   — размер шрифта 20px
   — цвет текста #3f2aff
   Чтобы выполнить нижнее подчеркивание необходимо задать новый класс для тегов ссылки и задать ему свойство:
   — нижнее подчеркивание сделаем с помощью сплошного бордера в 1px синего цвета #3f2aff
7. Добавим в серые блоки фоновое изображение. Для этого используйте отдельные классы:
   Скачать изображение для первого блока: скачать
   Скачать изображение для второго блока: скачать
   Так как оба фоновых изображения позиционируются одинаково, можно использовать общий класс, чтобы не дублировать стили:
   — уберите повторение фонового изображения
   — позиционирование справа по горизонтали и по центру по вертикали
   — размер фонового изображения: contain (полностью помещается в размер контейнера)
8. Стилизуем заголовки 3 уровня:
   — толщина шрифта 400
   — размер шрифта 30px
   — межстрочный интервал 46px
   — цвет #333
9. Стилизуем параграф на синем фоне:
   — цвет фона #3f2aff
   — радиус бордера 20px
   Посмотрите на результат, проанализируйте
   — нужно «отодвинуть края от текста. Значит, нужно использовать внутренние отступы. Сделаем их 50px верх и них, 95px право и лево
   — ширина 100%
   — толщина шрифта 700
   — размер шрифта 30px
   — цвет шрифта #fff
10. Чтобы исправить отступ между изображение и описание к нему (тег figure):
    — задайте свойство font-size:0 (при этом текст описания исчезнет)
    Задайте новый класс описанию изображения:
    — сплошной бордер 1px цвет #b6b6b6
    — уберите верхний бордер
    — толщина шрифта 400
    — размер шрифта 14px
    — расположение текста по центру
    — внутренние отступы сверху и снизу 19px