Справочник по CSS — Анимируемые свойства

all

Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые, за исключением свойств direction и unicode-bidi.

background

Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

background-color

Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

background-position

Задаёт начальное положение фонового изображения, установленного с помощью свойства background-image. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

background-position-x

Задаёт положение фонового изображения внутри элемента по горизонтали. Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.

background-position-y

Задаёт положение фонового изображения внутри элемента по вертикали. Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.

background-size

Масштабирует фоновое изображение, согласно заданным размерам.

block-size

Определяет размер элемента по блочной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блочная ось будет вертикальной и block-size устанавливает высоту элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) блочная ось будет горизонтальной и block-size устанавливает ширину элемента.

border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

border-bottom

Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

border-bottom-color

Устанавливает цвет границы внизу элемента.

border-bottom-left-radius

Устанавливает радиус скругления левого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

border-bottom-right-radius

Устанавливает радиус скругления правого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

border-bottom-width

Устанавливает толщину границы внизу элемента.

border-color

Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

border-left

Свойство border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

border-left-color

Задаёт цвет границы слева от элемента.

border-left-width

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

border-radius

Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

border-right

Свойство border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

border-right-color

Задаёт цвет границы справа от элемента.

border-right-width

Устанавливает толщину границы справа от элемента.

border-top

Свойство border-top позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

border-top-color

Задаёт цвет границы сверху элемента.

border-top-left-radius

Устанавливает радиус скругления левого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

border-top-right-radius

Устанавливает радиус скругления правого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

border-top-width

Встановлює товщину межі зверху елемента.

border-width

Задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений.

bottom

Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов. Отсчёт координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

box-shadow

Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

caret-color

Задаёт цвет текстового курсора, который отображается в текстовых полях формы (<input>, <textarea>), а также для элементов с атрибутом contenteditable. Такой курсор по аналогии с печатными машинками также называется кареткой и показывает место ввода следующего символа. Как правило, текстовый курсор выглядит как вертикальная мигающая линия.

clip

Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Всё, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственная доступная форма области — прямоугольник.

color

Определяет цвет текста элемента.

column-count

Определяет количество колонок в многоколоночном тексте.

column-rule

В многоколоночном тексте отрисовывает линию между колонок и определяет её параметры.

column-rule-color

В многоколоночном тексте задаёт цвет линий между колонок. Если такой цвет явно не указан, то цвет текста в колонках и цвет линий между ними совпадает.

column-rule-width

В многоколоночном тексте задаёт толщину линий между колонок.

columns

Універсальна властивість, яка дає змогу одночасно задати ширину і кількість колонок багатоколонкового тексту.

filter

Свойство filter предназначено для применения художественных эффектов к элементам. Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др.

flex

Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты пропорционально с учётом заданного соотношения или сжаты, чтобы целиком вместить все элементы без переносов в одну строку.

flex-basis

Свойство flex-basis определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.

flex-grow

Определяет, сколько пространства может занимать флекс внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.

flex-shrink

Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.

font

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

font-size

Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

font-stretch

Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

font-weight

Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

height

Устанавливает высоту содержимого элемента. По умолчанию высота определяется автоматически, исходя из содержимого элемента, но если задать фиксированное значение высоты, то она будет установлена, несмотря на объём содержимого. Если содержимое элемента превышает указанное значение высоты, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте свойство overflow со значением auto к стилю элемента.

inline-size

Определяет размер элемента по строчной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строчная ось будет горизонтальной и inline-size устанавливает ширину элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) строчная ось будет вертикальной и inline-size устанавливает высоту элемента.

left

Для позиціонованого елемента визначає відстань від лівого краю батьківського елемента, не враховуючи відступ, поле і ширину рамки, до лівого краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батьківського елементу виступає вікно браузера і положення елемента визначається від його лівого краю (рис. 1).

letter-spacing

Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

line-height

Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

margin

Встановлює величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

margin-bottom

Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

margin-left

Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

margin-right

Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

margin-top

Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

max-height

Встановлює максимальну висоту елемента. Значення висоти елемента обчислюватиметься залежно від значень встановлених властивостей height, max-height і min-height. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

max-width

Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

min-block-size

Определяет минимальный размер элемента по блочной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блочная ось будет вертикальной и min-block-size устанавливает минимальную высоту элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) блочная ось будет горизонтальной и min-block-size устанавливает минимальную ширину элемента.

min-height

Задаёт минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

min-width

Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

opacity

Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

order

Определяет порядок вывода флексов внутри флекс-контейнера. Элементы располагаются согласно значениям свойства order от меньшего к большему. При равных значениях order элементы выводятся в том порядке, в каком они появляются в исходном коде.

outline

Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:

outline-color

Указывает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.

outline-offset

Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

outline-width

Визначає товщину зовнішньої межі елемента. На відміну від властивості border-width, для outline-width не можна задати межу для кожної сторони елемента індивідуально.

padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

padding-block

Универсальное свойство, которое одновременно задаёт начальный и конечный внутренние отступы элемента по блочной оси. Направление оси зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блочная ось будет вертикальной и padding-block устанавливает отступы сверху и снизу. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) блочная ось будет горизонтальной и padding-block устанавливает отступы слева и справа.

padding-block-end

Определяет конечный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-end может соответствовать свойству padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-block-end в сочетании с другими свойствами.

padding-block-start

Определяет начальный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-start может соответствовать свойству padding-top, padding-right, padding-left. В табл. 1 показано положение padding-block-start в сочетании с другими свойствами.

padding-bottom

Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

padding-inline

Универсальное свойство, которое одновременно задаёт начальный и конечный внутренние отступы элемента по строчной оси. Направление оси зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строчная ось будет горизонтальной и padding-inline устанавливает отступы слева и справа. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) строчная ось будет вертикальной и padding-inline устанавливает отступы сверху и снизу.

padding-inline-end

Определяет начальный внутренний отступ элемента по строчной оси. В зависимости от значения свойства writing-mode и direction, свойство padding-inline-end может соответствовать свойству padding-top, padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-inline-end в сочетании с другими свойствами.

padding-inline-start

Определяет начальный внутренний отступ элемента по строчной оси. В зависимости от значения свойства writing-mode и direction, свойство padding-inline-start может соответствовать свойству padding-top, padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-inline-start в сочетании с другими свойствами.

padding-left

Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

padding-right

Встановлює значення поля від правого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

padding-top

Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

perspective

Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умолчанию располагается в центре элемента и может быть изменена с помощью свойства perspective-origin.

perspective-origin

Задаёт координаты точки, куда смотрит наблюдатель. Это свойство работает совместно со свойством perspective и определяет точку сходимости линий при перспективе.

right

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края (рис. 1). В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя (рис. 2).

text-decoration

Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

text-decoration-color

Встановлює колір лінії, яка додається через властивість text-decoration.

text-indent

Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>). Воздействия на все остальные строки не оказывает. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

text-shadow

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line.

top

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

transform

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел.

transform-origin

Устанавливает координаты точки, относительно которой будет происходить трансформация элемента.

vertical-align

Выравнивает элемент по вертикали относительно своего родителя, окружающего текста или ячейки таблицы.

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остаётся за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

width

Устанавливает ширину содержимого элемента. По умолчанию ширина зависит от типа элемента: блочные занимают всю доступную ширину; ширина строчно-блочных равна ширине их содержимому. Свойство width позволяет явно задать желаемую ширину элемента, несмотря на его исходное поведение.

word-spacing

Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

z-index

Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.