ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

CSS Reference

CSS Reference CSS Browser Support CSS Selectors CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Entities

CSS Properties

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom 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-outset border-image-repeat border-image-slice border-image-source 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-spacing border-style border-top 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 caption-side caret-color @charset clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-kerning font-size font-size-adjust font-stretch font-style font-variant font-weight grid grid-area grid-auto-columns grid-auto-flow grid-auto-rows grid-column grid-column-end grid-column-gap grid-column-start grid-gap grid-row grid-row-end grid-row-gap grid-row-start grid-template grid-template-areas grid-template-columns grid-template-rows hanging-punctuation height hyphens @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width object-fit opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin pointer-events position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi user-select vertical-align visibility white-space width word-break word-spacing word-wrap z-index




CSS Справочник примеры и элементы


A

align-content Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство
align-items Задает выравнивание для элементов внутри гибкого контейнера
align-self Задает выравнивание для выбранных элементов внутри гибкого контейнера
all Сбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления)
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-attachment Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано
background-blend-mode Задает режим наложения для каждого слоя фона (цвет/изображение)
background-clip Определяет, насколько фон (цвет или изображение) должен расширяться в элементе
background-color Задает цвет фона элемента
background-image Задание одного или нескольких фоновых изображений для элемента
background-origin Задает исходную позицию фонового изображения
background-position Определяет положение фонового изображения
background-repeat Устанавливает, если/как фоновое изображение будет повторяться
background-size Определяет размер фоновых изображений
border Сокращенное свойство для ширины границы, стиля границы и цвета границы
border-bottom Сокращенное свойство для задания всех свойств нижней границы в одном объявлении
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-color Задает цвет левой границы
border-left-style Задает стиль левой границы
border-left-width Задает ширину левой границы
border-radius Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS
border-right Сокращенное свойство для задания всех свойств правой границы в одном объявлении
border-right-color Задает цвет правой границы
border-right-style Задает стиль правой границы
border-right-width Задает ширину правой границы
border-spacing Устанавливает расстояние между границами соседних ячеек
border-style Задает стиль четырех границ
border-top Сокращенное свойство для задания всех свойств верхнего края в одном объявлении
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 Сокращенное свойство для установки всех свойств столбца-Rule-*
column-rule-color Задает цвет правила между столбцами
column-rule-style Задает стиль правила между столбцами
column-rule-width Задает ширину правила между столбцами
column-span Указывает, сколько столбцов элемент должен охватывать поперек
column-width Задает ширину столбца
columns Сокращенное свойство для задания ширины столбца и счетчика столбцов
content Используется с: before и: After псевдо-элементы, чтобы вставить сгенерированное содержимое
counter-increment Увеличивает или уменьшает значение одного или нескольких счетчиков CSS
counter-reset Создает или сбрасывает один или несколько счетчиков CSS
cursor Указывает курсор мыши, отображаемый при наведении на элемент

D

direction Задает направление текста/направление письма
display Указывает, как должен отображаться определенный элемент HTML

E

empty-cells Указывает, отображать ли границы и фон на пустых ячейках таблицы

F

filter Определяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента
flex Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства
flex-basis Задает начальную длину гибкого элемента
flex-direction Указывает направление гибких элементов
flex-flow Сокращенное свойство для свойств Flex-Direction и Flex-Wrap
flex-grow Указывает, сколько будет расти номенклатура относительно остальных
flex-shrink Указывает, как элемент будет сжиматься относительно остальных
flex-wrap Указывает, следует ли обернуть гибкие элементы
float Указывает, должно ли поле плавать
font Задает все свойства шрифта в одном объявлении
@font-face Правило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся "web-safe" шрифтами
font-family Задает семейство шрифтов для текста
font-feature-settings Позволяет контролировать расширенные типографские функции шрифтов OpenType
@font-feature-values Позволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType
font-kerning Управляет использованием информации о кернинге (как буквы расположены в пространстве)
font-language-override Управляет использованием глифов, специфичных для языка, в шрифте
font-size Задает размер шрифта текста
font-size-adjust Сохраняет читаемость текста, когда происходит откат шрифта
font-stretch Выбор нормальной, сжатой или расширенной грани из семейства шрифтов
font-style Задает стиль шрифта для текста
font-synthesis Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем
font-variant Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами
font-variant-alternates Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения
font-variant-caps Управление использованием альтернативных глифов для заглавных букв
font-variant-east-asian Управляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского)
font-variant-ligatures Определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится
font-variant-numeric Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров
font-variant-position Управляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта
font-weight Определяет вес шрифта

G

grid Сокращенное свойство
grid-area Либо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца
grid-auto-columns Задает размер столбца по умолчанию
grid-auto-flow Указывает, как автоматически размещаемые элементы вставляются в сетку
grid-auto-rows Задает размер строки по умолчанию
grid-column Сокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца
grid-column-end Указывает, где закончить элемент сетки
grid-column-gap Определяет размер зазора между столбцами
grid-column-start Указывает, где начать элемент сетки
grid-gap Сокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор
grid-row Сокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки
grid-row-end Указывает, где закончить элемент сетки
grid-row-gap Определяет размер зазора между строками
grid-row-start Указывает, где начать элемент сетки
grid-template Сокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки
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 Задание верхнего поля элемента
max-height Задает максимальную высоту элемента
max-width Задает максимальную ширину элемента
@media Устанавливает правила стиля для различных типов носителей/устройств/размеров
min-height Задает минимальную высоту элемента
min-width Задает минимальную ширину элемента

O

object-fit Указывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной
object-position Задает выравнивание заменяемого элемента внутри его поля
opacity Задает уровень непрозрачности для элемента
order Задает порядок гибкого элемента по отношению к остальным
orphans Задает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента
outline Задает все свойства структуры в одном объявлении
outline-color Задает цвет контура
outline-offset Смещение контура и его выводит за пределы края границы
outline-style Задает стиль контура
outline-width Задает ширину контура
overflow
Указывает, что происходит, если содержимое переполнено полем элемента
overflow-wrap Указывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле)
overflow-x Указывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента
overflow-y Указывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента

P

padding Задает все свойства заполнения в одном объявлении
padding-bottom Устанавливает нижнее заполнение элемента
padding-left Задает левое заполнение элемента
padding-right Задает правое заполнение элемента
padding-top Задает верхнее заполнение элемента
page-break-after Задает поведение разбиения страницы после элемента
page-break-before Задает поведение разбиения страницы перед элементом
page-break-inside Задает поведение разбиения страниц внутри элемента
perspective Придает элементу с трехмерной позицией некоторую перспективу
perspective-origin Определяет, в какой позиции пользователь смотрит на 3D-позиционный элемент
pointer-events Определяет, реагирует ли элемент на события указателя
position Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный)

Q

quotes Задает тип кавычек для внедренных предложений

R

resize Определяет, является ли (и как) элемент изменяемым по размерам пользователем
right Задает правильное положение позиционного элемента

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-декорирование
top Определяет верхнюю позицию позиционного элемента
transform Применяет 2D или 3D преобразование к элементу
transform-origin Позволяет изменить положение на преобразованных элементах
transform-style Определяет способ визуализации вложенных элементов в трехмерном пространстве
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 Задает порядок стека позиционного элемента