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

Справочник помогает подобрать CSS-свойство по задаче: размеры, текст, раскладка, оформление или поведение элемента. Здесь представлены свойства для оформления веб-страниц и исторические возможности. Специализированные свойства SVG и MathML, вендорные расширения и полный набор ранних проектов сюда не входят.

Селекторы · Функции · Правила · Глобальные значения

Названия со ссылками ведут к отдельным статьям; остальные возможности кратко описаны здесь. Поддержка отдельных значений и расширенного синтаксиса может отличаться.

Цвет

Свойства: названия и назначение
Свойство Описание
color Задает цвет текста.
opacity Определяет уровень прозрачности для элемента.

Фон и границы

Свойства: названия и назначение
Свойство Описание
background Позволяет установить все свойства фона в одном объявлении (универсальное свойство).
background-attachment Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы).
background-blend-mode Определяет режим смешивания слоя каждого фонового цвета ( и / или изображения).
background-color Определяет цвет фона элемента.
background-image Задает одно или несколько фоновых изображений для элемента.
background-position Задает положение (позицию) фонового изображения.
background-repeat Устанавливает, как будет повторяться фоновое изображение.
background-clip Определяет область элемента для которой будет задан задний фон.
background-origin Определяет как позиционируется фоновое изображение/-я относительно элемента.
background-size Определяет размер фонового изображения/-ий.
border Позволяет установить все свойства границ в одном объявлении.
border-bottom Устанавливает все свойства нижней границы в одном объявлении.
border-bottom-color Устанавливает цвет нижней границы.
border-bottom-left-radius Определяет форму границы нижнего левого угла.
border-bottom-right-radius Определяет форму границы нижнего правого угла.
border-bottom-style Устанавливает стиль нижней границы.
border-bottom-width Устанавливает ширину нижней границы.
border-color Устанавливает цвет для всех границ в одном объявлении.
border-image Позволяет указать изображение, которое будет использовано вместо границы вокруг элемента. Свойство является универсальным и позоляет установить значения для всех border-image-* свойств в одном объявлении.
border-image-outset Определяет величину, на которую область границы изображения выходит за пределы блока границы.
border-image-repeat Определяет, должна ли граница изображения быть повторена, масштабируема или растянута.
border-image-slice Определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-source.
border-image-source Указывает путь к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения.
border-image-width Задает ширину границы-изображения путем определения смещения (внутрь элемента от края границы).
border-left Устанавливает все свойства левой границы в одном объявлении.
border-left-color Устанавливает цвет левой границы.
border-left-style Устанавливает стиль левой границы.
border-left-width Устанавливает ширину левой границы.
border-radius Позволяет определить форму границ элемента. Это свойство является короткой записью для свойств border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius и border-top-right-radius .
border-right Устанавливает все свойства правой границы в одном объявлении.
border-right-color Устанавливает цвет правой границы.
border-right-style Устанавливает стиль правой границы.
border-right-width Устанавливает ширину правой границы.
border-style Устанавливает стиль для всех границ в одном объявлении.
border-top Устанавливает все свойства верхней границы в одном объявлении.
border-top-color Устанавливает цвет верхней границы.
border-top-left-radius Определяет форму границы в верхнем левом углу.
border-top-right-radius Определяет форму границы в верхнем правом углу.
border-top-style Устанавливает стиль верхней границы.
border-top-width Устанавливает ширину верхней границы.
border-width Устанавливает ширину для всех границ в одном объявлении.
box-decoration-break Устанавливает поведение фона и границы элемента на разрыве страницы, или для inline элементов при разрыве строки.
box-shadow Добавляет одну или несколько теней к элементу.

Основные свойства

Свойства: названия и назначение
Свойство Описание
bottom Определяет смещение позиционированного элемента относительно нижнего края.
clear Определяет с какой стороны текущего элемента не допускаются плавающие элементы (у которых свойство float имеет значение left или right).
clip Устарело Определяет размеры абсолютно позиционированного элемента, в пределах которого содержимое будет видимым (остальное обрезается).
display Определяет, как должен отображаться определенный элемент HTML.
float Определяет будет ли элемент плавающим.
height Устанавливает высоту области содержимого элемента.
left Указывает направление смещения позиционированного элемента от левого края.
margin Устанавливает величину отступа от каждого края элемента в одном объявлении.
margin-bottom Устанавливает величину отступа от нижнего края элемента.
margin-left Устанавливает величину отступа от левого края элемента.
margin-right Устанавливает величину отступа от правого края элемента.
margin-top Устанавливает величину отступа от верхнего края элемента.
max-height Устанавливает максимальную высоту элемента.
max-width Устанавливает максимальную ширину элемента.
min-height Устанавливает минимальную высоту элемента.
min-width Устанавливает минимальную ширину элемента.
overflow Указывает, что произойдёт, если содержимое переполняет размеры элемента.
overflow-x Указывает, что произойдёт, если содержимое переполняет левый, либо правый край элемента.
overflow-y Указывает, что произойдёт, если содержимое переполняет верхний, либо нижний край элемента.
padding Устанавливает величину внутренних отступов элемента в одном объявлении.
padding-bottom Устанавливает нижний внутренний отступ элемента.
padding-left Устанавливает левый внутренний отступ элемента.
padding-right Устанавливает правый внутренний отступ элемента.
padding-top Устанавливает верхний внутренний отступ элемента.
position Указывает какой тип позиционирования используется для элемента (статический, относительный, абсолютный или фиксированный).
right Указывает направление смещения позиционированного элемента от правого края.
top Указывает направление смещения позиционированного элемента от верхнего края.
visibility Определяет, является ли элемент видимым.
width Устанавливает ширину области содержимого элемента.
vertical-align Определяет вертикальное позиционирование встроенных строчных (inline) элементов или ячеек таблицы (table-cell).
z-index Определяет порядок расположения позиционированных элементов по оси Z (порядок наложения элементов друг на друга).

