Свойства CSS3
На этой странице вы найдете все группы свойств CSS3 со ссылками и краткими описаниями.
Список свойств CSS3
Свойства анимации
| Property | Description |
|---|---|
| animation | Анимирует (постепенно изменяет одно стилевое значение на другое) свойства CSS с дискретными значениями. |
| animation-delay | Указывает, когда начнется анимация. |
| animation-direction | Задает, как должна воспроизводиться анимация: вперед, назад или в чередующихся циклах. |
| animation-duration | Определяет длительность анимации в секундах или миллисекундах, необходимую для завершения одного цикла. |
| animation-fill-mode | Задает стиль элемента, когда анимация не выполняется (до начала, после окончания или в обоих случаях). |
| animation-iteration-count | Определяет, сколько раз должна воспроизводиться анимация. |
| animation-name | Определяет имя правила @keyframes, которое вы хотите применить. Оно имеет два значения: none и keyframename. |
| animation-play-state | Указывает, выполняется анимация или приостановлена. |
| animation-timing-function | Определяет, как анимация будет изменяться в течение длительности каждого цикла, а не на протяжении всей анимации. |
| @keyframes (at-rule) | Правило @keyframes является основой для keyframe animations, используемых для анимации (постепенного изменения одного стилевого значения на другое) многих свойств CSS. |
Свойства фона
| Property | Description |
|---|---|
| background-clip | Указывает, насколько далеко background-color и background-image должны находиться от элемента. |
| background-origin | Указывает область позиционирования background-image. |
| background-size | Определяет размер фонового изображения. |
Свойства границ
| Property | Description |
|---|---|
| border-bottom-left-radius | Определяет скругление нижнего левого угла элемента. |
| border-bottom-right-radius | Задает скругление нижнего правого угла элемента. |
| border-image | Позволяет указать изображение в качестве границы вокруг элемента. |
| border-image-outset | Указывает величину, на которую border image выходит за пределы рамки элемента. |
| border-image-repeat | Указывает, будет ли border-image скругляться, повторяться или растягиваться. |
| border-image-slice | Указывает, как разделить изображение, заданное border-image-source, на девять областей: четыре угла, четыре края и центральную часть. |
| border-image-source | Задает исходное изображение для создания border image элемента. |
| border-image-width | Определяет ширину border image. |
| border-radius | Создает скругленные углы внешней границы элемента. |
| border-top-left-radius | Определяет скругление верхнего левого угла элемента. Существует три вида скругления. |
| border-top-right-radius | Определяет скругление верхнего правого угла элемента. Существует три вида скругления. |
Свойства цвета
| Property | Description |
|---|---|
| opacity | Указывает прозрачность элемента. |
Гибкая блочная раскладка
| Property | Description |
|---|---|
| align-content | Выравнивает строки контейнера flex, когда по вертикали доступно свободное пространство (по поперечной оси). |
| align-items | Определяет выравнивание элементов flex по умолчанию вдоль поперечной оси. |
| flex | Указывает компоненты гибкой длины. |
| flex-basis | Определяет начальный основной размер гибкого элемента. |
| flex-direction | Определяет главную ось flex-контейнера и задает порядок, в котором появляются элементы flex. |
| flex-flow | Сокращенное свойство для flex-wrap и flex-direction. |
| flex-grow | Указывает, насколько элемент будет увеличиваться относительно остальных элементов flex-контейнера. |
| flex-shrink | Указывает, насколько элемент будет уменьшаться относительно остальных элементов flex-контейнера. |
| flex-wrap | Указывает, должны ли гибкие элементы переноситься на новую строку или нет. |
| justify-content | Выравнивает элементы, когда они не используют все доступное пространство по горизонтали. |
| order | Указывает порядок гибкого элемента внутри flex- или grid-контейнера. |
Свойства шрифта
| Property | Description |
|---|---|
| font-size-adjust | Управляет размером шрифта, когда первый выбранный шрифт недоступен. |
| font-stretch | Делает текст уже или шире. |
Свойства многоколоночной раскладки
| Property | Description |
|---|---|
| column-count | Указывает количество колонок, на которые делится содержимое элемента. |
| column-fill | Управляет содержимым элемента при его разделении на колонки. |
| column-gap | Задает размер промежутка между колонками. |
| column-rule | Определяет стиль, ширину и цвет линии между колонками. |
| column-rule-color | Задает цвет линии. |
| column-rule-style | Определяет стиль линии между колонками. |
| column-rule-width | Определяет ширину линии между колонками. |
| column-span | Указывает, занимает ли элемент одну колонку или все колонки. |
| column-width | Определяет ширину колонок. |
| columns | Сокращенное свойство для column-count и column-width. |
Свойства контура
| Property | Description |
|---|---|
| outline-offset | Указывает расстояние между контуром и краем границы элемента. |
Свойства текста
| Property | Description |
|---|---|
| tab-size | Задает ширину символа табуляции. |
| text-align-last | Задает выравнивание последней строки текста. |
| text-decoration-color | Задает цвет текстового оформления. |
| text-decoration-line | Указывает вид линии, которая будет использоваться для оформления текста. |
| text-decoration-style | Указывает стиль текстового оформления. |
| text-justify | Определяет поведение интервалов между словами или символами. |
| text-overflow | Указывает, как пользователю будет показано переполнение встроенного текста. |
| text-shadow | Позволяет добавлять тени к тексту. |
| word-break | Указывает, где должны разрываться строки. |
| word-wrap | Позволяет переносить строки по словам, чтобы они помещались в контейнер. |
Свойства преобразования
| Property | Description |
|---|---|
| backface-visibility | Указывает, должна ли быть видимой задняя сторона элемента. |
| perspective | Придает элементу, расположенному в 3D-пространстве, перспективу и определяет расстояние до плоскости z=0. |
| perspective-origin | Определяет позицию, с которой пользователь смотрит на элемент, расположенный в 3D-пространстве. |
| transform | Указывает двумерное или трехмерное преобразование элемента. |
| transform-origin | Позволяет изменить позицию преобразования элементов. |
| transform-style | Указывает, как дочерние элементы отображаются в трехмерном (3D) пространстве. |
Свойства переходов
| Property | Description |
|---|---|
| transition | Сокращенное свойство для следующих свойств: transition-property, transition-duration, transition-timing-function, transition-delay |
| transition-delay | Указывает, когда должен начаться эффект перехода. |
| transition-duration | Указывает, сколько времени должен занимать переход. |
| transition-property | Указывает имена свойств, к которым применяется переход. |
| transition-timing-function | Указывает, как будет происходить переход в течение своей длительности, позволяя изменять скорость. |
Свойства визуального форматирования
| Property | Description |
|---|---|
| overflow-x | Указывает, должно ли содержимое быть скрыто, видно или прокручиваться по горизонтали, когда оно выходит за левую и правую границы элемента. |
| overflow-y | Указывает, должно ли содержимое быть скрыто, видно или прокручиваться по вертикали, когда оно выходит за верхнюю и нижнюю границы элемента. |
| resize | Указывает, можно ли изменять размер элемента. |
| box-shadow | Позволяет создавать несколько теней вокруг блока, задавая значения цвета, размера, размытия, смещения и inset. |
| box-sizing | Определяет расчет width и height элемента, если они включают padding и borders. |
Практика
Which of the following are valid CSS3 properties?