🔧 Справочник CSS свойств

Полный справочник всех CSS свойств с примерами и описанием

105

Свойств

Animation

animation: <name> <duration> <timing-function> <delay> <iteration-count> <direction> <fill-mode> <play-state>

Сокращённая запись для свойств animation-*.

animation-delay

animation-delay: <time>#

Указывает задержку перед началом анимации.

animation-direction

animation-direction: normal | reverse | alternate | alternate-reverse

Указывает, должна ли анимация воспроизводиться вперёд, назад или чередоваться.

animation-duration

animation-duration: <time>#

Указывает длительность анимации.

animation-fill-mode

animation-fill-mode: none | forwards | backwards | both

Устанавливает, как стили применяются до и после выполнения анимации.

animation-iteration-count

animation-iteration-count: infinite | <number>#

Указывает количество воспроизведений анимации.

animation-name: none | <keyframes-name>#

Указывает имя @keyframes правила.

animation-play-state

animation-play-state: running | paused

Указывает, запущена ли анимация или приостановлена.

animation-timing-function

animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>) | cubic-bezier()

Устанавливает функцию времени анимации.

transform: none | <transform-function>+

Применяет 2D или 3D трансформацию к элементу.

transition: <property> <duration> <timing-function> <delay>

Сокращённая запись для свойств transition-*.

transition-delay

transition-delay: <time>#

Указывает задержку перед началом перехода.

transition-duration

transition-duration: <time>#

Указывает длительность перехода.

transition-property

transition-property: none | all | <custom-ident>#

Указывает имя CSS-свойства, к которому применяется эффект перехода.

transition-timing-function

transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>) | cubic-bezier(<number>, <number>, <number>, <number>)

Устанавливает функцию времени перехода.

Flexbox

align-content: stretch | flex-start | flex-end | center | space-between | space-around | space-evenly

Определяет выравнивание строк flex-контейнера вдоль поперечной оси, если есть дополнительное пространство.

align-items: stretch | flex-start | flex-end | center | baseline | start | end | self-start | self-end

Определяет выравнивание flex-элементов вдоль поперечной оси контейнера.

align-self: auto | flex-start | flex-end | center | baseline | stretch

Переопределяет выравнивание конкретного flex-элемента вдоль поперечной оси.

column-gap: <length> | <percentage> | normal

Устанавливает отступы между колонками flex/grid-элементов.

flex: none | [ <flex-grow> <flex-shrink> || <flex-basis> ]

Сокращённая запись для flex-grow, flex-shrink и flex-basis.

flex-basis: content | <width>

Определяет начальный размер flex-элемента до распределения свободного пространства.

flex-direction: row | row-reverse | column | column-reverse

Определяет направление главной оси flex-контейнера. Устанавливает направление и ориентацию flex-элементов.

flex-flow: <flex-direction> || <flex-wrap>

Сокращённая запись для flex-direction и flex-wrap.

flex-grow: <number>

Определяет, насколько элемент может вырасти относительно других flex-элементов, если есть свободное пространство.

flex-shrink: <number>

Определяет, насколько элемент может сжиматься относительно других flex-элементов, если не хватает места.

flex-wrap: nowrap | wrap | wrap-reverse

Указывает, должны ли flex-элементы переноситься на новую строку, если они не помещаются в одну.

gap: <row-gap> <column-gap>

Устанавливает отступы между flex/grid-элементами.

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right

Определяет выравнивание flex-элементов вдоль главной оси контейнера.

order: <integer>

Управляет порядком flex-элементов внутри контейнера. Элементы с меньшим значением отображаются первыми.

row-gap: <length> | <percentage> | normal

Устанавливает отступы между строками flex/grid-элементов.

Grid

grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end> | <custom-ident>

Сокращённая запись для всех четырёх свойств grid-row/column или имя области.

grid-auto-columns

grid-auto-columns: <track-size>+

Определяет размер автоматически созданных колонок (треков).

grid-auto-flow: row | column | dense | row dense | column dense