Flexbox

Свойства для работы с flex-контейнером

Свойства: названия и назначение
Свойство Описание
align-content Распределяет свободное место по поперечной оси многострочного Flexbox, блочной оси Grid или выравнивает содержимое поддерживаемого блочного контейнера. Направление оси зависит от раскладки и writing-mode.
align-items Задаёт выравнивание элементов по поперечной оси Flexbox или блочной оси Grid; используется как исходное значение align-self.
flex-direction Указывает направление, в соответствии с которым располагаются флекс элементы внутри контейнера.
flex-flow Свойство позволяет в одном объявлении указать значения свойств flex-direction (направление, в соответствии с которым располагаются флекс элементы внутри контейнера) и flex-wrap (определяет, будет ли флекс контейнер однострочным или многострочным).
flex-wrap Определяет, будет ли флекс контейнер однострочным или многострочным. Если в контейнере разрешена многострочность, то это свойство также позволяет контролировать направление, в котором размещаются флекс элементы.
justify-content Распределяет пространство по главной оси Flexbox или строчной оси Grid. Главная ось определяется flex-direction.
place-content Сокращённая запись align-content и justify-content; действие каждой части зависит от раскладки.

Свойства для работы с flex-элементом

Свойства: названия и назначение
Свойство Описание
align-self Переопределяет выравнивание отдельного элемента по поперечной оси Flexbox или блочной оси Grid.
flex Это свойство является короткой записью для свойств, которые позволяют определить размер для флекс элемента, установленный по умолчанию, указать на сколько элемент может увеличиться, либо уменьшится по отношению к остальным флекс элементам в одном контейнере.
flex-basis Определяет размер для флекс элемента, установленный по умолчанию перед распределением пространства в контейнере.
flex-grow Указывает на сколько элемент может увеличиться по отношению к остальным флекс элементам в одном контейнере.
flex-shrink Определяет, как элемент будет сжиматься относительно остальных флекс элементов в контейнере (при недостатке свободного пространства).
order Устанавливает порядок следования флекс элемента в контейнере относительно остальных.

Grid

Свойства для работы с grid-контейнером

Свойства: названия и назначение
Свойство Описание
align-content Распределяет свободное место по поперечной оси многострочного Flexbox, блочной оси Grid или выравнивает содержимое поддерживаемого блочного контейнера. Направление оси зависит от раскладки и writing-mode.
align-items Задаёт выравнивание элементов по поперечной оси Flexbox или блочной оси Grid; используется как исходное значение align-self.
grid Определяет количество, наименование и ширину столбцов и строк в макете сетки, задает шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area, задает размер неявно созданных строк и столбцов в контейнере сетки макета, а так же позволяет указать как работает алгоритм автоматического размещения для неявно созданных элементов макета, указывая как они будут размещены в сетке макета. Является сокращенным свойством для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow.
grid-auto-columns Задает размер неявно созданных столбцов в контейнере сетки макета.
grid-auto-flow Определяет, как работает алгоритм автоматического размещения для неявно созданных элементов макета, указывая как они будут размещены в сетке макета.
grid-auto-rows Задает размер неявно созданных строк в контейнере сетки макета.
grid-column-gap Устарело Определяет расстояние (промежуток) между столбцами в макете сетки. Современное свойство — column-gap.
grid-gap Устарело Определяет расстояние (промежуток) между строками и столбцами в макете сетки и является сокращенным свойством для свойств row-gap и column-gap. Современное свойство — gap.
grid-row-gap Устарело Определяет расстояние (промежуток) между строками в макете сетки. Современное свойство — row-gap.
grid-template Определяет количество, наименование и ширину столбцов и строк в макете сетки, задает шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area. Является сокращенным свойством для свойств grid-template-rows, grid-template-columns и grid-template-areas.
grid-template-areas Определяет шаблон макета сетки, ссылаясь при этом на имена областей элементов, которые задаются с помощью свойства grid-area.
grid-template-columns Определяет количество, наименование и размер столбцов (дорожек) в макете сетки.
grid-template-rows Определяет количество, наименование и размер строк в макете сетки.
justify-content Распределяет пространство по главной оси Flexbox или строчной оси Grid. Главная ось определяется flex-direction.
justify-items Задаёт выравнивание элементов в их областях по строчной оси; во Flexbox не применяется.
place-content Сокращённая запись align-content и justify-content; действие каждой части зависит от раскладки.
place-items Сокращённая запись align-items и justify-items. Во Flexbox часть justify-items не действует.

Свойства для работы с grid-элементом

Свойства: названия и назначение
Свойство Описание
align-self Переопределяет выравнивание отдельного элемента по поперечной оси Flexbox или блочной оси Grid.
grid-area Задает элементу имя, на которое можно сослаться при определении шаблона сетки, созданного с помощью свойства grid-template-areas. Является сокращенным свойством для свойств grid-row-start, grid-row-end, grid-column-start и grid-column-end.
grid-column Определяет с какого столбца будет начинаться элемент, сколько столбцов будет занимать элемент, или на каком столбце завершится элемент. Является сокращенным свойством для свойств grid-column-start и grid-column-end.
grid-column-end Определяет сколько столбцов будет занимать элемент, или на какой строке столбца завершится элемент.
grid-column-start Определяет с какого столбца будет расположен элемент в макете сетки, или какое количество столбцов будет охватывать элемент.
grid-row Определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.
grid-row-start Определяет сколько строк будет занимать элемент, или на какой строке начинается элемент в макете сетки.
grid-row-end Определяет сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки.
justify-self Задаёт выравнивание отдельного элемента по строчной оси; во Flexbox не применяется.
place-self Сокращённая запись align-self и justify-self. Во Flexbox часть justify-self не действует.

