Студент 777 потока

Николай Алексеев

@alexeevweb

alexeev@pixelperfect.fun

Модуль: Стилизация элементов

Работа с классами в Webflow

Продолжительность: 40 минут

Знания и умения: 

  • поработаем с тэгами, классами, комбоклассами и псевдоклассами

  • узнаем как правильно называть классы

  • научимся составлять корректную структуру сайта в Webflow

1

Что такое класс

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

Это дочерний элемент
This is some text inside of a div block.

2

Классы для тэгов

Тэг в HTML

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

Body (all pages)
All links
All paragraphs
All H1 Headings
All H2 Headings
All H3 Headings
All H4 Headings
All H5 Headings
All H6 Headings
All ordered lists
All unordered lists
All lists items
All images

Heading

<p>Какой текст</p>

  • Пункт 1

  • Пункт 2

  • Пункт 3

Text Link

3

Классы и комбоклассы

Класс в HTML и CSS

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

Комбо-классы

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

wrapper
background-color-black
wrapper
background-color-red

4

Псевдоклассы состояния

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

Hover

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

Pressed

Состояние элемента при нажатии (псевдокласс :active). Отображает элемент, когда пользователь удерживает на нём клик.

Focused

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

Focused (keyboard)

Состояние элемента при фокусе, полученном через клавиатуру (например, при использовании клавиши Tab). Помогает улучшить доступность и навигацию с клавиатуры.

Currrent

(псевдокласс :current) используется для стилизации элементов, которые представляют текущий активный элемент в каком-либо контексте. Например, ссылка в блоке слева будет его иметь, тк ссылается на конкретно этот блок. 

Checked

(псевдокласс :checked) используется для стилизации элементов формы - чекбокас или радио-кнопка в активном состоянии.

Наведи на меняСсылка на этот блок
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

5

Как называть классы

Global

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

Custom class

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

Utility class

применяется для глобальных CSS-свойств, часто используемых во всём проекте. Например: background-color-gray

section_hero
padding-global
container-small
hero_content
hero_item
hero_item-heading
hero_item-image
hero_item
hero_item-heading
hero_item-image

6

Базовая структура при разработке сайтов в Webflow

page-wrapper

Внешний родительский элемент для всех элементов на странице. Этот Div Block оборачивает все элементы на странице

main-wrapper

Основное содержимое страницы. Используйте HTML-тег <main>, который оборачивает все или большую часть секций контента сайта. Важно: Навигация (nav) и футер (footer) не должны находиться внутри этого <main> тега.

Global Styles // Компонент

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

Navbar // Компонент

навигационное меню

section_[идентификатор]

Основное назначение класса section – улучшить рабочий процесс в редакторе Webflow Designer. Этот элемент упорядочивает навигацию в панели Navigator и помогает быстро перемещаться по рабочему холсту. Рекомендация: Устанавливайте для этого элемента HTML-тег <section> в панели настроек.

padding-global

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

padding-section-[размер]

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

container-[размер]

Унифицированная глобальная система контейнеров для контента на странице. Весь или почти весь контент страницы может находиться внутри класса container-.

Footer // Компонент

подвал сайта

7

Домашнее задание

Дома тебе предстоит собрать структуру сайта по заданию от Пикселя:

Привет! Мне необходимо построить структуру моего нового сайта, я думаю, что у тебя уже достаточно знаний и умений чтобы это сделать. Итак, ниже будет ссылка на Figma, там будет мини-макет из трех секций. Твоя задача - сделать структуру сайта в Навигаторе и только, переносить контент, создвать компоненты и настраивать свойства не нужно. Удачи!

Ссылка на Figma: https://clck.ru/3FBzVb