Справочник CSS
Оформление, размеры и раскладка: понятные объяснения свойств CSS, примеры, частые ошибки и упражнения.
Свойство aspect-ratio: пропорции блока
Как сохранить пропорции карточки или области медиа без ручного расчёта высоты.
Свойство transform: визуальные преобразования
Как сдвигать, масштабировать и поворачивать элемент без перестройки обычного потока.
Свойство opacity: прозрачность группы
Чем прозрачность всего элемента отличается от полупрозрачного фонового цвета.
Свойство text-overflow: многоточие
Как показать многоточие у однострочного текста и когда лучше разрешить перенос.
Свойство white-space: пробелы и переносы
Как разрешать перенос, сохранять форматирование и избегать неожиданного переполнения.
Свойство overflow-wrap: длинные слова
Как не дать длинной ссылке или идентификатору растянуть контейнер.
Свойство min-height: минимальная высота
Как задать нижнюю границу размера и сохранить возможность роста блока с текстом.
Свойство flex-wrap: перенос элементов
Как разрешить кнопкам и меткам переходить на следующую строку.
Свойство grid-template-columns: схема сетки
Как сочетать фиксированную боковую область и гибкий контент или создавать равные колонки.
Container queries: адаптивность компонента
Как менять карточку по ширине её контейнера, а не всего окна браузера.
font-weight: насыщенность шрифта
font-weight управляет насыщенностью начертания и позволяет отделять основной текст от визуальных акцентов.
font-style: курсив и наклонное начертание
font-style выбирает обычное, курсивное или наклонное начертание текста без изменения его HTML-смысла.
text-align: выравнивание текста в блоке
text-align задаёт горизонтальное выравнивание строчного содержимого внутри блока, например текста абзаца.
text-decoration: подчёркивание и оформление линий
text-decoration задаёт декоративные линии у текста, включая подчёркивание ссылок и зачёркивание.
text-transform: визуальное преобразование регистра
text-transform меняет визуальный регистр текста, не требуя переписывать исходное содержимое документа.
letter-spacing: расстояние между знаками
letter-spacing регулирует дополнительное расстояние между знаками и помогает оформить короткие метки или заголовки.
word-spacing: интервал между словами
word-spacing изменяет дополнительное расстояние между словами и применяется независимо от расстояния между отдельными буквами.
text-indent: отступ первой строки
text-indent задаёт отступ первой строки текстового блока и позволяет оформить абзац без лишних пробелов в HTML.
vertical-align: выравнивание строчных элементов
vertical-align управляет вертикальным выравниванием строчного элемента или ячейки таблицы относительно соответствующего контекста.
list-style: маркеры списков
list-style настраивает тип, изображение и положение маркеров у элементов списка.
outline: контур без изменения размеров
outline рисует контур вокруг элемента без участия в расчёте его размеров и часто используется для обозначения клавиатурного фокуса.
cursor: форма указателя
cursor задаёт вид указателя мыши над элементом и помогает подсказать характер взаимодействия.
visibility: скрытие с сохранением места
visibility:hidden скрывает отображение элемента, обычно сохраняя занимаемое им место в раскладке.
pointer-events: участие в выборе цели указателя
pointer-events:none исключает элемент из обычного выбора цели событий указателя, что полезно для декоративных перекрывающих слоёв.
resize: ручное изменение размера поля
resize определяет, может ли пользователь изменять размеры элемента с помощью предоставляемого браузером механизма.
min-width: минимальная ширина и сжатие элемента
min-width задаёт нижнюю границу ширины и помогает объяснить, почему элемент иногда не сжимается внутри гибкой раскладки.
height: высота блока и проценты
height задаёт высоту элемента, но фиксированное значение нужно согласовывать с объёмом содержимого и способом расчёта коробки.
max-height: ограничение высоты прокручиваемого блока
max-height устанавливает верхнюю границу высоты, сохраняя возможность меньшего размера при коротком содержимом.
flex-direction: направление главной оси Flexbox
flex-direction выбирает направление главной оси flex-контейнера: строку или колонку, при необходимости с обратным визуальным порядком.
flex-grow: распределение свободного места
flex-grow задаёт коэффициент, по которому flex-элемент получает долю положительного свободного места.