Текст

Свойства: названия и назначение
Свойство Описание
hanging-punctuation Свойство указывает, может ли знак препинания быть вынесен за пределы линейного блока в начале и в конце полной строки текста.
hyphens Сообщает браузеру, как расставлять переносы слов в блоке текста.
letter-spacing Увеличивает или уменьшает интервал между символами в тексте.
line-break Сообщает браузеру, как осуществлять разрыв строк.
line-height Устанавливает межстрочный интервал (интерлиньяж).
overflow-wrap Указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов). Свойство имеет ограниченную поддержку - используйте альтернативное свойство word-wrap.
tab-size Изменяет ширину отступа, заданного с помощью символа табуляции (Tab, Юникод - U+0009).
text-align Задает горизонтальное выравнивание текста.
text-align-last Задает горизонтальное выравнивание последней строки текста, а так же тексту перед принудительным разрывом строки. Свойство применяется только к тексту, который имеет горизонтальном выравнивании по ширине (свойство text-align со значением justify).
text-indent Задает отступ первой строки в текстовом блоке.
text-justify Определяет, как текст с выравниванием justify должен быть выровнен и разнесен.
text-transform Управляет регистром текста.
user-select Определяет может ли пользователь выделить текст элемента.
white-space Определяет как отображать пробелы внутри элемента.
word-break Указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область. Свойство используется для определения правил переноса, когда в тексте встречается одновременно как CJK, так и не-CJK текст(Китайский, Японский, Корейский).
word-spacing Увеличивает или уменьшает пробел между словами в тексте.
word-wrap Указывает браузеру, переносить или нет длинные слова, которые не помещаются по ширине в заданную область (разрешается ли разрывать строки внутри слов).

Оформление текста

Свойства: названия и назначение
Свойство Описание
text-decoration Добавляет декорирование текста (подчеркивание, перечеркивание, линия над текстом). В CSS3 является короткой записью для свойств text-decoration-color, text-decoration-line и text-decoration-style.
text-decoration-color Устанавливает цвет декоративной линии, которая добавляется через свойство text-decoration.
text-decoration-line Определяет тип декоративной линии. В настоящее время свойство имеет ограниченную поддержку, используйте короткую запись - text-decoration.
text-decoration-style Устанавливает стиль декоративной линии, которая добавляется через свойство text-decoration.
text-shadow Добавляет тень к тексту.
text-underline-position Указывает положение линии, которая добавляется через свойство text-decoration.

Свойства шрифта

Свойства: названия и назначение
Свойство Описание
font Устанавливает все свойства шрифта в одном объявлении.
font-family Задает шрифт для элемента.
font-feature-settings Позволяет контролировать расширенные типографские возможности шрифтов OpenType.
font-kerning Контролирует использование кернинга (изменение интервала между буквами в зависимости от их формы).
font-language-override Управляет использованием языковых специфических символов в шрифте.
font-size Задает размер шрифта элемента.
font-size-adjust Сохраняет читаемость текста, когда возникает подмена шрифта (браузер будет регулировать размер шрифта, чтобы быть тем же самым независимо от шрифта).
font-stretch Устанавливает узкое, нормальное или широкое начертание шрифта.
font-style Задает стиль шрифта для элемента.
font-synthesis Управляет тем, какие отсутствующие шрифты (жирный шрифт или курсив), могут быть синтезированы с помощью браузера.
font-variant Указывает, должен ли текст быть выведен в капители (оставить без модификаций строчные буквы или установить строчные знаки как уменьшенные заглавные).
font-variant-alternates Контролирует использование альтернативных символов, связанных альтернативным именем, определенных в @font-feature-values.
font-variant-caps Управляет использованием альтернативных символов для прописных букв.
font-variant-east-asian Управляет использование альтернативных символов для сценариев Восточной Азии (например, Японский и Китайский).
font-variant-ligatures Контролирует какие лигатуры и контекстные формы используются в текстовом содержимом элемента (возможность включить автоматическую подстановку лигатур для шрифтов, поддерживающих данное свойство).
font-variant-numeric Управляет использованием альтернативных символов для чисел, дробей и порядковых маркеров.
font-variant-position Управляет использование альтернативных символов меньшего размера, позиционируемых как с верхним или нижним индексом относительно базовой линии шрифта.
font-weight Устанавливает насколько жирным будет выглядеть текст в элементе.

Режимы написания

Свойства: названия и назначение
Свойство Описание
direction Указывает направление текста/направление письма.
text-orientation Определяет ориентацию текста в строке.
text-combine-upright Указывает браузеру, что необходимо размещать текст (символы) в пространстве одного символа (для вертикальных текстов сверху-вниз).
unicode-bidi Свойство используется совместно со свойством direction, чтобы установить должен ли текст быть переопределен для поддержки нескольких языков в одном документе.
writing-mode Определяет как будут располагаться строки текста, горизонтально или вертикально, а также направление, в котором блоки формируются.

Таблицы

Свойства: названия и назначение
Свойство Описание
border-collapse Устанавливает, как отображать границы вокруг ячеек таблицы.
border-spacing Задает расстояние между границами соседних ячеек.
caption-side Устанавливает расположение заголовка таблицы (над/под таблицей).
empty-cells Устанавливает, следует ли отображать границы и фон пустых ячеек в таблице.
table-layout Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на ее содержимом.

