Вы здесь

CSS свойства

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

Свойства текста

hanging-punctuation Устанавливает, может ли знак пунктуации располагаться вне контейнера с текстом вначале или в конце строки текста
hyphens Сообщает браузеру, как расставлять переносы слов в блоке текста
letter-spacing Устанавливает расстояние между символами в пределах элемента
line-height Устанавливает межстрочный интервал текста
tab-size Устанавливает размер отсупа, заданного при помощи символа табуляции
text-align Устанавливает горизонтальное выравнивание текста элемента
text-align-last Устанавливает выравнивание последней строки текста
text-decoration Добавляет оформление текста в виде подчеркивания, перечеркивания, линии над текстом
text-decoration-color Устанавливает цвет линии, которая добавляется через свойство text-decoration
text-decoration-line Устанавливает тип оформления текста - подчеркивание, перечеркивание, линия над текстом
text-decoration-style Устанавливает стиль декоративной линии оформления текста
text-indent Устанавливает величину отступа первой строки текстового блока
text-justify Определяет метод выравнивания текста по ширине
text-overflow Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область
text-transform Управляет преобразованием текста элемента в заглавные или прописные символы
vertical-align Выравнивает элемент по вертикали относительно своего родителя или окружающего текста
white-space Устанавливает, как отображать пробелы между словами в пределах элемента
word-break Определяет, как делать перенос на новую строку внутри слов
word-spacing Устанавливает расстояние между словами в пределах элемента
word-wrap Устанавливает, можно или нельзя переносить на новую строку длинные слова

Шрифт

@font-face Позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя
font Универсальное свойство, позволяющее определить все свойства шрифта за одну декларацию
font-family Задает семейство шрифта, которое будет использоваться для оформления текста содержимого
font-size Определяет размер шрифта.
font-size-adjust Позволяет контролировать размер шрифта, когда первый выбранный шрифт не доступен
font-stretch Устанавливает более широкое или узкое начертание шрифта
font-style Устанавливает стиль начертания шрифта - обычное, курсивное или наклонное
font-variant Определяет, как следует представлять строчные буквы - делать их все прописными уменьшенного размера или оставить без изменений
font-weight Устанавливает насыщенность или "жирность" начертания шрифта

Режимы написания

direction Это свойство определяет направление текста
unicode-bidi Это свойство вместе со свойством direction определяет, как должен располагаться текст используемого языка

Цвет и фон

background Короткое свойство, устанавливающее все свойства фона элемента за одну декларацию
background-attachment Определяет, будет ли фоновое изображение зафиксировано, или оно будет прокручиваться вместе с остальным содержимым страницы
background-blend-mode Устанавливает режим наложения фонового изображения элемента на фоны других элементов.
background-clip Устанавливает область прорисовки фонового изображения
background-color Определяет фоновый цвет элемента
background-image Определяет фоновое изображение элемента
background-origin Устанавливает область позиционирования фонового изображения
background-position Задает начальное положение фонового изображения в пределах содержащего его элемента
background-repeat Определяет, как будет повторяться фоновое изображение, установленное с помощью параметра background-image
background-size Устанавливает размер фонового изображения
color Это свойство определяет цвет текста элемента

Тени и прозрачность

box-shadow Добавляет тень к элементу
opacity Определяет уровень прозрачности элемента
text-shadow Добавляет тень к тексту

Анимация

@keyframes Устанавливает ключевые кадры при анимации элемента
animation Позволяет установить все значения свойств анимации в одном объявлении
animation-delay Устанавливает время ожидания перед запуском анимации
animation-direction Устанавливает направление движения анимации
animation-duration Устанавливает время в секундах или миллисекундах, сколько должен длиться один цикл анимации
animation-fill-mode Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается
animation-iteration-count Устанавливает, сколько раз проигрывать цикл анимации
animation-name Определяет список имен анимаций, которые должны быть применены к выбранному элементу
animation-play-state Определяет, проигрывать анимацию или поставить её на паузу
animation-timing-function Определяет кривую скорости для анимации

Трансформация

backface-visibility Определяет, показывать обратную сторону элемента или нет
perspective Определяет, на сколько пикселей удален 3D элемент от точки обзора
perspective-origin Определяет, где располагается 3D элемент на осях x и y
transform Применяет к элементу 2D или 3D трансформацию
transform-origin Устанавливает исходную точку трансформации элемента
transform-style Определяет, как дочерние элементы будут отображаться в 3D-пространстве
transition Позволяет делать плавные переходы между двумя значениями какого-либо CSS свойства
transition-delay Устанавливает продолжительность задержки перед началом анимации перехода
transition-duration Устанавливает продолжительность анимации перехода
transition-property Определяет CSS свойство, для которого будет применён эффект перехода
transition-timing-function Определяет кривую скорости для анимации перехода

