Этот раздел содержит полный список стандартных свойств, относящихся к последним спецификациям CSS3. Все свойства сгруппированы по категориям.
Свойства Animation
| Cвойство | Описание |
|---|---|
| animation | Определяет анимацию на основе ключевых кадров @keyframes |
| animation-delay | Определяет, когда анимация начнется |
| animation-direction | Определяет, должна ли анимация воспроизводиться в обратном порядке при чередовании или нет |
| animation-duration | Определяет количество секунд или миллисекунд, которое анимация должна занять для завершения одного цикла |
| animation-fill-mode | Определяет, как CSS-анимация должна применять стили к своей цели до и после ее выполнения |
| animation-iteration-count | Определяет, сколько раз цикл анимации должен быть воспроизведен перед остановкой |
| animation-name | Задает имя анимации, определенной @keyframes, которая должна применяться к выбранному элементу |
| animation-play-state | Определяет, запущена ли анимация или приостановлена |
| animation-timing-function | Определяет, как CSS-анимация должна развиваться в течение каждого цикла |
Свойства Background
| Cвойство | Описание |
|---|---|
| background | Устанавливает различные свойства фона в одном объявлении |
| background-attachment | Определяет, будет ли фоновое изображение прокручиваться вместе с документом или останется фиксированным в области просмотра |
| background-clip | Определяет область на которую будет распространяться фон элемента |
| background-color | Устанавливает цвет фона элемента |
| background-image | Определяет фоновое изображение элемента |
| background-origin | Определяет область позиционирования фонового изображения |
| background-position | Устанавливает начальную позицию фонового элемента |
| background-repeat | Определяет, будет ли фоновое изображение повторяться по горизонтали и вертикали, чтобы заполнить все доступное пространство |
| background-size | Устанавливает размер фонового изображения |
Свойства Border
| Cвойство | Описание |
|---|---|
| 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-outset | Определяет величину, на которую область изображения границы выходит за границы рамки |
| border-image-repeat | Определяет, должна ли граница изображения повторяться, округляться или растягиваться |
| border-image-slice | Определяет внутренние смещения границы изображения |
| border-image-source | Определяет местоположение изображения, которое будет использоваться в качестве границы border |
| border-image-width | Определяет ширину границы изображения |
| border-left | Устанавливает ширину, стиль и цвет левой границы элемента |
| border-left-color | Устанавливает цвет левой границы элемента |
| border-left-style | Устанавливает стиль левой границы элемента |
| border-left-width | Устанавливает ширину левой границы элемента |
| border-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 | Устанавливает ширину границы на всех четырех сторонах элемента |
Свойства Color
Свойства для размеров
| Cвойство | Описание |
|---|---|
| height | Устанавливает высоту элемента |
| max-height | Устанавливает максимальную высоту элемента |
| max-width | Устанавливает максимальную ширину элемента |
| min-height | Устанавливает минимальную высоту элемента |
| min-width | Устанавливает минимальную ширину элемента |
| width | Устанавливает ширину элемента |
Свойства для контента
| Cвойство | Описание |
|---|---|
| content | Вставляет сгенерированный контент |
| quotes | Определяет кавычки для встроенных цитат |
| counter-reset | Создает или сбрасывает один или несколько счетчиков |
| counter-increment | Увеличивает одно или несколько значений счетчика |
Свойства для выравниваний
| Cвойство | Описание |
|---|---|
| align-content | Определяет выравнивание flex-элементов внутри flex-контейнера |
| align-items | Определяет выравнивание по умолчанию для элементов во flex-контейнере |
| align-self | Определяет выравнивание для выбранных элементов во flex-контейнере |
| flex | Определяет компоненты flex-элемента |
| flex-basis | Определяет начальный основной размер flex-элемента |
| flex-direction | Определяет направление flex-элементов |
| flex-flow | Сокращенное свойство для flex-direction и flex-wrap |
| flex-grow | Определяет, как flex-элемент будет расти относительно других элементов внутри flex-контейнера |
| flex-shrink | Определяет, как flex-элемент будет сжиматься относительно других элементов внутри flex-контейнера |
| flex-wrap | Определяет, должны ли flex-элементы оборачиваться или нет |
| justify-content | Определяет, как flex-элементы выравниваются вдоль горизонтальной оси Y flex-контейнера и auto margins |
| order | Указывает порядок, в котором flex-элементы отображаются и размещаются во flex-контейнере. |
Свойства Font
| Cвойство | Описание |
|---|---|
| font | Определяет множество свойств шрифта в одном объявлении |
| font-family | Определяет список шрифтов для элемента |
| font-size | Определяет размер шрифта для текста |
| font-size-adjust | Сохраняет читаемость текста при возникновении сбоя в шрифтах |
| font-stretch | Устанавливает нормальное, сжатое или расширенное начертание шрифта, буквы в тексте при этом уплотняются или расширяются |
| font-style | Определяет стиль шрифта для текста |
| font-variant | Устанавливает вариацию семейства шрифтов |
| font-weight | Устанавливает толщину шрифта |
Свойства List
| Cвойство | Описание |
|---|---|
| list-style | Определяет стиль отображения для списка и элементов списка |
| list-style-image | Определяет изображение, которое будет использоваться в качестве маркера элемента списка |
| list-style-position | Определяет положение маркера элемента списка |
| list-style-type | Определяет стиль маркера для элемента списка |
Свойства Margin
| Cвойство | Описание |
|---|---|
| margin | Устанавливает внешний отступ у элемента |
| margin-bottom | Устанавливает нижний внешний отступ у элемента |
| margin-left | Устанавливает левый внешний отступ у элемента |
| margin-right | Устанавливает правый внешний отступ у элемента |
| margin-top | Устанавливает верхний внешний отступ у элемента |
Свойства Columns
| Cвойство | Описание |
|---|---|
| column-count | Определяет количество столбцов в элементе |
| column-fill | Указывает, как поток содержимого влияет на длину столбцов в элементе с несколькими столбцами |
| column-gap | Определяет зазор между столбцами в элементе из нескольких столбцов |
| column-rule | Определяет свойства для пространства между столбцами column |
| column-rule-color | Устанавливает цвет пространства между столбцами в многоколоночном макете |
| column-rule-style | Устанавливает стиль пространства между столбцами в многостолбцовой компоновке |
| column-rule-width | Устанавливает ширину пространства между столбцами в многостолбцовой компоновке |
| column-span | Указывает, сколько столбцов элемент охватывает в многостолбцовой компоновке |
| column-width | Определяет оптимальную ширину столбцов в элементе из нескольких столбцов |
| columns | Сокращенное свойство для установки свойств column-width и column-count |
Свойства Outline
| Cвойство | Описание |
|---|---|
| outline | Устанавливает ширину, стиль и цвет для всех четырех сторон контура элемента |
| outline-color | Устанавливает цвет контура |
| outline-offset | Устанавливает расстояние между контуром и границей элемента |
| outline-style | Устанавливает стиль для контура |
| outline-width | Устанавливает ширину контура |
Свойства Padding
| Cвойство | Описание |
|---|---|
| padding | Устанавливает внутренний отступ у элемента |
| padding-bottom | Устанавливает нижний внутренний отступ у элемента |
| padding-left | Устанавливает левый внутренний отступ у элемента |
| padding-right | Устанавливает правый внутренний отступ у элемента |
| padding-top | Устанавливает верхний внутренний отступ у элемента |
Свойства
| Cвойство | Описание |
|---|---|
| page-break-after | Вставляет разрывы страниц после элемента |
| page-break-before | Вставляет разрывы страниц перед элементом |
| page-break-inside | Вставляет разрывы страниц внутри элемента |
Свойства Table
| Cвойство | Описание |
|---|---|
| border-collapse | Указывает, связаны ли границы ячейки таблицы или разделены |
| border-spacing | Устанавливает интервал между границами соседних ячеек таблицы |
| caption-side | Указывает положение заголовка таблицы |
| empty-cells | Показывает или скрывает границы и фон пустых ячеек таблицы |
| table-layout | Определяет алгоритм рендеринга таблицы |
Свойства Text
| Cвойство | Описание |
|---|---|
| direction | Определяет направление текста |
| unicode-bidi | Обрабатывает двунаправленные текст в документе - ltr и rtl |
| tab-size | Определяет длину символа табуляции |
| text-align | Устанавливает горизонтальное выравнивание встроенного содержимого |
| text-align-last | Указывает, как выравнивается последняя строка блока или строка непосредственно перед принудительным разрывом строки |
| text-decoration | Определяет декорацию добавляемую для текста |
| text-decoration-color | Определяет цвет text-decoration-line |
| text-decoration-line | Определяет, какая линия декорации добавляется к элементу |
| text-decoration-style | Определяет стиль линий указанных свойством text-decoration-line |
| text-indent | Делает отступ в первой строке текста |
| text-justify | Определяет метод выравнивания, который нужно использовать, когда для свойства text-align установлено justify |
| text-overflow | Определяет, как текстовое содержимое будет отображаться при переполнении контейнера |
| text-shadow | Применяет одну или несколько теней к текстовому содержимому элемента |
| text-transform | Преобразует регистр текста |
| line-height | Устанавливает высоту межстрочного интервала в блочном элементе |
| vertical-align | Устанавливает вертикальное положение элемента относительно текущей базовой линии текста |
| letter-spacing | Устанавливает дополнительный интервал между буквами |
| word-spacing | Устанавливает интервал между словами |
| white-space | Определяет, как обрабатывается пустое пространство внутри элемента |
| word-break | Определяет, как разбивать строки в словах |
| word-wrap | Указывает, следует ли разбивать слова, когда содержимое выходит за границы его контейнера |
Свойства Transform
| Cвойство | Описание |
|---|---|
| backface-visibility | Определяет, видна ли «обратная» сторона трансформированного элемента |
| perspective | Определяет перспективу просмотра всех дочерних элементов объекта |
| perspective-origin | Определяет координаты начальной точки от которой высчитывается свойство perspective |
| transform | Применяет 2D или 3D преобразование к элементу |
| transform-origin | Устанавливает координаты точки X, Y, Z, относительно которой будет происходить трансформация элемента |
| transform-style | Определяет, как расположены элементы в 3D-пространстве |
Свойства Transitions
| Cвойство | Описание |
|---|---|
| transition | Определяет переход между двумя состояниями элемента |
| transition-delay | Определяет время через которое начнется эффект перехода |
| transition-duration | Устанавливает длительность эффекта перехода |
| transition-property | Задает имена CSS-свойств, к которым должен применяться эффект перехода |
| transition-timing-function | Определяет кривую скорости эффекта перехода |
Свойства для визуального форматирования
| Cвойство | Описание |
|---|---|
| display | Определяет, как элемент отображается на экране при взаимодействии с другими элементами |
| position | Определяет, как позиционируется элемент |
| top | Задает смещение или отступ от верхнего края элемента |
| right | Задает смещение или отступ от правого края элемента |
| bottom | Задает смещение или отступ от нижнего края элемента |
| left | Задает смещение или отступ от левого края элемента |
| float | Указывает, должен ли блок обтекаться слева или справа |
| clear | Определяет, какие стороны элемента запрещены для обтекания |
| z-index | Определяет порядок наложения для позиционированных элементов |
| overflow | Определяет поведение блока, когда содержимое переполняет область контейнера |
| overflow-x | Определяет поведение блока, когда содержимое переполняет область контейнера по оси X |
| overflow-y | Определяет поведение блока, когда содержимое переполняет область контейнера по оси Y |
| resize | Указывает, может ли пользователь изменять размер элемента |
| clip | Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано |
| visibility | Указывает, является ли элемент видимым |
| cursor | Устанавливает курсор |
| box-shadow | Применяет один или несколько эффектов тени к элементу |
| box-sizing | Изменяет стандартную блочную модель CSS |
Правила
| Cвойство | Описание |
|---|---|
| CSS-правило @charset | Определяет кодировку символов внешней таблицы стилей |
| CSS-правило @font-face | Позволяет использовать загружаемые веб-шрифты |
| CSS-правило @import | Импортирует внешнюю таблицу стилей |
| CSS-правило @keyframes | Указывает значения для свойств анимации в различных точках во время анимации |
| CSS-правило @media | Устанавливает типы мультимедиа для набора правил в таблице стилей |
| CSS-правило @page | Определяет размеры, ориентацию и поля страницы для печати |