Списки и счетчики

Свойства: названия и назначение
Свойство Описание
counter-increment Увеличивает одно или более значений счетчика. Чаще всего используется вместе со свойствами counter-reset и content.
counter-reset Создает или сбрасывает один, либо несколько счетчиков. Чаще всего используется вместе со свойствами counter-increment и content.
list-style Устанавливает все свойства списка в одном объявлении.
list-style-image Позволяет задать изображение в качестве маркера элемента списка.
list-style-position Определяет расположение маркера относительно элемента списка (внутри элемента списка вместе с содержимым, либо за границей элемента списка).
list-style-type Указывает тип маркера элемента списка.

Анимация

Свойства: названия и назначение
Свойство Описание
animation Позволяет задать все свойства анимации в одном объявлении.
animation-delay Определяет задержку для запуска анимации.
animation-direction Определяет будет ли анимация воспроизводиться в обратном направлении, или в виде чередующихся циклов.
animation-duration Определяет, сколько секунд или миллисекунд затрачивается на выполнение одного цикла анимации.
animation-fill-mode Задает стиль для элемента, когда анимация не воспроизводится (когда она будет закончена, или когда она имеет задержку, установленную свойством animation-delay).
animation-iteration-count Указывает, сколько раз анимация должна быть воспроизведена.
animation-name Указывает имя анимации/список анимаций, которые должны быть применены к выбранному элементу. Каждое имя указывает на правило (@keyframes), которое определяет значения свойств анимации.
animation-play-state Определяет состояние анимации (анимация воспроизводится, либо приостановлена).
animation-timing-function Определяет кривую скорости для анимации (используется математическая функция - кубическая кривая Безье). Кривая скорости определяет время анимации, используемое, чтобы изменить один набор стилей CSS на другой.

Трансформация

Свойства: названия и назначение
Свойство Описание
backface-visibility Определяет, должна ли быть видна задняя сторона элемента или нет.
perspective Определяет на сколько элемент удален от точки обзора.
perspective-origin Устанавливает начало координат для свойства перспективы (perspective).
transform Применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента).
transform-origin Указывает начало координат преобразования (трансформации) элемента.
transform-style Определяет как вложенные элементы(дочерние элементы) отображаются в трехмерном пространстве.

Переходные эффекты

Свойства: названия и назначение
Свойство Описание
transition Позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении. Это свойство является короткой записью для свойств transition-delay, transition-duration, transition-property и transition-timing-function.
transition-duration Определяет, сколько секунд или миллисекунд эффект перехода занимает времени.
transition-property Указывает имя свойства CSS для которого используется переходный эффект.
transition-timing-function Используется, чтобы описать, как рассчитываются промежуточные значения CSS свойства, которое находится под воздействием эффекта перехода, используя при этом математическую функцию (кубическую кривую Безье). Это, по сути, позволяет создать кривую "разгона", так что скорость перехода может меняться в течение длительности эффекта перехода.
transition-delay Указывает, когда эффект перехода начнется (выступает в роли задержки начала эффекта).

Пользовательский интерфейс

Свойства: названия и назначение
Свойство Описание
box-sizing Используется для изменения, применяемой по умолчанию CSS модели, с помощью которой вычисляются ширина и высота элементов.
content Используется с псевдоэлементами :before и :after для вставки сгенерированного контента.
cursor Определяет тип, отображаемого курсора.
ime-mode Устарело Контролирует состояние редактора метода ввода для текстовых полей.
nav-down Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой вниз).
nav-index Определяет порядок табуляции для элемента.
nav-left Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой влево).
nav-right Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой вправо).
nav-up Указывает, куда перемещаться (при использовании навигационной клавиши со стрелкой вверх).
outline Устанавливает все свойства контура элемента в одном объявлении (контур не является частью элемента и не влияет на его ширину).
outline-color Устанавливает цвет контура элемента.
outline-offset Добавляет пространство между контуром и краем элемента или его границы (при наличии).
outline-style Устанавливает стиль контура элемента (за пределами границы).
outline-width Задает ширину контура элемента.
resize Указывает, может ли размер элемента изменяться пользователем.
text-overflow Указывает, что должно произойти, когда текст переполняет, содержащий элемент.

Свойства столбцов

Свойства: названия и назначение
Свойство Описание
break-after Определяет как происходят разрывы страниц(при печати), колонок или определённых областей после указанного элемента.
break-before Определяет как происходят разрывы страниц(при печати), колонок или определённых областей перед указанным элементом.
break-inside Определяет как происходят разрывы страниц(при печати), колонок или определённых областей внутри указанного элемента.
column-count Определяет количество колонок, на которое следует разделить элемент.
column-fill Указывает, как содержимое заполняется внутри столбцов (содержимое во всех столбцах будет иметь одинаковую высоту, либо занимает столько прострванства сколько ему потребуется).
column-gap Задаёт промежуток между колонками в многоколоночной раскладке, Grid и Flexbox.
column-rule Позволяет в одном объявлении указать следующие значения разделительной линии: ширина (column-rule-width), стиль (column-rule-style) и цвет (column-rule-color).
column-rule-color Определяет цвет разделительной линии между колонками.
column-rule-style Определяет стиль разделительной линии между колонками.
column-rule-width Определяет ширину разделительной линии между колонками.
column-span Определяет, должен ли элемент пересекать все колонки, либо позиционируется в одной из них.
column-width Задает оптимальную ширину для колонок.
columns Позволяет указать в одном объявлении значения свойств column-width(оптимальная ширина колонок) и column-count(оптимальное количество колонок).
widows Задает минимальное число строк текста, которое располагается на следующей странице при печати документа, когда происходит разрыв страницы внутри элемента (работает при условии, что текст размещается на двух и более страницах).