Рамка и контур

border Это свойство позволяет определить все атрибуты рамки HTML элемента за одну декларацию
border-bottom Это свойство позволяет определить все атрибуты нижней рамки HTML элемента за одну декларацию
border-bottom-color Это свойство определяет цвет нижней стороны рамки HTML элемента
border-bottom-left-radius Устанавливает радиус скругления левого нижнего уголка рамки
border-bottom-right-radius Устанавливает радиус скругления правого нижнего уголка рамки
border-bottom-style Это свойство определяет стиль нижней стороны рамки HTML элемента
border-bottom-width Это свойство определяет толщину нижней стороны рамки HTML элемента
border-color Это свойство определяет цвет всех четырех сторон рамки HTML элемента
border-image Позволяет устанавливать изображение вместо обычной рамки вокруг элемента
border-image-outset Устанавливает отступ рамки-изображения за пределы границ элемента
border-image-repeat Устанавливает способ заполнения фоновым изображением пространства между углами рамки
border-image-slice Определяет размер частей изображения, используемых для оформления границ элемента
border-image-source Задаёт путь к изображению, которое будет использоваться в качестве рамки элемента
border-image-width Задаёт ширину изображения для рамки элемента
border-left Это свойство позволяет определить все атрибуты левой рамки HTML элемента за одну декларацию
border-left-color Это свойство определяет цвет левой стороны рамки HTML элемента
border-left-style Это свойство определяет стиль левой стороны рамки HTML элемента
border-left-width Это свойство определяет толщину левой стороны рамки HTML элемента
border-radius Устанавливает радиус скругления уголков рамки
border-right Это свойство позволяет определить все атрибуты правой рамки HTML элемента за одну декларацию
border-right-color Это свойство определяет цвет правой стороны рамки HTML элемента
border-right-style Это свойство определяет стиль правой стороны рамки HTML элемента
border-right-width Это свойство определяет толщину правой стороны рамки HTML элемента
border-style Это свойство определяет стиль всей рамки вокруг элемента
border-top Это свойство позволяет определить все атрибуты верхней рамки HTML элемента за одну декларацию
border-top-color Это свойство определяет цвет верхней стороны рамки HTML элемента
border-top-left-radius Устанавливает радиус скругления левого верхнего уголка рамки
border-top-right-radius Устанавливает радиус скругления правого верхнего уголка рамки
border-top-style Это свойство определяет стиль верхней стороны рамки HTML элемента
border-top-width Это свойство определяет толщину верхней стороны рамки HTML элемента
border-width Это свойство определяет толщину всех четырех сторон рамки HTML элемента
outline Универсальное свойство, которое устанавливает атрибуты контура элемента
outline-color Определяет цвет контура
outline-offset Задает величину отступа контура от элемента
outline-style Определяет стиль контура
outline-width Определяет толщину контура

Размеры

box-sizing Устанавливает алгоритм вычисления ширины и высоты элемента
height Устанавливает высоту блочных или заменяемых элементов
max-height Устанавливает максимальную высоту элемента.
max-width Устанавливает максимальную ширину элемента
min-height Устанавливает минимальную высоту элемента
min-width Устанавливает минимальную ширину элемента
resize Определяет, может ли пользователь изменять размер элемента
width Устанавливает ширину блочных или заменяемых элементов

Внешние и внутренние отступы

margin Универсальное свойство, которое позволяет устанавливать размер всех отступов элемента за одну декларацию
margin-bottom Это свойство устанавливает размер нижнего отступа элемента
margin-left Это свойство устанавливает размер левого отступа элемента
margin-right Это свойство устанавливает размер правого отступа элемента
margin-top Это свойство устанавливает размер верхнего отступа элемента
padding Универсальное свойство, которое позволяет устанавливать размер всех полей элемента за одну декларацию
padding-bottom Это свойство устанавливает размер нижнего поля элемента
padding-left Это свойство устанавливает размер левого поля элемента
padding-right Это свойство устанавливает размер правого поля элемента
padding-top Это свойство устанавливает размер верхнего поля элемента

Позиционирование и отображение

