CSS свойства

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

Шрифт

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

Анимация

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

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

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

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

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Определяет кривую скорости для анимации перехода

Цвет и фон

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

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

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Определяет толщину контура

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

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

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

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

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

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

Размеры

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

Другое

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

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

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

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

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

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

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Устанавливает, можно или нельзя переносить на новую строку длинные слова

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

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

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

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

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

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