Постраничный вывод

Свойства: названия и назначение
Свойство Описание
marks Свойство, которое отвечает за выравнивание и обрезку печатаемого элемента.
orphans Задает минимальное число строк текста, которое располагается в нижней части страницы при печати документа, когда происходит разрыв страницы внутри элемента (работает при условии, что текст размещается на двух и более страницах).
page-break-after Устарело Определяет наличие или отсутствие разрыва страницы после заданного элемента при печати документа.
page-break-before Устарело Определяет наличие или отсутствие разрыва страницы перед заданным элементом при печати документа.
page-break-inside Устарело Определяет наличие или отсутствие разрыва страницы внутри заданного элемента при печати документа.
quotes Определяет тип кавычек для встраиваемых цитат.

Фильтры

Свойства: названия и назначение
Свойство Описание
filter Устанавливает визуальный эффект (фильтр) для элемента (например, размытие или изменение цвета).

Изображения и замещаемое содержимое

Свойства: названия и назначение
Свойство Описание
image-orientation Задает вращение (направление по часовой стрелке) по умолчанию.
image-rendering Сообщает браузеру, какой алгоритм следует использовать для масштабирования изображений. Это относится и к самому элементу, а также любых изображений, поставляемых в другие свойства для элемента.
image-resolution Позволяет изменить разрешение конкретных изображений (пользовательское масштабирование).
object-fit Управляет соотношением сторон заменяемых элементов (изображения/видео), когда у них задана ширина или высота, а также способом их масштабирования на странице.
object-position Устанавливает положение контента внутри заменяемого элемента (изображения/видео) по горизонтали и вертикали.

Свойства маски

Свойства: названия и назначение
Свойство Описание
mask Позволяет пользователям изменять видимость элемента, либо частично или полностью скрывает элемент. Это достигается путем маскировки или обрезки изображения в определенных точках.
mask-type Свойство, которое определяет какое значение (luminance/alpha mask) имеет SVG элемент (<mask>).

Свойства речи

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

Свойства: названия и назначение
Свойство Описание
mark Сокращенное свойство для установки свойств mark-before и mark-after.
mark-after Позволяет назначить маркер и прикрепить его к аудио потоку (служит для отметки начальной определенной точки в потоке).
mark-before Позволяет назначить маркер и прикрепить его к аудио потоку (служит для отметки конечной определенной точки в потоке).
phonemes Задает фонетическое произношение для текста, содержащегося в соответствующем элементе.
rest Сокращенное свойство для установки свойств rest-before и rest-after properties
rest-after Задает паузу после произнесения содержимого элемента.
rest-before Задает паузу перед произнесением содержимого элемента.
voice-balance Задает баланс между левым и правым каналами.
voice-duration Задаёт длительность произнесения содержимого при синтезе речи.
voice-pitch Указывает среднюю высоту (частоту) голоса.
voice-pitch-range Задаёт диапазон изменения высоты голоса при синтезе речи.
voice-rate Контролирует скорость речи.
voice-stress Указывает на силу интонации, которая должна применяться к тексту которому уделено особое внимание.
voice-volume Задает громкость звука (размер медианы звуковой волны).

Бегущая строка — исторический проект

Свойства marquee-* относятся к устаревшему проекту CSS Marquee. Для нового оформления используйте анимации CSS с учётом prefers-reduced-motion.

Свойства: названия и назначение
Свойство Описание
marquee-direction Устарело Устанавливает направление перемещения содержимого.
marquee-play-count Устарело Устанавливает, сколько раз содержимое движется.
marquee-speed Устарело Устанавливает, насколько быстро содержимое пролистывается.
marquee-style Устарело Установка стиля для перемещаемого содержимого.

Прочее

Свойства: названия и назначение
Свойство Описание
all Сбрасывает свойства, кроме direction, unicode-bidi и пользовательских свойств --*. Принимает initial, inherit, unset, revert и revert-layer.

Размеры, оформление и поведение

Размеры, оформление и поведение
Название Назначение
accent-color Задаёт акцентный цвет поддерживаемых элементов формы.
appearance Управляет нативным оформлением элемента интерфейса.
aspect-ratio Задаёт предпочтительное соотношение ширины и высоты; результат зависит от заданных размеров.
backdrop-filter Применяет фильтры к изображению за элементом; эффект виден через прозрачные участки.
background-position-x Задаёт горизонтальное положение фонового изображения.
background-position-y Задаёт вертикальное положение фонового изображения.
caret-color Задаёт цвет каретки текстового ввода.
clip-path Обрезает отображение элемента по фигуре или пути.
color-scheme Объявляет поддерживаемые цветовые схемы для встроенного оформления браузера.
forced-color-adjust Управляет адаптацией цветов элемента в режиме принудительных цветов.
print-color-adjust Передаёт браузеру пожелание сохранять оформление при печати; настройки пользователя имеют приоритет.
contain Ограничивает влияние внутреннего содержимого на внешнюю раскладку и отрисовку.
content-visibility Разрешает пропускать отрисовку содержимого, например вне области просмотра.
contain-intrinsic-size Сокращённая запись замещающих ширины и высоты содержимого при изоляции размера.
contain-intrinsic-width Задаёт замещающую ширину содержимого при изоляции размера.
contain-intrinsic-height Задаёт замещающую высоту содержимого при изоляции размера.
contain-intrinsic-block-size Задаёт замещающий размер содержимого по блочной оси при изоляции размера.
contain-intrinsic-inline-size Задаёт замещающий размер содержимого по строчной оси при изоляции размера.
container Сокращённая запись имени и типа контейнера запросов.
container-name Задаёт имена контейнера для обращения к нему в запросах контейнера.
container-type Задаёт тип контейнера запросов и необходимую для него изоляцию.
counter-set Устанавливает значение существующего счётчика или создаёт его при отсутствии.
isolation Создаёт изолированную группу смешивания и новый контекст наложения при значении isolate.
mix-blend-mode Определяет смешивание цветов элемента с фоном под ним.
pointer-events Определяет участие элемента в выборе цели событий указателя; не отключает фокус с клавиатуры.
touch-action Объявляет разрешённые браузерные жесты прокрутки и масштабирования.
will-change Предупреждает браузер о предполагаемых изменениях; применять точечно, а не ко всем элементам.
zoom Масштабирует элемент с влиянием на раскладку, в отличие от transform: scale().
field-sizing Выбирает обычный размер элемента формы или подстройку под содержимое; поддержка различается.
overflow-anchor Управляет участием элемента в привязке прокрутки при изменении содержимого.
overflow-clip-margin Расширяет область рисования перед обрезкой при overflow: clip.
overflow-block Управляет переполнением по блочной оси.
overflow-inline Управляет переполнением по строчной оси.
margin-trim Убирает внешние отступы дочерних элементов у выбранных краёв контейнера; поддержка различается.
page Выбирает именованную страницу, описанную правилом @page.

