CSS: каскады и оформление
4 минутыHover-эффекты для кнопок в CSS: состояния без вреда для доступности
Как оформить :hover, :focus-visible и :active у кнопки, добавить плавный переход и учесть сенсорные устройства и reduced motion.
Рубрика / 9 материалов
CSS: каскады и оформление
Каскад, сетки и адаптивность.
Последние публикации
Материалы рубрики
Все публикации направления «CSS: каскады и оформление» — новые материалы идут первыми.
CSS: каскады и оформление
4 минутыЧто такое CSS и с чего начать его изучение
Первые шаги в CSS: подключение файла, синтаксис правила, селекторы, каскад, box model, раскладка и учебный маршрут.
CSS: каскады и оформление
4 минутыФон текстового блока в CSS: цвет, градиент, изображение и читаемость
Как оформить фон карточки или текстового блока, сохранить контраст, отступы и устойчивость при длинном содержимом.
CSS: каскады и оформление
4 минутыСтилизация текста в CSS: шрифт, размер, интерлиньяж и читаемость
Практическое руководство по типографике CSS: семейство, размер, насыщенность, высота строки, длина строки и адаптивный текст.
CSS: каскады и оформление
4 минутыКаскад и приоритеты CSS: как браузер выбирает итоговый стиль
Пошагово разбираем каскад, происхождение правил, cascade layers, специфичность, порядок и наследование без злоупотребления !important.
CSS: каскады и оформление
4 минутыКак скрыть элемент с помощью CSS и не сломать доступность
Сравниваем display, visibility, opacity, hidden и visually-hidden, а также влияние каждого способа на раскладку, фокус и скринридер.
CSS: каскады и оформление
5 минутИзображения в HTML и CSS: адаптивный размер, object-fit и фон
Как выбрать между img и background-image, сделать изображение адаптивным, управлять обрезкой и предотвратить сдвиги макета.
CSS: каскады и оформление
4 минутыЕдиницы измерения CSS: px, rem, em, %, vw и другие
Как выбирать абсолютные и относительные единицы CSS для текста, отступов, контейнеров, viewport и адаптивной сетки.
CSS: каскады и оформление
4 минутыАдаптивная вёрстка на CSS: чем она отличается от фиксированного макета
Принципы адаптивной вёрстки: mobile first, гибкие контейнеры, Grid, Flexbox, медиазапросы, изображения и тестирование.