Управляет тем, как автоматически размещаются элементы, для которых не указано явное положение.

grid-auto-rows: <track-size>+

Определяет размер автоматически созданных строк (треков).

grid-column: <grid-column-start> / <grid-column-end>

Сокращённая запись для grid-column-start и grid-column-end.

grid-column-end

grid-column-end: <line-number> | <line-name> | span <integer> | auto

Определяет, где заканчивается grid-элемент по колонке.

grid-column-start

grid-column-start: <line-number> | <line-name> | span <integer> | auto

Определяет, где начинается grid-элемент по колонке.

grid-row: <grid-row-start> / <grid-row-end>

Сокращённая запись для grid-row-start и grid-row-end.

grid-row-end: <line-number> | <line-name> | span <integer> | auto

Определяет, где заканчивается grid-элемент по строке.

grid-row-start: <line-number> | <line-name> | span <integer> | auto

Определяет, где начинается grid-элемент по строке.

grid-template: none | [ <grid-template-rows> / <grid-template-columns> ] | [ <line-names> <string> <track-size> <line-names> ]+ [ / <explicit-track-list> ]?

Сокращённая запись для grid-template-rows, grid-template-columns и grid-template-areas.

grid-template-areas

grid-template-areas: none | <string>+

Определяет именованные области grid-сетки.

grid-template-columns

grid-template-columns: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Определяет колонки grid-сетки с помощью списка значений, которые представляют собой размер трека.

grid-template-rows

grid-template-rows: none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

Определяет строки grid-сетки.

place-items: <align-items> <justify-items>

Сокращённая запись для align-items и justify-items.

Layout

aspect-ratio: auto | <ratio>

Устанавливает предпочтительное соотношение сторон элемента.

bottom: auto | <length> | <percentage>

Указывает расстояние от нижнего края позиционированного элемента.

box-sizing: content-box | border-box

Определяет, как вычисляется ширина и высота элемента: включают ли они padding и border.

clear: none | left | right | both | inline-start | inline-end

Указывает, с какой стороны элемента запрещено размещение плавающих элементов.

contain: none | strict | content | size | layout | style | paint

Позволяет указать, что элемент и его содержимое максимально независимы от остальной части дерева документа.

container-name: none | <custom-ident>

Задаёт имя для контейнера запросов.

container-type: normal | size | inline-size

Определяет тип контейнера для container queries.

display: block | inline | inline-block | flex | grid | none | contents

Определяет тип отображения элемента. Одно из важнейших свойств CSS, которое влияет на то, как элемент ведёт себя в потоке документа.

float: none | left | right | inline-start | inline-end

Указывает, должен ли элемент плавать влево, вправо или не плавать вообще. Исторически использовался для создания колонок.

left: auto | <length> | <percentage>

Указывает расстояние от левого края позиционированного элемента.

object-fit: fill | contain | cover | none | scale-down

Управляет тем, как содержимое замещаемого элемента (img, video) должно масштабироваться относительно его контейнера.

object-position

object-position: <position>

Управляет позицией содержимого замещаемого элемента внутри его контейнера.

overflow: visible | hidden | scroll | auto | clip

Указывает, что делать, если содержимое элемента выходит за его границы.

overflow-x: visible | hidden | scroll | auto | clip

Управляет переполнением по горизонтальной оси.

overflow-y: visible | hidden | scroll | auto | clip

Управляет переполнением по вертикальной оси.

position: static | relative | absolute | fixed | sticky

Определяет метод позиционирования элемента. Используется вместе со свойствами top, right, bottom, left.

right: auto | <length> | <percentage>

Указывает расстояние от правого края позиционированного элемента.

top: auto | <length> | <percentage>

Указывает расстояние от верхнего края позиционированного элемента до вершины содержащего блока.

visibility: visible | hidden | collapse

Показывает или скрывает элемент без изменения макета страницы.

z-index: auto | <integer>

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

Typography

direction: ltr | rtl