Логические свойства

Направления блочной и строчной осей, их начало и конец определяются свойствами writing-mode и direction. Это относится и к логическим вариантам свойств прокрутки.

Логические свойства
Название Назначение
margin-block Задаёт внешний отступ с обеих сторон блочной оси.
margin-block-start Задаёт внешний отступ со стороны начала блочной оси.
margin-block-end Задаёт внешний отступ со стороны конца блочной оси.
margin-inline Задаёт внешний отступ с обеих сторон строчной оси.
margin-inline-start Задаёт внешний отступ со стороны начала строчной оси.
margin-inline-end Задаёт внешний отступ со стороны конца строчной оси.
padding-block Задаёт внутренний отступ с обеих сторон блочной оси.
padding-block-start Задаёт внутренний отступ со стороны начала блочной оси.
padding-block-end Задаёт внутренний отступ со стороны конца блочной оси.
padding-inline Задаёт внутренний отступ с обеих сторон строчной оси.
padding-inline-start Задаёт внутренний отступ со стороны начала строчной оси.
padding-inline-end Задаёт внутренний отступ со стороны конца строчной оси.
inset-block Задаёт смещение позиционированного элемента с обеих сторон блочной оси.
inset-block-start Задаёт смещение позиционированного элемента со стороны начала блочной оси.
inset-block-end Задаёт смещение позиционированного элемента со стороны конца блочной оси.
inset-inline Задаёт смещение позиционированного элемента с обеих сторон строчной оси.
inset-inline-start Задаёт смещение позиционированного элемента со стороны начала строчной оси.
inset-inline-end Задаёт смещение позиционированного элемента со стороны конца строчной оси.
inset Сокращённая запись физических смещений top, right, bottom и left.
block-size Предпочтительный размер элемента по блочной оси.
inline-size Предпочтительный размер элемента по строчной оси.
min-block-size Минимальный размер элемента по блочной оси.
min-inline-size Минимальный размер элемента по строчной оси.
max-block-size Максимальный размер элемента по блочной оси.
max-inline-size Максимальный размер элемента по строчной оси.
border-block Сокращённая запись толщины, стиля и цвета границы с обеих сторон блочной оси.
border-block-start Сокращённая запись толщины, стиля и цвета границы со стороны начала блочной оси.
border-block-end Сокращённая запись толщины, стиля и цвета границы со стороны конца блочной оси.
border-block-color Задаёт цвет границы с обеих сторон блочной оси.
border-block-start-color Задаёт цвет границы со стороны начала блочной оси.
border-block-end-color Задаёт цвет границы со стороны конца блочной оси.
border-block-style Задаёт стиль линии границы с обеих сторон блочной оси.
border-block-start-style Задаёт стиль линии границы со стороны начала блочной оси.
border-block-end-style Задаёт стиль линии границы со стороны конца блочной оси.
border-block-width Задаёт толщину границы с обеих сторон блочной оси.
border-block-start-width Задаёт толщину границы со стороны начала блочной оси.
border-block-end-width Задаёт толщину границы со стороны конца блочной оси.
border-inline Сокращённая запись толщины, стиля и цвета границы с обеих сторон строчной оси.
border-inline-start Сокращённая запись толщины, стиля и цвета границы со стороны начала строчной оси.
border-inline-end Сокращённая запись толщины, стиля и цвета границы со стороны конца строчной оси.
border-inline-color Задаёт цвет границы с обеих сторон строчной оси.
border-inline-start-color Задаёт цвет границы со стороны начала строчной оси.
border-inline-end-color Задаёт цвет границы со стороны конца строчной оси.
border-inline-style Задаёт стиль линии границы с обеих сторон строчной оси.
border-inline-start-style Задаёт стиль линии границы со стороны начала строчной оси.
border-inline-end-style Задаёт стиль линии границы со стороны конца строчной оси.
border-inline-width Задаёт толщину границы с обеих сторон строчной оси.
border-inline-start-width Задаёт толщину границы со стороны начала строчной оси.
border-inline-end-width Задаёт толщину границы со стороны конца строчной оси.
border-start-start-radius Задаёт радиус угла на пересечении начала блочной и начала строчной оси.
border-start-end-radius Задаёт радиус угла на пересечении начала блочной и конца строчной оси.
border-end-start-radius Задаёт радиус угла на пересечении конца блочной и начала строчной оси.
border-end-end-radius Задаёт радиус угла на пересечении конца блочной и конца строчной оси.

