Базовая стилизация макета интернет-магазина часов Conquest
Благодаря прошлым лайвам «Создание семантической вёрстки по макету: открытый урок по HTML и CSS» и «Итоги мини-курса по семантической вёрстке» мы разобрались, что такое семантическая вёрстка и как подключать графику.
У нас уже есть готовая вёрстка, приступим к базовой стилизации макета.
Для начала добавим пустой стилевой файл и положим в папку styles/ в корне проекта.
Так принято в сообществе веб-разработки. Каждый файл нужно добавлять в новую папку: шрифты — в fonts/, картинки — в img/, а стили — в styles/, даже если стилевой файл один.
Подключим стилевой файл к странице.
Проверим, что стили работают. Для этого добавим любой временный CSS, чтобы удостовериться, что файл подключён.
Видим, что цвет фона поменялся — значит, всё работает. Временные стили можно удалить.
Подключим шрифты. Шрифтовые файлы находятся в проекте в папке fonts. Для подключения шрифтов воспользуемся директивой @font-face в стилях.
Директива @font-face служит описанием шрифта: как он называется и какие параметры имеет.
font-family используется на двух стадиях шрифта: объявление и использование. Мы находимся на стадии объявления, поэтому запись будет короткая. Другую запись вы увидите чуть позже — в момент использования. На ней мы подробно остановимся далее.
В font-family нужно указать имя шрифта, к которому мы впоследствии будем обращаться. Обратите внимание, что имя шрифта, имеющее пробел в названии, обязательно должно быть в кавычках. Playfair Display — неправильно, "Playfair Display" — правильно.
Указав в @font-face название шрифта "Playfair Display", мы уже не сможем обратиться к нему вот так "PlayfairDisplay" или "Playfair-Display". Только так, как мы его объявили.
Затем идут начертание — font-style и насыщенность — font-weight. Это обязательные свойства в определении шрифта.
Наш шрифт не наклонный — normal, а насыщенность — 400. Но как мы это поняли?
Чтобы определить настройки шрифта, есть два варианта: подключить шрифт к странице или узнать настройки в сервисе, из которого был скачан шрифт. Мы скачали шрифт с Google Fonts и там же посмотрели все настройки.
Добавим шрифтовой файл. Заметьте, что стиль текста не изменился. Это нормально, ведь мы ещё не определили, какой конкретно текст должен отображаться этим шрифтом — Playfair Display.
Также сейчас сработала встроенная браузерная оптимизация: если шрифт объявлен, но к нему нет обращений, то есть он не используется, то шрифт не будет скачиваться.
Укажем, как шрифт будет отображаться: пропишем значение swap, чтобы шрифт не блокировался и имел бесконечный период подмены. Это самое частое значение для font-display, но это не значит, что другие плохие.
Подробнее про то, как это работает, ищите в статье «Как подключить и оптимизировать нестандартные шрифты»
Подключим оставшийся варианты шрифтового семейства.
В макете присутствует ещё полужирный вариант. Для одного и того же шрифта указываем одинаковое название — "Playfair Display".
Для полужирного варианта меняем font-weight и указываем значение 700.
Подключим второй шрифт из макета — Roboto.
Действуем по аналогии с предыдущим шрифтом: укажем, как он будет отображаться.
Подключим оставшиеся варианты шрифтового семейства Roboto. Сначала полужирный.
Затем светлый.
Теперь жирный и наклонный шрифты.
И средний и тонкий.
На этом подключение всех шрифтов закончено. Перейдём к использованию шрифтов и к текстовым параметрам.
Обычно на <body> добавляют основные текстовые параметры проекта. Это нужно для того, чтобы любой добавленный текст сразу отображался так, как задумывалось на макете. Чтобы понять, какой шрифт используется чаще всего, нужно пойти в макет и буквально прокликать весь контент.
В макете магазина Conquest чаще всего используется "Roboto" и реже "Playfair Display", поэтому подключим "Roboto".
Так как "Roboto" имеет параметры шрифта: font-style: normal; и font-weight: 400;, то дополнительно указывать их на
не нужно. Эти параметры являются параметрами по умолчанию для большинства HTML-элементов.
Мы в первый раз использовали шрифт. Напомним, что обращение к шрифту должно быть точно таким же, каким мы его определили.
Как только мы обратились шрифту, и браузеру есть, что показывать, шрифт начинает впервые загружаться. Если бы текста на странице вообще не было, например, были бы только схемы и картинки, то шрифт всё равно бы не загрузился, потому что он не нужен.
Шрифтовой файл может загрузиться не сразу, поэтому укажем семейство шрифта. "Roboto" — шрифт без засечек, поэтому укажем sans-serif.
Как это работает? Если у браузера слишком долго не получается загрузить "Roboto", то ему нужно решить, каким шрифтом показать текст. Мы ему даём подсказку: любым системным, но только без засечек. Позже, когда загрузится "Roboto", текст перерисуется на него. Переход будет плавным, так как системный шрифт был тоже без засечек.
Очередной глобальный шаг — определить базовые размеры текста для всего проекта. Обычно для этого выбирают большие куски текста на макете и смотрят, какой там указан размер и межстрочный интервал.
Размер шрифта указывается с помощью параметра font-size, а межстрочный интервал — line-height.
line-height следует указывать в абсолютных значениях (px). Так как относительные единицы в line-height относятся к font-size, а font-size имеет абсолютное значение 16px, то относительные единицы измерения в line-height становятся бессмысленными. font-size всегда будет 16px вне зависимости от настроек браузера, а значит, и относительное значение в line-height никогда не изменится.
Добавим основной фон. Основным является тот фон, который используется чаще всего. И это практически всегда фон из дополнительных страниц.
Мы указали фон, и теперь нам необходимо указать контрастный цвет текста.
Зачем это нужно? Когда подгружается фон, неважно — цвет это или картинка, текст всегда должен быть виден на этом фоне.
Кстати, контрастность можно проверять с помощью инструмента Contrast Checker.
Приступаем к стилизации ссылок.
У ссылок уберём подчёркивание, так как подчёркивания нет во всём проекте, кроме пары мест.
Стилизуем изображения.
Всем изображениям укажем max-width: 100%, чтобы они не вылезали за пределы своих родительских элементов, и укажем автоматическую высоту, чтобы изменение размеров было пропорциональным.
Навигация — это <ul>, поэтому нам нужно убрать стандартную стилизацию списка, так как по макету она не нужна.
Такие селекторы не принято использовать, но так как все ссылки точно не имеют подчёркивания, то мы их обнуляем.
Добавляем стили общим элементам на странице. Начнём с заголовков.
Добавим дополнительный класс heading заголовкам, чтобы сделать общие для них стили.
То же самое, что на предыдущем шаге, только для заголовка «Подлинное качество».
То же самое, что на предыдущих двух шагах.
У заголовков шрифт — "Playfair Display". Так как это не основной шрифт, прописанный в <body>, необходимо указать его в свойствах. Сразу обозначим размер, цвет и межстрочный интервал.
Стилизуем кнопки. К ним у нас особое отношение, так как кнопки чаще всего используются на всех страницах сайта.
Для создания общего стиля добавим дополнительный класс button для ссылки «Смотреть каталог».
Добавим стили для кнопок.
Узнаем текстовые параметры из макета и перенесём их в стили. Интересный момент: селектор .button может использоваться как на кнопках <button>, так и на ссылках <a>. Поэтому нам нужно переопределить color, так как ссылка имеет свой встроенный цвет, и font-family, так как <button> имеет своё встроенное правило для шрифта.
Добавляем font-weight: 500;, потому что заголовки имеют браузерный font-weight: 700;, который нам нужно переопределить
Укажем расстояние между буквами с помощью параметра letter-spacing.
На всех кнопках используются прописные буквы, поэтому мы добавим свойство text-transform: uppercase;.
А ещё забежим немного вперёд и зададим внутренние отступы кнопки с помощью padding. Теперь наши кнопки почти как в макете!
Ссылка «Смотреть каталог» отличается от остальных чёрным цветом. Для её стилизации добавим уже имеющийся класс button. А также используем дополнительный модификатор button--dark для уточнения конкретной кнопки.
Стилизуем ссылку с классом button--dark: добавим цвет фона из макета.
Перейдём к навигации.
font-size в блоке равен 14px, поэтому надо указать его — он не наследуется от <body>.
По этой же логике укажем межстрочный интервал для ссылок в навигации line-height и цвет текста color.
Приступим к разделу «Промо». Во всём блоке используется шрифт "Playfair Display", поэтому сразу добавим его в стили.
Основной цвет текста в блоке — #1b1a17, его мы также добавим на этом шаге.
Укажем межстрочный интервал и размер шрифта для заголовка «Весна/Лето 2019» и подзаголовка «Коллекция».
По аналогии с заголовком стилизуем описание часов.
В описании часов используется шрифт "Roboto", нам нужно подключить его, так как всему блоку promo мы присвоили шрифт "Playfair Display".
И текст характеристики часов и их стоимости.
Переходим к разделу «Популярные модели».
Начнём со сложного — стилизация ссылки «Смотреть всё»:
- укажем насыщенность шрифта
font-weight, сделаем её средней; - с помощью
font-size и line-height опишем размер шрифта и межстрочный интервал; - добавим цвет текста;
- с помощью
border сделаем обводку для ссылки, как в макете.
Добавим фоновый цвет для элементов списка с товарами.
Во всех карточках товара из раздела «Популярные модели» используется шрифт "Playfair Display", serif;, поэтому в стилях класса card опишем шрифт.
Добавим стили для названия товара и его ценовых характеристик.
Ссылку «Подробнее» тоже стилизуем по аналогии.
К изображениям товаров применим фильтр, как в макете. Для этого скопируем свойства из раздела Фигмы «Inspect».
В блоке «Преимущества» добавим цвет фона и стилизуем тест.
В разделе «Новости» стилизуем текст блока.
Иии приступаем к нашему футеру.
Добавляем цвет фона всего блока.
Стилизуем все пункты футера. Напомним, что каждый пункт является ссылкой на другие страницы.
Финальный штрих — стилизация заголовков каждого из разделов футера.
Базовая стилизация нашего макета завершена!
