СПРАВОЧНИК
CSS-свойства
Справочник свойств CSS
Справочник основных свойств CSS с кратким назначением, основными значениями и примером кода для каждого. Свойства сгруппированы по темам: блочная модель, позиционирование, Flexbox, Grid, текст и шрифты, цвет и фон, границы и тени, трансформации и анимации, прочее.
Блочная модель 12
box-sizing
box-sizing: content-box | border-boxОпределяет, входят ли padding и border в width/height.display
display: block | inline | inline-block | flex | grid | noneОпределяет тип отображения элемента и схему его внутренней раскладки.height
height: auto | <length> | <percentage>Задаёт высоту области содержимого элемента.margin
margin: <top> <right> <bottom> <left>Внешние отступы элемента (за пределами рамки).max-height
max-height: none | <length> | <percentage>Максимальная высота элемента.max-width
max-width: none | <length> | <percentage>Максимальная ширина — элемент не станет шире этого значения.min-height
min-height: <length> | <percentage>Минимальная высота элемента.min-width
min-width: <length> | <percentage>Минимальная ширина — элемент не станет уже этого значения.overflow
overflow: visible | hidden | scroll | autoПоведение содержимого, выходящего за границы блока.padding
padding: <top> <right> <bottom> <left>Внутренние отступы между содержимым и рамкой.visibility
visibility: visible | hidden | collapseСкрывает элемент, сохраняя занимаемое им место.width
width: auto | <length> | <percentage>Задаёт ширину области содержимого элемента.Границы и тени 7
border
border: <width> <style> <color>Сокращение для рамки: толщина, стиль и цвет.border-color
border-color: <color> [<color> ...]Цвет рамки (для всех или отдельных сторон).border-radius
border-radius: <length> | <percentage>Скругление углов элемента.border-style
border-style: none | solid | dashed | dotted | doubleСтиль линии рамки.border-width
border-width: <length> | thin | medium | thickТолщина рамки.box-shadow
box-shadow: <x> <y> <blur> <spread> <color>Тень вокруг блока (внешняя или внутренняя).outline
outline: <width> <style> <color>Контур поверх элемента, не влияющий на раскладку.Позиционирование 8
bottom
bottom: auto | <length> | <percentage>Смещение позиционированного элемента от нижнего края.clear
clear: none | left | right | bothЗапрещает обтекание плавающих элементов с указанных сторон.float
float: none | left | rightПрижимает элемент к краю, обтекая его текстом.left
left: auto | <length> | <percentage>Смещение позиционированного элемента от левого края.position
position: static | relative | absolute | fixed | stickyЗадаёт способ позиционирования элемента в потоке.right
right: auto | <length> | <percentage>Смещение позиционированного элемента от правого края.top
top: auto | <length> | <percentage>Смещение позиционированного элемента от верхнего края.z-index
z-index: auto | <integer>Порядок наложения позиционированных элементов по оси Z.Прочее 7
aspect-ratio
aspect-ratio: <width> / <height>Фиксированное соотношение сторон элемента.content
content: <string> | url() | counter() | noneГенерируемое содержимое для ::before и ::after.cursor
cursor: auto | pointer | default | text | not-allowed | grabВид указателя мыши над элементом.list-style
list-style: <type> <position> <image>Оформление маркеров списка.object-fit
object-fit: fill | contain | cover | none | scale-downКак изображение/видео вписывается в свой блок.pointer-events
pointer-events: auto | noneРеагирует ли элемент на события мыши.user-select
user-select: auto | none | text | allМожно ли выделять текст элемента мышью.Текст и шрифты 13
font
font: <style> <weight> <size>/<line-height> <family>Сокращение для всех свойств шрифта сразу.font-family
font-family: <family> [, <fallback>]Семейство шрифтов с резервными вариантами.font-size
font-size: <length> | <percentage> | <keyword>Размер шрифта.font-style
font-style: normal | italic | obliqueНачертание: обычное или курсивное.font-weight
font-weight: normal | bold | 100..900Насыщенность (жирность) шрифта.letter-spacing
letter-spacing: normal | <length>Межбуквенный интервал (трекинг).line-height
line-height: normal | <number> | <length>Высота строки (межстрочный интервал).text-align
text-align: left | right | center | justifyГоризонтальное выравнивание текста.text-decoration
text-decoration: none | underline | line-through ...Линии оформления текста: подчёркивание, зачёркивание.text-overflow
text-overflow: clip | ellipsisКак показывать обрезанный текст: обрезка или многоточие.text-transform
text-transform: none | uppercase | lowercase | capitalizeПреобразование регистра текста.white-space
white-space: normal | nowrap | pre | pre-wrap | pre-lineОбработка пробелов и переносов строк.word-break
word-break: normal | break-all | keep-allПравила переноса внутри слов.Трансформации и анимации 6
animation
animation: <name> <duration> <timing> <delay> <count> <direction>Запуск ключевой анимации @keyframes.backdrop-filter
backdrop-filter: blur() | brightness() ...Фильтр к области ПОД элементом (эффект матового стекла).filter
filter: blur() | brightness() | contrast() | grayscale() ...Графические фильтры к элементу.@keyframes
@keyframes <name> { from {} to {} }Правило, описывающее кадры анимации.transform
transform: translate() | scale() | rotate() | skew()Геометрические преобразования элемента.transition
transition: <property> <duration> <timing> <delay>Плавный переход значений свойств при изменении.Цвет и фон 8
background
background: <color> <image> <position>/<size> <repeat>Сокращение для всех свойств фона.background-color
background-color: <color>Сплошной цвет фона элемента.background-image
background-image: none | url() | <gradient>Фоновое изображение или градиент.background-position
background-position: <x> <y>Положение фонового изображения внутри блока.background-repeat
background-repeat: repeat | no-repeat | repeat-x | repeat-yПовтор фонового изображения.background-size
background-size: auto | cover | contain | <length>Размер фонового изображения.color
color: <color>Цвет текста и текущий цвет элемента.opacity
opacity: <number 0..1>Прозрачность элемента целиком.Flexbox 12
align-content
align-content: flex-start | center | space-between | stretchВыравнивание строк во многострочном флекс-контейнере.align-items
align-items: stretch | flex-start | center | flex-end | baselineВыравнивание элементов поперёк главной оси.align-self
align-self: auto | flex-start | center | flex-end | stretchПереопределяет align-items для одного элемента.flex
flex: <grow> <shrink> <basis>Сокращение для flex-grow, flex-shrink и flex-basis.flex-basis
flex-basis: auto | <length> | <percentage>Начальный размер элемента до распределения места.flex-direction
flex-direction: row | row-reverse | column | column-reverseНаправление главной оси флекс-контейнера.flex-grow
flex-grow: <number>Коэффициент роста — как делить свободное место.flex-shrink
flex-shrink: <number>Коэффициент сжатия при нехватке места.flex-wrap
flex-wrap: nowrap | wrap | wrap-reverseРазрешает перенос флекс-элементов на новые строки.gap
gap: <row-gap> <column-gap>Промежутки между элементами flex- и grid-контейнера.justify-content
justify-content: flex-start | center | space-between | space-around | space-evenlyВыравнивание элементов вдоль главной оси.order
order: <integer>Изменяет визуальный порядок флекс/грид-элементов.Grid 9
grid
grid: <grid-template> | <auto-flow> ...Сокращение для задания шаблона грида и авто-потока.grid-area
grid-area: <name> | <row-start>/<col-start>/<row-end>/<col-end>Привязка элемента к именованной области или линиям.grid-column
grid-column: <start> / <end>Размещение элемента по колонкам грида.grid-row
grid-row: <start> / <end>Размещение элемента по строкам грида.grid-template-areas
grid-template-areas: "a a" "b c"Именованные области для наглядной раскладки грида.grid-template-columns
grid-template-columns: <track-list>Определяет колонки грида и их размеры.grid-template-rows
grid-template-rows: <track-list>Определяет строки грида и их размеры.place-content
place-content: <align-content> <justify-content>Сокращение выравнивания всей сетки внутри контейнера.place-items
place-items: <align-items> <justify-items>Сокращение выравнивания элементов в ячейках грида.