Современная типографика

Современная типографика
Название Назначение
font-optical-sizing Включает автоматическую настройку оптического размера вариативного шрифта с осью opsz.
font-variation-settings Задаёт значения осей вариативного шрифта напрямую.
font-palette Выбирает цветовую палитру шрифта, в том числе объявленную через @font-palette-values.
font-width Выбирает ширину начертания шрифта; современное имя font-stretch.
font-synthesis-weight Разрешает или запрещает искусственное создание жирного начертания.
font-synthesis-style Разрешает или запрещает искусственное создание наклонного начертания.
font-synthesis-small-caps Разрешает или запрещает искусственное создание капительного начертания.
font-variant-emoji Выбирает текстовое или эмодзи-представление поддерживаемых символов.
hyphenate-character Задаёт символ, показываемый при автоматическом переносе слова.
hyphenate-limit-chars Ограничивает длину слова и частей слова при переносе.
initial-letter Управляет размером и выравниванием буквицы; поддержка различается.
line-clamp Ограничивает число строк; поддержка стандартной записи и совместимой записи с префиксом различается.
text-decoration-thickness Задаёт толщину линий текстового оформления.
text-decoration-skip-ink Управляет пропуском подчёркивания в местах пересечения с глифами.
text-underline-offset Задаёт смещение линии подчёркивания относительно исходного положения.
text-wrap Сокращённая запись режима и стратегии переноса текста.
text-wrap-mode Разрешает или запрещает перенос текста на новые строки.
text-wrap-style Выбирает стратегию распределения текста по строкам, например балансировку.
white-space-collapse Управляет обработкой пробелов и разрывов строк в исходном тексте.
text-emphasis Сокращённая запись стиля и цвета знаков выделения около символов текста.
text-emphasis-color Задаёт цвет знаков выделения около символов текста.
text-emphasis-style Задаёт вид знаков выделения около символов текста.
text-emphasis-position Задаёт расположение знаков выделения относительно текста.
text-autospace Управляет автоматическими промежутками между символами разных письменностей.
text-box Сокращённая запись обрезки пространства у краёв текста и выбора метрик для неё.
text-box-edge Выбирает метрики шрифта, определяющие края для обрезки пространства около текста.
text-box-trim Выбирает края текстового блока, у которых обрезается лишнее пространство.
ruby-align Задаёт выравнивание текста и аннотаций ruby; поддержка различается.
ruby-position Задаёт положение аннотаций ruby относительно основного текста; поддержка различается.
ruby-overhang Управляет выступом аннотаций ruby за края основного текста; поддержка различается.

Прокрутка

Прокрутка
Название Назначение
scroll-behavior Задаёт плавную или мгновенную программную прокрутку и переходы к якорям.
overscroll-behavior Сокращённая запись поведения на границе прокрутки по обеим осям, включая передачу прокрутки внешнему контейнеру.
overscroll-behavior-x Управляет поведением на границе прокрутки по горизонтальной оси, включая передачу прокрутки внешнему контейнеру.
overscroll-behavior-y Управляет поведением на границе прокрутки по вертикальной оси, включая передачу прокрутки внешнему контейнеру.
overscroll-behavior-block Управляет поведением на границе прокрутки по блочной оси, включая передачу прокрутки внешнему контейнеру.
overscroll-behavior-inline Управляет поведением на границе прокрутки по строчной оси, включая передачу прокрутки внешнему контейнеру.
scroll-snap-type Задаёт ось и строгость привязки прокрутки контейнера.
scroll-snap-align Определяет положение привязки элемента внутри контейнера прокрутки.
scroll-snap-stop Управляет возможностью пропустить точку привязки при прокрутке.
scrollbar-color Задаёт цвета ползунка и дорожки полосы прокрутки.
scrollbar-width Выбирает обычную, тонкую или скрытую полосу прокрутки.
scrollbar-gutter Резервирует место для обычной полосы прокрутки, уменьшая скачки ширины.
scroll-margin Сокращённая запись отступов области элемента для привязки и прокрутки к нему со всех четырёх сторон.
scroll-margin-top Задаёт отступ области элемента для привязки и прокрутки к нему сверху.
scroll-margin-right Задаёт отступ области элемента для привязки и прокрутки к нему справа.
scroll-margin-bottom Задаёт отступ области элемента для привязки и прокрутки к нему снизу.
scroll-margin-left Задаёт отступ области элемента для привязки и прокрутки к нему слева.
scroll-margin-block Задаёт отступ области элемента для привязки и прокрутки к нему с обеих сторон блочной оси.
scroll-margin-block-start Задаёт отступ области элемента для привязки и прокрутки к нему со стороны начала блочной оси.
scroll-margin-block-end Задаёт отступ области элемента для привязки и прокрутки к нему со стороны конца блочной оси.
scroll-margin-inline Задаёт отступ области элемента для привязки и прокрутки к нему с обеих сторон строчной оси.
scroll-margin-inline-start Задаёт отступ области элемента для привязки и прокрутки к нему со стороны начала строчной оси.
scroll-margin-inline-end Задаёт отступ области элемента для привязки и прокрутки к нему со стороны конца строчной оси.
scroll-padding Сокращённая запись внутренних отступов оптимальной области просмотра контейнера со всех четырёх сторон.
scroll-padding-top Задаёт внутренний отступ оптимальной области просмотра контейнера сверху.
scroll-padding-right Задаёт внутренний отступ оптимальной области просмотра контейнера справа.
scroll-padding-bottom Задаёт внутренний отступ оптимальной области просмотра контейнера снизу.
scroll-padding-left Задаёт внутренний отступ оптимальной области просмотра контейнера слева.
scroll-padding-block Задаёт внутренний отступ оптимальной области просмотра контейнера с обеих сторон блочной оси.
scroll-padding-block-start Задаёт внутренний отступ оптимальной области просмотра контейнера со стороны начала блочной оси.
scroll-padding-block-end Задаёт внутренний отступ оптимальной области просмотра контейнера со стороны конца блочной оси.
scroll-padding-inline Задаёт внутренний отступ оптимальной области просмотра контейнера с обеих сторон строчной оси.
scroll-padding-inline-start Задаёт внутренний отступ оптимальной области просмотра контейнера со стороны начала строчной оси.
scroll-padding-inline-end Задаёт внутренний отступ оптимальной области просмотра контейнера со стороны конца строчной оси.

