arrow-left
Вернуться к продуктам
Кратко о видео
В уроке показана стилизация Rich Text через CSS-виджет: как дать классу Rich Text стиль и применить его через CSS-виджет, настройка параграфов (отступы, шрифт), заголовков (H1-H6 внутри Rich Text), ссылок (цвет, подчёркивание), картинок и цитат blockquote. Rich Text — единственный виджет в Taptop, где нельзя выбрать вложенные элементы напрямую. Поэтому стилизуется через CSS: класс Rich Text + CSS-селектор для каждого тега внутри. Это немного сложнее, чем стилизация обычного текста, но даёт полный контроль. Урок пригодится при работе с блогами и статьями в CMS, где контент создаётся в Rich Text редакторе. Базовое понимание CSS-селекторов (p, h2, a, blockquote) нужно — урок объясняет принцип, но не основы CSS.

Как стилизовать Rich text в Taptop

В статье коллекции нужен форматированный текст — заголовки, картинки, цитаты. Rich text добавлен, но стандартные настройки не дают нужный вид. Как изменить стили внутри Rich text?
Rich text стилизуется только через CSS: добавляешь класс, задаёшь CSS-селекторы для h2, p, blockquote и других тегов внутри. Принцип: класс + селектор = стили для конкретного тега в Rich text. Для всех, кто делает блог через коллекции. После просмотра стилизуешь Rich text под любой дизайн.
Тайминги видео
00:00 — Что такое Rich text и почему стандартных настроек мало 02:00 — Добавление CSS-виджета, класс richtext 04:00 — Селекторы по элементам: p, h3, ul, a, img 06:30 — Ключевые свойства: font-size, margin, color, border-radius 09:00 — Практика: стилизация параграфа и заголовка H3 12:00 — Стилизация картинок и цитат 14:00 — Медиазапросы для планшетов и мобильных

Другие продукты академии

Как выйти на фриланс
Разберётесь, как брать первые проекты, называть цену и общаться с клиентами
Для кого
Специалистов
Направление
Фриланс
Формат
Мини-курс
Длительность
13 уроков
Taptop с нуля: сайт-портфолио
Осваиваете базу Taptop и собираете сайт-портфолио, который можно оставить себе
Для кого
Новичков
Направление
Вёрстка
Формат
Мини-курс
Длительность
9 уроков
Как дизайнеру понять вёрстку
Разберётесь, как устроены сайты, чтобы увереннее работать с ними дальше
Для кого
Новичков
Направление
Вёрстка
Формат
Интенсив
Длительность
2 урока
Как собрать сложную анимацию
Собираете сложную анимацию и плавный переход между страницами
Для кого
Для тех, кто в теме
Направление
Анимации
Формат
Интенсив
Длительность
2 урока