CSS-свойства и их описания

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

Текст и шрифты

color Устанавливает цвет текста. Можно использовать названия цветов, HEX, RGB или HSL значения.

font-family Определяет семейство шрифтов для текста. Можно указать несколько шрифтов через запятую.

font-size Устанавливает размер шрифта. Можно использовать пиксели (px), em, rem или проценты.

font-weight Определяет толщину шрифта. Можно использовать ключевые слова (normal, bold) или числовые значения (100-900).

text-align Устанавливает горизонтальное выравнивание текста. Возможные значения: left, right, center, justify.

Размеры и отступы

width Устанавливает ширину элемента. Можно использовать пиксели, проценты или auto.

height Устанавливает высоту элемента. Можно использовать пиксели, проценты или auto.

margin Устанавливает внешние отступы элемента. Можно задать отступы для всех сторон или по отдельности.

padding Устанавливает внутренние отступы элемента. Можно задать отступы для всех сторон или по отдельности.

Фон и границы

background-color Устанавливает цвет фона элемента. Можно использовать названия цветов, HEX, RGB или HSL значения.

background-image Устанавливает фоновое изображение для элемента. Используется с url() для указания пути к изображению.

border Устанавливает границу элемента. Можно задать ширину, стиль и цвет границы.

border-radius Устанавливает скругление углов элемента. Можно задать разные значения для каждого угла.

Позиционирование

position Определяет тип позиционирования элемента. Возможные значения: static, relative, absolute, fixed, sticky.

display Определяет, как элемент должен быть отображен. Основные значения: block, inline, inline-block, flex, grid, none.

float Определяет, по какой стороне должен быть выравнен элемент. Возможные значения: left, right, none.

Flexbox

flex-direction Устанавливает направление основной оси во flex-контейнере. Возможные значения: row, row-reverse, column, column-reverse.

justify-content Определяет выравнивание flex-элементов вдоль главной оси. Основные значения: flex-start, flex-end, center, space-between, space-around.

align-items Определяет выравнивание flex-элементов вдоль поперечной оси. Основные значения: flex-start, flex-end, center, stretch, baseline.

Grid

grid-template-columns Определяет количество и размеры колонок в grid-контейнере.

grid-template-rows Определяет количество и размеры строк в grid-контейнере.

grid-gap Устанавливает расстояние между ячейками grid-контейнера.

Анимации и переходы

transition Определяет эффект перехода между двумя состояниями элемента.

animation Применяет анимацию к элементу. Используется вместе с @keyframes для определения анимации.

Другие важные свойства

opacity Устанавливает прозрачность элемента. Значения от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

box-shadow Добавляет тень к элементу. Можно настроить смещение, размытие, распространение и цвет тени.

z-index Определяет порядок наложения элементов. Элементы с большим значением z-index отображаются поверх элементов с меньшим значением.