bottom Это свойство определяет расстояние от нижнего края HTML элемента до нижнего края его родительского элемента
clear Это свойство определяет, с какой стороны элемента запрещено его обтекание другими элементами
clip Это свойство определяет область позиционированного элемента, в которой будет показано его содержимое
display Определяет, как элемент должен быть показан в документе
float Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с другой стороны
left Это свойство определяет расстояние от левого края HTML элемента до левого края его родительского элемента, т.е. расстояние его смещения вправо
overflow Определяет, каким образом будет отображаться содержимое элемента, если оно не помещается в область вывода данного элемента
overflow-x Определяет, как будет отображаться содержимое элемента, если оно не помещается слева/справа в область вывода данного элемента
overflow-y Определяет, как будет отображаться содержимое элемента, если оно не помещается вверху/внизу в область вывода данного элемента
position Устанавливает способ позиционирования элемента
right Это свойство определяет расстояние от правого края HTML элемента до правого края его родительского элемента
top Это свойство определяет расстояние от верхнего края HTML элемента до верхнего края его родительского элемента
visibility Определяет видимость элемента
z-index Определяет порядок позиционированных элементов по z-оси

Гибкая компоновка элементов

align-content Выравнивает строки флекс-элементов по вертикали внутри флекс-контейнера
align-items Выравнивает флекс-элементы внутри контейнера по высоте
align-self Устанавливает выравнивание по высоте отдельно взятого флекс-элемента
flex Универсальное свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство
flex-basis Устанавливает базовую ширину флекс-элемента
flex-direction Определяет направление главной оси во флекс-контейнере
flex-flow Позволяет за одну декларацию задать направление главной оси и возможность переноса флекс-элементов на новую строку
flex-grow Определяет коэффициент увеличения ширины флекс-элемента относительно других флекс-элементов
flex-shrink Определяет коэффициент уменьшения ширины флекс-элемента относительно других флекс-элементов
flex-wrap Устанавливает, следует ли флекс-элементам располагаться в одну строку или можно занять несколько строк
justify-content Выравнивает флекс-элементы по ширине флекс-контейнера
order Определяет порядок вывода флекс-элементов внутри флекс-контейнера

Свойства списков

list-style Определяет стиль маркера списка, его положение и его изображение
list-style-image Устанавливает изображение, которое будет использоваться в качестве маркера элементов списка
list-style-position Определяет, как будет размещаться маркер относительно текста
list-style-type Устанавливает вид маркера элементов списка

Свойства таблиц

border-collapse Это свойство определяет, какую модель рамки вокруг ячеек таблицы следует использовать
border-spacing Это свойство определяет расстояние между рамками соседних ячеек таблицы
caption-side Это сойство определяет, где будет отображаться заголовок таблицы
empty-cells Это свойство задает отображение границ и фона в ячейке таблицы, если она пустая
table-layout Определяет, как браузер должен вычислять высоту и ширину ячеек таблицы, основываясь на ее содержимом

Генерируемый контент

content Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует
counter-increment Это свойство позволяет увеличить значение счетчика приращений, который задается свойством counter-reset
counter-reset Это свойство определяет идентификатор, в котором будет храниться счётчик отображений определенного элемента, а также его начальное значение
quotes Устанавливает тип кавычек, который применяется в тексте документа

Вывод на печать

orphans Определяет минимальное число строк текста, которое остается на предыдущей странице при печати документа
page-break-after Добавляет разрыв страницы при печати документа после заданного элемента
page-break-before Добавляет разрыв страницы при печати документа перед заданным элементом
page-break-inside Разрешает или запрещает разрыв страницы внутри заданного элемента при печати документа
widows Определяет минимальное число строк текста, которое располагается на следующей странице при печати документа

Другое

column-count Определяет количество колонок в многоколоночном тексте
column-fill Определяет, как контент должен распределяться внутри колонок.
column-gap Определяет расстояние между колонками в многоколоночном тексте
column-rule Определяет параметры разделительной линии между колонок многоколоночного текста
column-rule-color Устанавливает цвет разделительных линий между колонок в многоколоночном тексте
column-rule-style Определяет стиль разделительных линий между колонок в многоколоночном тексте
column-rule-width Определяет толщину разделительных линий между колонок многоколоночного текста
column-span Определяет, должен ли элемент в многоколоночном тексте занимать ширину всех колонок или только одну из них
column-width Определяет оптимальную ширину колонки в многоколоночном тексте
columns Позволяет одновременно задать ширину и количество колонок многоколоночного текста
cursor Определяет вид курсора при наведении мышки на элемент
filter Позволяет применить художественные эффекты к элементам

Все CSS свойства

top