Движение, маски и привязка к якорям

Движение, маски и привязка к якорям
Название Назначение
animation-composition Определяет объединение анимированного значения с нижележащим значением свойства.
animation-timeline Выбирает временную шкалу анимации: время, прокрутку или видимость.
animation-range Сокращённая запись начала и конца участка временной шкалы, на котором выполняется анимация.
animation-range-start Задаёт начало участка временной шкалы, на котором выполняется анимация.
animation-range-end Задаёт конец участка временной шкалы, на котором выполняется анимация.
scroll-timeline Сокращённая запись имени и оси шкалы прогресса прокрутки.
scroll-timeline-name Задаёт имя шкалы прогресса прокрутки контейнера.
scroll-timeline-axis Выбирает ось прокрутки для шкалы прогресса.
view-timeline Сокращённая запись имени, оси и отступов шкалы видимости элемента.
view-timeline-name Задаёт имя шкалы прогресса видимости элемента.
view-timeline-axis Выбирает ось, вдоль которой отслеживается видимость элемента.
view-timeline-inset Задаёт отступы области прокрутки, используемой для расчёта шкалы видимости.
timeline-scope Расширяет область доступности имён шкал прокрутки и видимости.
transition-behavior Разрешает переходы дискретных свойств с allow-discrete.
translate Задаёт перенос элемента отдельно от списка transform.
rotate Задаёт поворот элемента отдельно от списка transform.
scale Задаёт масштабирование элемента отдельно от списка transform.
transform-box Выбирает опорную область для преобразований и transform-origin.
offset Сокращённая запись свойств размещения и ориентации элемента вдоль траектории.
offset-path Задаёт траекторию размещения элемента.
offset-distance Задаёт расстояние вдоль траектории, определяющее положение элемента.
offset-position Задаёт исходную позицию, используемую при определении траектории.
offset-anchor Задаёт точку элемента, которая располагается на траектории.
offset-rotate Задаёт ориентацию элемента при движении вдоль траектории.
mask-image Задаёт изображение или другой источник слоя маски.
mask-mode Выбирает использование прозрачности или яркости источника для маскирования.
mask-repeat Задаёт повторение изображения маски.
mask-position Задаёт положение изображения маски.
mask-size Задаёт размер изображения маски.
mask-origin Выбирает опорную область для позиционирования изображения маски.
mask-clip Выбирает область, к которой применяется маска.
mask-composite Задаёт операцию объединения текущего слоя маски с нижележащими слоями.
mask-border Сокращённая запись маски границы из изображения; поддержка различается.
mask-border-source Задаёт изображение для маски границы; поддержка различается.
mask-border-slice Задаёт разрезание изображения маски границы на части; поддержка различается.
mask-border-width Задаёт ширину частей маски границы; поддержка различается.
mask-border-outset Задаёт выход области маски границы за край рамки; поддержка различается.
mask-border-repeat Задаёт повторение или растяжение частей маски границы; поддержка различается.
shape-outside Задаёт форму обтекания плавающего элемента.
shape-margin Задаёт отступ между формой обтекания и окружающим содержимым.
shape-image-threshold Задаёт порог непрозрачности пикселей для определения формы обтекания по изображению.
anchor-name Задаёт имена элемента-якоря для привязки других элементов.
anchor-scope Ограничивает область доступности имён элементов-якорей.
position-anchor Выбирает именованный якорь для позиционирования элемента.
position-area Выбирает область размещения элемента относительно якоря.
position-try Сокращённая запись альтернативных размещений и порядка их выбора при нехватке места.
position-try-fallbacks Задаёт список альтернативных размещений при выходе элемента за доступную область.
position-try-order Задаёт порядок проверки альтернативных размещений с учётом доступного пространства.
position-visibility Определяет условия скрытия якорно позиционированного элемента.
view-transition-name Задаёт имя участника перехода между состояниями страницы.
view-transition-class Объединяет участников перехода между состояниями страницы в классы для общей стилизации.
dynamic-range-limit Ограничивает динамический диапазон яркости при отображении содержимого; поддержка различается.

Общие значения и базовые линии

Общие значения и базовые линии
Название Назначение
--имя Пользовательские свойства хранят значения для подстановки через var(). Без регистрации наследуются; @property позволяет задать синтаксис и начальное значение.
alignment-baseline Выбирает базовую линию для выравнивания элемента; применимость зависит от контекста раскладки.
baseline-shift Задаёт смещение относительно базовой линии; применимость зависит от контекста раскладки.
baseline-source Выбирает первую или последнюю базовую линию элемента для выравнивания в строке.
text-rendering Передаёт пожелание о приоритетах отрисовки текста; действие зависит от движка и не заменяет свойства шрифта.
speak Управляет произнесением содержимого в CSS Speech; не является универсальной настройкой экранных дикторов.

Спецификация

CSS: Свойства — W3C