Список задач в курсе CSS3: Основы

Исправь специфичность и единицы измерения

Проблема:Кнопка не становится красной при наведении. Текст в блоке обрезается, а отступы не масштабируются при изменении размера шрифта.Причина:Селектор по тегу <code>button</code> имеет меньшую <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Specificity" target="_tblank" rel="noopener noreferer">специфичность</a>, чем класс, но в коде стили применяются в обратном порядке. Также используются фиксированные пиксели вместо относительных единиц, и отсутствует свойство <code>overflow-wrap</code> для длинного текста.Ожидаемое поведение:При наведении кнопка должна менять фон на красный. Текст должен переноситься на новую строку. Отступы должны использовать единицы <code>rem</code> для масштабируемости. Для корректного сравнения через pixelmatch: используйте фиксированный viewport 800×600, системные шрифты и избегайте :hover.

Исправь Flexbox-расположение карточек

Проблема:Карточки товаров отображаются в один столбец, хотя должны быть в строку (3 карточки на десктопе). При уменьшении окна они не становятся колонкой на мобильных.Причина:Отсутствует свойство <code>flex-wrap</code>, нет ширины у карточек, и не заданы <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Media_Queries" target="_tblank" rel="noopener noreferer">медиа-запросы</a> для адаптивности.Ожидаемое поведение:На экранах ≥768px — 3 карточки в строку. На мобильных — одна колонка. Все карточки в строке имеют одинаковую высоту. Для pixelmatch: фиксированный layout, шрифты Arial, viewport 800×600.

Исправь таблицу стилей

Проблема:Таблица отображается без границ, ячейки сливаются. Шрифт не системный, размеры не фиксированы.Причина:Отсутствуют стили для таблицы, используется несистемный шрифт, нет фиксированной ширины.Ожидаемое поведение:Таблица имеет чёткие границы, фиксированную ширину 600px, шрифт Arial. Для pixelmatch: viewport 800×600, отключён scrollbar, все размеры в px или rem.