Устанавливает направление текста и блоков.

font-family: <family-name> | <generic-family>

Указывает семейство шрифтов для текста элемента.

font-size: <absolute-size> | <relative-size> | <length> | <percentage>

Устанавливает размер шрифта текста.

font-style: normal | italic | oblique <angle>?

Устанавливает начертание шрифта: обычное, курсивное или наклонное.

font-weight: normal | bold | bolder | lighter | <number>

Устанавливает насыщенность (жирность) шрифта.

hyphens: none | manual | auto

Указывает, как слова должны переноситься с помощью дефисов.

letter-spacing: normal | <length>

Устанавливает расстояние между символами текста.

line-height: normal | <number> | <length> | <percentage>

Устанавливает высоту строки (межстрочный интервал).

overflow-wrap: normal | break-word | anywhere

Указывает, может ли браузер разрывать слова внутри строки, чтобы предотвратить переполнение.

text-align: left | right | center | justify | start | end | match-parent

Устанавливает горизонтальное выравнивание текста.

text-decoration

text-decoration: none | underline | overline | line-through | blink

Устанавливает декоративные эффекты для текста.

text-indent: <length> | <percentage> | hanging | each-line

Устанавливает отступ первой строки блока текста.

text-orientation

text-orientation: mixed | upright | sideways

Устанавливает ориентацию символов в вертикальной строке.

text-shadow: none | <shadow>#

Добавляет тени к тексту.

text-transform: none | capitalize | uppercase | lowercase | full-width

Управляет регистром текста.

unicode-bidi: normal | embed | isolate | bidi-override | isolate-override | plaintext

Управляет алгоритмом двунаправленного текста Unicode.

white-space: normal | pre | nowrap | pre-wrap | pre-line | break-spaces

Управляет тем, как обрабатываются пробелы и переносы строк внутри элемента.

word-break: normal | break-all | keep-all | break-word

Управляет переносом слов на новую строку.

word-spacing: normal | <length>

Устанавливает расстояние между словами текста.

writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr

Устанавливает направление строки текста.

Visual

backdrop-filter

backdrop-filter: none | <filter-function-list>

Применяет графические эффекты к области за элементом.

background: <bg-layer> [, <bg-layer>]*

Сокращённая запись для всех свойств background-*.

background-color

background-color: <color>

Устанавливает цвет фона элемента.

background-image

background-image: none | <image> [, <image>]*

Устанавливает одно или несколько фоновых изображений.

background-position

background-position: <position> [, <position>]*

Устанавливает начальную позицию каждого фонового изображения.

background-repeat

background-repeat: repeat-x | repeat-y | repeat | no-repeat | space | round

Устанавливает, как фоновое изображение повторяется.

background-size

background-size: <size> [, <size>]*

Устанавливает размер фонового изображения.

border: <line-width> || <line-style> || <color>

Сокращённая запись для border-width, border-style и border-color.

border-radius: <length-percentage>{1,4} [ / <length-percentage>{1,4} ]?

Устанавливает скругление углов элемента.

box-shadow: none | <shadow>#

Добавляет тени к элементу.

clip-path: none | <clip-source> | [ <basic-shape> || <geometry-box> ]

Создаёт область отсечения, которая показывает только часть элемента.

Устанавливает цвет текста элемента.

cursor: auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | url()

Устанавливает тип курсора мыши при наведении на элемент.

filter: none | <filter-function-list>

Применяет графические эффекты к элементу.

mask-image: none | <image> [, <image>]*

Устанавливает изображение маски для элемента.

mix-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity

Устанавливает, как содержимое элемента должно смешиваться с фоном.

opacity: <alpha-value>

Устанавливает прозрачность элемента.

outline: <outline-width> || <outline-style> || <color>

Устанавливает линию вокруг элемента (вне границы).

pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all

Указывает, в каких ситуациях элемент может стать целью события мыши.

user-select: auto | text | none | contain | all

Управляет тем, может ли пользователь выделять текст.