CSS Справочник
CSS Свойства
A
align-content | Задает выравнивание между линиями внутри гибкого контейнера, когда элементы не используют все доступное пространство |
align-items | Задает выравнивание для элементов внутри гибкого контейнера |
align-self | Задает выравнивание для выбранных элементов внутри гибкого контейнера |
all | Сбрасывает все свойства (кроме unicode-bidi и direction) |
animation | Сокращенное свойство для всех свойств animation-* |
animation-delay | Определяет задержку начала анимации |
animation-direction | Определяет, должна ли анимация воспроизводиться вперед, назад или в альтернативных циклах |
animation-duration | Определяет, сколько времени должно занять анимация для завершения одного цикла |
animation-fill-mode | Задает стиль для элемента, когда анимация не воспроизводится (до начала, после окончания или и то, и другое) |
animation-iteration-count | Определяет, сколько раз должна воспроизводиться анимация |
animation-name | Задает имя для анимации @keyframes |
animation-play-state | Определяет, запущена ли анимация или приостановлена |
animation-timing-function | Определяет кривую скорости анимации |
B
backface-visibility | Определяет, должна ли быть видна задняя грань элемента, когда он смотрит на пользователя |
background | Сокращенное свойство для всех свойств background-* |
background-attachment | Устанавливает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или фиксировано |
background-blend-mode | Определяет режим наложения каждого фонового слоя (цвет/изображение) |
background-clip | Определяет, насколько далеко должен распространяться фон (цвет или изображение) внутри элемента |
background-color | Задает цвет фона элемента |
background-image | Задает одно или несколько фоновых изображений для элемента |
background-origin | Определяет исходную позицию фонового изображения |
background-position | Определяет положение фонового изображения |
background-repeat | Устанавливает, будет ли/как будет повторяться фоновое изображение |
background-size | Определяет размер фоновых изображений |
border | Сокращенное свойство для border-width, border-style и border-color |
border-bottom | Сокращенное свойство для border-bottom-width, border-bottom-style и border-bottom-color |
border-bottom-color | Устанавливает цвет нижней границы |
border-bottom-left-radius | Определяет радиус границы нижнего левого угла |
border-bottom-right-radius | Определяет радиус границы нижнего правого угла |
border-bottom-style | Устанавливает стиль нижней границы |
border-bottom-width | Устанавливает ширину нижней границы |
border-collapse | Устанавливает, должны ли границы таблицы сворачиваться в единую границу или разделяться |
border-color | Устанавливает цвет четырех границ |
border-image | Сокращенное свойство для всех свойств border-image-* |
border-image-outset | Определяет величину, на которую область изображения границы выходит за пределы границы блока |
border-image-repeat | Определяет, должно ли изображение границы повторяться, закругляться или растягиваться |
border-image-slice | Определяет, как разрезать изображение границы |
border-image-source | Задает путь к изображению, которое будет использоваться в качестве границы |
border-image-width | Определяет ширину изображения границы |
border-left | Сокращенное свойство для всех свойств border-left-* |
border-left-color | Устанавливает цвет левой границы |
border-left-style | Устанавливает стиль левой границы |
border-left-width | Устанавливает ширину левой границы |
border-radius | Сокращенное свойство для четырех свойств border-*-radius |
border-right | Сокращенное свойство для всех свойств border-right-* |
border-right-color | Устанавливает цвет правой границы |
border-right-style | Устанавливает стиль правой границы |
border-right-width | Устанавливает ширину правой границы |
border-spacing | Устанавливает расстояние между границами соседних ячеек |
border-style | Устанавливает стиль четырех границ |
border-top | Сокращенное свойство для border-top-width, border-top-style и border-top-color |
border-top-color | Устанавливает цвет верхней границы |
border-top-left-radius | Определяет радиус границы верхнего левого угла |
border-top-right-radius | Определяет радиус границы правого верхнего угла |
border-top-style | Устанавливает стиль верхней границы |
border-top-width | Устанавливает ширину верхней границы |
border-width | Устанавливает ширину четырех границ |
bottom | Устанавливает позицию элемента снизу родительского элемента |
box-decoration-break | Устанавливает поведение фона и границы элемента при разрыве страницы или, для встроенных элементов, при разрыве строки. |
box-shadow | Добавляет одну или несколько теней к элементу |
box-sizing | Определяет, как рассчитываются ширина и высота элемента: должны ли они включать отступы и границы или нет |
break-after | Определяет, должен ли разрыв страницы, столбца или области происходить после указанного элемента |
break-before | Определяет, должен ли разрыв страницы, столбца или области происходить перед указанным элементом |
break-inside | Указывает, должен ли разрыв страницы, столбца или области происходить внутри указанного элемента |
C
caption-side | Задает размещение заголовка таблицы |
caret-color | Определяет цвет курсора (каретки) во входных данных, текстовых областях или любом редактируемом элементе |
@charset | Определяет кодировку символов, используемую в таблице стилей |
clear | Определяет, с каких сторон элемента плавающие элементы не могут плавать |
clip | Обрезает абсолютно позиционированный элемент |
color | Устанавливает цвет текста |
column-count | Задает количество столбцов, на которые должен быть разделен элемент |
column-fill | Определяет, как заполнять столбцы, сбалансированно или нет |
column-gap | Определяет зазор (расстояние) между столбцами |
column-rule | Сокращенное свойство для всех свойств column-rule-* |
column-rule-color | Задает цвет правила между столбцами |
column-rule-style | Задает стиль правила между столбцами |
column-rule-width | Определяет ширину правила между столбцами |
column-span | Определяет, сколько столбцов должен занимать элемент |
column-width | Определяет ширину столбца |
columns | Сокращенное свойство для column-width и column-count |
content | Используется с псевдоэлементами :before и :after для вставки сгенерированного содержимого |
counter-increment | Увеличивает или уменьшает значение одного или нескольких счетчиков CSS |
counter-reset | Создает или сбрасывает один или несколько счетчиков CSS |
cursor | Указывает курсор мыши, который будет отображаться при наведении указателя на элемент |
D
direction | Определяет направление текста/направление письма |
display | Определяет, как должен отображаться определенный элемент HTML |
E
empty-cells | Указывает, следует ли отображать границы и фон в пустых ячейках таблицы |
F
filter | Определяет эффекты (например, размытие или изменение цвета) на элементе перед отображением элемента |
flex | Сокращенное свойство для свойств flex-grow, flex-shrink и flex-basis |
flex-basis | Задает начальную длину гибкого элемента |
flex-direction | Определяет направление гибких элементов |
flex-flow | Сокращенное свойство для свойств flex-direction и flex-wrap |
flex-grow | Определяет, насколько элемент будет увеличиваться относительно остальных |
flex-shrink | Определяет, как элемент будет уменьшаться по сравнению с остальными |
flex-wrap | Определяет, должны ли гибкие элементы оборачиваться или нет |
float | Определяет, должен ли блок плавать |
font | Сокращенное свойство для свойств font-style, font-variant, font-weight, font-size/line-height и font-family |
@font-face | Правило, позволяющее веб-сайтам загружать и использовать шрифты, отличные от "web-безопасных" шрифтов |
font-family | Задает семейство шрифтов для текста |
font-feature-settings | Позволяет управлять расширенными типографскими функциями в шрифтах OpenType |
@font-feature-values | Позволяет авторам использовать общее имя в font-variant-alternate для функции, активированной по-разному в 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 | Определяет толщину шрифта |
G
grid | Сокращенное свойство для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns и grid-auto-flow |
grid-area | Либо задает имя для элемента сетки, либо это свойство является сокращенным свойством для свойств grid-row-start, grid-column-start, grid-row-end и grid-column-end |
grid-auto-columns | Задает размер столбца по умолчанию |
grid-auto-flow | Определяет, как автоматически размещенные элементы вставляются в сетку |
grid-auto-rows | Задает размер строки по умолчанию |
grid-column | Сокращенное свойство для свойств grid-column-start и grid-column-end |
grid-column-end | Указывает, где закончить элемент сетки |
grid-column-gap | Определяет размер зазора между столбцами |
grid-column-start | Указывает, где начать элемент сетки |
grid-gap | Сокращенное свойство для свойств grid-row-gap и grid-column-gap |
grid-row | Сокращенное свойство для свойств grid-row-start и grid-row-end |
grid-row-end | Указывает, где закончить элемент сетки |
grid-row-gap | Определяет размер зазора между строками |
grid-row-start | Указывает, где начать элемент сетки |
grid-template | Сокращенное свойство для свойств grid-template-rows, grid-template-columns и grid-areas |
grid-template-areas | Определяет, как отображать столбцы и строки, используя именованные элементы сетки |
grid-template-columns | Определяет размер столбцов и количество столбцов в макете сетки |
grid-template-rows | Определяет размер строк в макете сетки |
H
hanging-punctuation | Определяет, можно ли помещать знак пунктуации за пределы поля строки |
height | Устанавливает высоту элемента |
hyphens | Устанавливает, как разделять слова, чтобы улучшить расположение параграфов |
I
image-rendering | Даёт подсказку браузеру о том, какие аспекты изображения наиболее важно сохранить при масштабировании изображения |
@import | Позволяет импортировать таблицу стилей в другую таблицу стилей |
isolation | Определяет, должен ли элемент создавать новое содержимое стека |
J
justify-content | Задает выравнивание между элементами внутри гибкого контейнера, когда элементы не используют все доступное пространство |
K
@keyframes | Определяет код анимации |
L
left | Задает левую позицию позиционированного элемента |
letter-spacing | Увеличивает или уменьшает расстояние между символами в тексте |
line-break | Определяет, как/если разрыв строки |
line-height | Устанавливает высоту строки |
list-style | Устанавливает все свойства для списка в одном объявлении |
list-style-image | Определяет изображение как маркер элемента списка |
list-style-position | Определяет положение маркеров пунктов списка |
list-style-type | Определяет тип маркера элемента списка |
M
margin | Устанавливает все свойства полей в одном объявлении |
margin-bottom | Устанавливает нижнее поле элемента |
margin-left | Устанавливает левое поле элемента |
margin-right | Устанавливает правое поле элемента |
margin-top | Устанавливает верхнее поле элемента |
mask | Скрывает элемент, маскируя или обрезая изображение в определенных местах |
mask-type | Определяет, используется ли элемент маски в качестве маски яркости или альфа-маски |
max-height | Устанавливает максимальную высоту элемента |
max-width | Устанавливает максимальную ширину элемента |
@media | Устанавливает правила стиля для разных типов/устройств/размеров носителей |
min-height | Устанавливает минимальную высоту элемента |
min-width | Устанавливает минимальную ширину элемента |
mix-blend-mode | Определяет, как содержимое элемента должно сливаться с его прямым родительским фоном |
O
object-fit | Определяет, как содержимое заменяемого элемента должно соответствовать блоку, установленному его используемой высотой и шириной |
object-position | Задает выравнивание заменяемого элемента внутри его поля |
opacity | Устанавливает уровень непрозрачности для элемента |
order | Устанавливает порядок гибкого элемента относительно остальных |
orphans | Устанавливает минимальное количество строк, которые должны оставаться внизу страницы, когда разрыв страницы происходит внутри элемента |
outline | Сокращенное свойство для свойств outline-width, outline-style и outline-color |
outline-color | Устанавливает цвет контура |
outline-offset | Смещает контур и выводит его за край границы |
outline-style | Устанавливает стиль контура |
outline-width | Устанавливает ширину контура |
overflow |
Определяет, что происходит, если содержимое выходит за пределы поля элемента (переполнение) |
overflow-wrap | Определяет, может ли браузер разбивать строки в словах, чтобы предотвратить переполнение (когда строка слишком длинна, чтобы уместиться в содержащем её поле) |
overflow-x | Указывает, следует ли обрезать левый/правый края содержимого, если он выходит за пределы области содержимого элемента |
overflow-y | Определяет, обрезать ли верхний/нижний края содержимого, если он выходит за пределы области содержимого элемента |
P
padding | Сокращенное свойство для всех свойств padding-* |
padding-bottom | Устанавливает нижний отступ элемента |
padding-left | Устанавливает левый отступ элемента |
padding-right | Устанавливает правый отступ элемента |
padding-top | Устанавливает верхний отступ элемента |
page-break-after | Устанавливает поведение разрыва страницы после элемента |
page-break-before | Устанавливает поведение разрыва страницы перед элементом |
page-break-inside | Устанавливает поведение разрыва страницы внутри элемента |
perspective | Придает трехмерному элементу некоторую перспективу |
perspective-origin | Определяет, в какой позиции пользователь смотрит на трехмерный элемент |
pointer-events | Определяет, реагирует ли элемент на события указателя |
position | Задает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный) |
Q
quotes | Устанавливает тип кавычек для встроенных цитат |
R
resize | Определяет, можно ли (и как) изменять размер элемента пользователем |
right | Задает правильную позицию позиционируемого элемента |
S
scroll-behavior | Указывает, следует ли плавно анимировать позицию прокрутки в прокручиваемом поле вместо прямого перехода |
T
tab-size | Определяет ширину символа табуляции |
table-layout | Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы |
text-align | Определяет горизонтальное выравнивание текст |
text-align-last | Описывает, как выравнивается последняя строка блока или строка прямо перед принудительным разрывом строки, когда выравнивание текста установлено "justify" |
text-combine-upright | Задает комбинацию нескольких символов в пространстве одного символа |
text-decoration | Указывает оформление, добавленное к тексту |
text-decoration-color | Определяет цвет оформления текста |
text-decoration-line | Определяет тип линии в оформлении текста |
text-decoration-style | Определяет стиль линии в оформлении текста |
text-indent | Задает отступ первой строки в текстовом блоке |
text-justify | Определяет метод выравнивания, используемый при выравнивании текста "justify" |
text-orientation | Определяет ориентацию текста в строке |
text-overflow | Определяет, что должно произойти, когда текст переполняет содержащий элемент |
text-shadow | Добавляет тень к тексту |
text-transform | Управляет использованием заглавных букв в тексте |
text-underline-position | Определяет положение подчеркивания, которое задается с помощью свойства text-decoration |
top | Определяет верхнюю позицию позиционированного элемента |
transform | Применяет 2D или 3D преобразование к элементу |
transform-origin | Позволяет изменять положение трансформируемых элементов |
transform-style | Определяет, как вложенные элементы отображаются в 3D-пространстве |
transition | Сокращенное свойство для всех свойств transition-* |
transition-delay | Указывает, когда начнется эффект перехода |
transition-duration | Определяет, сколько секунд или миллисекунд требуется для завершения эффекта перехода |
transition-property | Задает имя свойства CSS, для которого предназначен эффект перехода |
transition-timing-function | Определяет кривую скорости эффекта перехода |
U
unicode-bidi | Используется вместе со свойством direction для установки или возврата, следует ли переопределить текст для поддержки нескольких языков в одном документе |
user-select | Определяет, можно ли выделить текст элемента |
V
vertical-align | Устанавливает вертикальное выравнивание элемента |
visibility | Определяет, является ли элемент видимым |
W
white-space | Определяет, как обрабатываются пробелы внутри элемента |
widows | Устанавливает минимальное количество строк, которые должны оставаться в верхней части страницы, когда разрыв страницы происходит внутри элемента |
width | Устанавливает ширину элемента |
word-break | Определяет, как слова должны разрываться при достижении конца строки |
word-spacing | Увеличивает или уменьшает расстояние между словами в тексте |
word-wrap | Позволяет разбивать длинные неразрывные слова и переносить их на следующую строку |
writing-mode | Определяет расположение строк текста: горизонтально или вертикально |
Z
z-index | Устанавливает порядок стека позиционированного элемента |