CSS Справочное руководство

NoteСправочное руководство по CSS на Example Tutorial было протестировано во всех основных браузерах.

Свойства CSS

Группа свойств CSS:

Столбец "CSS" указывает, в какой версии CSS определено свойство (CSS1, CSS2 или CSS3).

Свойства анимации

Свойство Описание CSS
@keyframes Определяет анимацию. Имя анимации, заданное с помощью @keyframes, используется свойством animation-name. 3
animation Сокращённое свойство. Получает или задаёт эффекты анимации, применённые к объекту. 3
animation-name Получает или задаёт имя анимации, применяемой к объекту. Его необходимо использовать с правилом @keyframes, так как имя анимации определяется @keyframes. 3
animation-duration Получает или задаёт продолжительность анимации объекта. 3
animation-timing-function Получает или задаёт тип перехода анимации объекта. 3
animation-delay Получает или задаёт время задержки анимации объекта. 3
animation-iteration-count Возвращает или задаёт количество циклов анимации объекта. 3
animation-direction Возвращает или задаёт, воспроизводится ли анимация объекта в обратном направлении во время цикла. 3
animation-play-state Возвращает или задаёт состояние анимации объекта. 3

Свойства фона

Свойство Описание CSS
background Свойство-сокращение. Задаёт свойства фона объекта. 1
background-attachment Задаёт или возвращает, прокручивается ли фоновое изображение вместе с содержимым объекта или является фиксированным. Сначала должно быть задано свойство background-image. 1
background-color Задаёт или возвращает цвет фона объекта. 1
background-image Задаёт или возвращает фоновое изображение объекта. 1
background-position Задаёт или возвращает позицию фонового изображения объекта. Сначала должно быть задано свойство background-image. 1
background-repeat Задаёт или возвращает, как фоновое изображение повторяется или заполняется. Сначала должно быть задано свойство background-image. 1
background-clip Задаёт область, в которую обрезается фоновое изображение объекта. 3
background-origin Задаёт или возвращает исходную точку отсчёта (позицию), используемую при вычислении background-position для фонового изображения объекта. 3
background-size Возвращает или задаёт размер фонового изображения объекта. 3

Свойства границы и контура

Свойство Описание CSS
border Свойство-сокращение. Задаёт свойства границы объекта. 1
border-bottom Свойство-сокращение. Задаёт характеристики нижней границы объекта. 1
border-bottom-color Задаёт или возвращает цвет нижней границы объекта. 1 
border-bottom-style Задаёт или возвращает стиль нижней границы объекта. 1
border-bottom-width Задаёт или возвращает ширину нижней границы объекта. 1
border-color Задаёт или возвращает цвет границы объекта. 1
border-left Свойство-сокращение. Задаёт свойства левой границы объекта. 1
border-left-color Задаёт или возвращает цвет левой границы объекта. 1
border-left-style Задаёт или возвращает стиль левой границы объекта. 1
border-left-width Задаёт или возвращает ширину левой границы объекта. 1
border-right Свойство-сокращение. Задаёт свойства правой границы объекта. 1
border-right-color Задаёт или возвращает цвет правой границы объекта. 1
border-right-style Устанавливает или возвращает стиль правой границы объекта. 1
border-right-width Устанавливает или возвращает ширину правой границы объекта. 1
border-style Устанавливает или возвращает стиль границы объекта. 1
border-top Сокращённое свойство. Устанавливает характеристики верхней границы объекта. 1
border-top-color Устанавливает или возвращает цвет верхней границы объекта. 1
border-top-style Устанавливает или возвращает стиль верхней границы объекта. 1
border-top-width Устанавливает или возвращает ширину верхней границы объекта. 1
border-width Устанавливает или возвращает ширину границы объекта. 1
outline Сокращённое свойство. Устанавливает или возвращает внешний контур объекта. 2
outline-color Устанавливает или возвращает цвет контура снаружи объекта. 2
outline-style Устанавливает или возвращает стиль контура снаружи объекта. 2
outline-width Задаёт или возвращает ширину контура за пределами объекта. 2
border-bottom-left-radius Устанавливает или возвращает скруглённую границу нижнего левого угла объекта. Предоставляются два параметра, разделённые пробелом. Каждый параметр принимает одно значение; первое значение представляет горизонтальный радиус, а второе — вертикальный радиус. Если второй параметр опущен, по умолчанию используется первый параметр. 3
border-bottom-right-radius Устанавливает или возвращает скруглённую границу нижнего правого угла объекта. 3
border-image Устанавливает или возвращает стиль границы объекта с использованием изображения для её заполнения. 3
border-image-outset Задаёт величину, на которую изображение границы выходит за границу. 3
border-image-repeat Указывает, должно ли изображение границы повторяться, растягиваться или округляться. 3
border-image-slice Задаёт смещение внутрь для изображения границы. 3
border-image-source Задаёт изображение, которое будет использоваться вместо стиля границы, заданного свойством border-style. 3
border-image-width Указывает ширину границы изображения. 3
border-radius Устанавливает или извлекает значение, указывающее, использует ли объект скруглённые границы. 3
border-top-left-radius Определяет форму верхней левой границы. 3
border-top-right-radius Определяет форму верхней правой границы. 3
box-decoration-break Указывает, переносятся ли строчные элементы. 3
box-shadow Добавляет одну или несколько теней к блоку. 3

Свойства блока

Свойство Описание CSS
overflow-x Указывает, следует ли обрезать левый/правый края содержимого, если оно выходит за пределы области содержимого элемента. 3
overflow-y Указывает, следует ли обрезать верхний/нижний края содержимого, если оно выходит за пределы области содержимого элемента. 3
overflow-style Задаёт предпочтительный способ прокрутки для переполненных элементов. 3
rotation Поворачивает элемент вокруг точки, определяемой свойством rotation-point. 3
rotation Определяет точку смещения от верхнего левого края границы. 3

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

Свойство Описание CSS
color-profile Позволяет использовать спецификации, отличные от цветового профиля источника по умолчанию. 3
opacity Устанавливает уровень прозрачности элемента. 3
rendering-intent Позволяет использовать спецификации, отличные от заданного по умолчанию метода рендеринга цветового профиля. 3

Свойства padding

Свойство Описание CSS
padding Задает все свойства padding в одном объявлении. 1
padding-bottom Задает нижний внутренний отступ элемента. 1
padding-left Задает левый внутренний отступ элемента. 1
padding-right Задает правый внутренний отступ элемента. 1
padding-top Задаёт верхний внутренний отступ элемента. 1

Свойства содержимого страницы мультимедиа

Свойство Описание CSS
bookmark-label Задаёт метку закладки. 3
bookmark-level Задаёт уровень закладки. 3
bookmark-target Задаёт цель ссылки закладки. 3
float-offset Сдвигает плавающие элементы в противоположном направлении; они всегда имеют float. 3
hyphenate-after Задаёт минимальное количество символов после символа переноса в слове с переносами. 3
hyphenate-before Задаёт минимальное количество символов до символа переноса в слове с переносами. 3
hyphenate-character Задаёт строку, отображаемую при переносе. 3
hyphenate-lines Указывает максимальное количество последовательных строк с переносами в элементе. 3
hyphenate-resource Задаёт список внешних ресурсов через запятую, которые могут помочь определить точки переноса браузера. 3
hyphens Задаёт, как разбивать слова для улучшения компоновки абзаца. 3
image-resolution Задает правильное разрешение изображения. 3
marks Добавляет метки обрезки и/или крестообразные метки в документ. 3
string-set   3

Свойства размеров

Свойство Описание CSS
height Задаёт высоту элемента. 1
max-height Задает максимальную высоту элемента. 2
max-width Задает максимальную ширину элемента. 2
min-height Устанавливает минимальную высоту элемента. 2
min-width Устанавливает минимальную ширину элемента. 2
width Задаёт ширину элемента. 1

Свойства гибкой блочной модели (новые)

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

Свойства модели гибкого контейнера (устаревшие)

Свойство Описание CSS
box-align Определяет, как выравнивать дочерние элементы контейнера. 3
box-direction Задаёт направление, в котором отображаются дочерние элементы блока. 3
box-flex Задаёт, являются ли дочерние элементы блока гибкими или фиксированного размера. 3
box-flex-group Назначает гибкие элементы Flex-группе. 3
box-lines Указывает, следует ли выполнять перенос на новую строку/столбец, когда в родительском блоке заканчивается место. 3
box-ordinal-group Указывает порядок отображения дочерних элементов блока. 3
box-orient Указывает, должны ли дочерние элементы блока располагаться горизонтально или вертикально. 3
box-pack Указывает горизонтальное и вертикальное положение горизонтальных блоков внутри вертикального блока. 3

Свойства шрифта

Свойство Описание CSS
font Устанавливает все свойства шрифта в одном объявлении. 1
font-family Задаёт семейство шрифтов для текста. 1
font-size Задаёт размер шрифта текста. 1
font-style Задаёт стиль шрифта текста. 1
font-variant Задаёт стиль шрифта текста. 1
font-weight Задаёт насыщенность шрифта. 1
@font-face Правило, позволяющее веб-сайтам загружать и использовать шрифты, отличные от «Web-safe» шрифтов. 3
font-size-adjust Задаёт значение аспекта для элемента. 3
font-stretch Сжимает или растягивает текущее семейство шрифтов. 3

Свойства генерируемого содержимого

Свойство Описание CSS
content Используется с псевдоэлементами :before и :after для вставки генерируемого содержимого. 2
counter-increment Увеличивает или уменьшает один или несколько счётчиков. 2
counter-reset Создаёт или сбрасывает один или несколько счётчиков. 2
quotes Задаёт тип кавычек для вложенных ссылок. 2
crop Позволяет замещаемому элементу действовать как объект, который заменяет прямоугольную область всего объекта. 3
move-to Удаляет элемент из потока, а затем снова вставляет его в более поздней точке документа. 3
page-policy Определяет строковое значение заданного элемента, применимое к счетчикам на основе страницы. 3

Свойства Grid

Свойство Описание CSS
grid-column Задает начальную и конечную позиции столбца элемента сетки. 3
grid-row Задает начальную и конечную позиции строки элемента сетки. 3

Свойства гиперссылок

Свойство Описание CSS
target Сокращенное свойство, задающее свойства target-name, target-new и target-position. 3
target-name Указывает, где открывать ссылку (целевая позиция). 3
target-new Указывает, открывает ли новая целевая ссылка новое окно или новую вкладку в существующем окне. 3
target-position Указывает, куда следует поместить новую целевую ссылку. 3

Свойства Linebox

Свойство Описание CSS
alignment-adjust Позволяет более точно выравнивать элементы. 3
alignment-baseline Как выравниваются элементы строчного уровня, заданные их родительским элементом. 3
baseline-shift Позволяет перемещать dominant-baseline относительно dominant-baseline. 3
dominant-baseline Задаёт scaled-baseline-table 3
drop-initial-after-adjust Задает начальную точку выравнивания основной точки соединения буквицы. 3
drop-initial-after-align Калибрует настройку начальной линии внутри строки; то есть блок с буквицей использует основную точку соединения. 3
drop-initial-before-adjust Задает начальную точку выравнивания вторичной точки соединения буквицы. 3
drop-initial-before-align Калибрует настройку начальной линии внутри строки; то есть блок с буквицей использует вторичную точку соединения. 3
drop-initial-size Управляет буквицей начальной буквы. 3
drop-initial-value Активирует начальный эффект в стиле выпадающего списка. 3 
inline-box-align Задаёт выравнивание строк внутри многострочного строчного блока, у которых есть предшествующие и последующие строчные элементы. 3
line-stacking Свойство-сокращение, которое задаёт свойства line-stacking-strategy, line-stacking-ruby и line-stacking-shift. 3
line-stacking-ruby Задаёт метод наложения строк, содержащих элементы Ruby-аннотации, относительно блочных элементов. 3
line-stacking-shift Задаёт способ наложения блочных элементов, содержащихся в строках базового сдвига. 3
line-stacking-strategy Задаёт способ наложения строчных боксов, которые внутри содержат блочные элементы. 3
text-height Задаёт размер в направлении следования блоков для области текстового содержимого строчного бокса. 3

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

Свойство Описание CSS
list-style Задаёт все свойства списка в одном объявлении. 1
list-style-image Задаёт изображение в качестве маркера элемента списка. 1
list-style-position Задаёт положение размещения маркера элемента списка. 1
list-style-type Задаёт тип маркера элемента списка. 1

Свойства внешних отступов

Свойство Описание CSS
margin Задаёт все свойства margin в одном объявлении. 1
margin-bottom Задаёт нижний отступ элемента. 1
margin-left Задаёт левый отступ элемента. 1
margin-right Задаёт правый отступ элемента. 1
margin-top Задаёт верхний отступ элемента. 1

Свойства бегущей строки

Свойство Описание CSS
marquee-direction Задает направление перемещения содержимого. 3
marquee-play-count Задает, сколько раз перемещается содержимое. 3
marquee-speed Задает скорость прокрутки содержимого. 3
marquee-style Задает стиль перемещения содержимого. 3

Свойства многоколоночной верстки

Свойство Описание CSS
column-count Определяет количество столбцов, на которые должен быть разделён элемент. 3
column-fill Определяет способ заполнения колонок. 3
column-gap Определяет промежуток между столбцами. 3
column-rule Сокращенное свойство для задания всех свойств column-rule-*. 3
column-rule-color Задаёт цвет линии между колонками. 3
column-rule-style Задаёт стиль линии между колонками. 3
column-rule-width Задаёт ширину линии между колонками. 3
column-span Определяет, сколько столбцов должен охватывать элемент. 3
column-width Задаёт ширину колонок. 3
columns Сокращённое свойство задаёт ширину колонок и количество колонок. 3

Свойства страничных медиа

Свойство Описание CSS
fit Если ни свойство width, ни свойство height не равно auto, даёт подсказку о том, как масштабировать замещаемый элемент. 3
fit-position Определяет выравнивание объектов внутри блока. 3
image-orientation Задаёт поворот вправо или по часовой стрелке, который агент пользователя применяет к изображению. 3
page Задает конкретный тип страницы, на которой должен отображаться элемент. 3
size Задаёт размер и ориентацию содержимого страницы, содержащего блок. 3

Свойства позиционирования

Свойство Описание CSS
bottom Задаёт смещение между нижней границей внешнего отступа позиционированного элемента и нижним краем его содержащего блока. 2
clear Указывает, с какой стороны элемента не допускаются другие плавающие элементы. 1
clip Обрезает абсолютно позиционированные элементы. 2
cursor Задает тип (форму) отображаемого курсора. 2
display Задаёт тип блока, который должен генерировать элемент. 1
float Указывает, должен ли блок быть плавающим. 1
left Задаёт смещение между левой границей внешнего отступа позиционированного элемента и левым краем его содержащего блока. 2
overflow
 Определяет, что происходит, когда содержимое выходит за пределы блока элемента. 2
position Задаёт тип позиционирования элемента. 2
right Задаёт смещение между правой границей внешнего отступа позиционированного элемента и правым краем его содержащего блока. 2
top Задаёт смещение между верхней границей внешнего отступа позиционированного элемента и верхним краем его содержащего блока. 2
visibility Указывает, является ли элемент видимым. 2
z-index Устанавливает порядок наложения элемента. 2

Свойства печати

Свойство Описание CSS
orphans Задает минимальное количество строк, которые должны оставаться в нижней части страницы при разрыве страницы внутри элемента. 2
page-break-after Задает поведение при разрыве страницы после элемента. 2
page-break-before Задает поведение при разрыве страницы перед элементом. 2
page-break-inside Задает поведение при разрыве страницы внутри элемента. 2
widows Задает минимальное количество строк, которые должны оставаться в верхней части страницы при разрыве страницы внутри элемента. 2

Свойства Ruby

Свойство Описание CSS
ruby-align Управляет выравниванием текста Ruby и содержимого основы Ruby относительно друг друга. 3
ruby-overhang Когда текст Ruby превышает ширину базы Ruby, определяет, разрешено ли тексту Ruby частично нависать над любым соседним текстом, кроме его собственной базы. 3
ruby-position Его основа управляет положением текста Ruby. 3
ruby-span Управляет поведением объединения элементов аннотации. 3

Свойства речи

Свойство Описание CSS
mark Сокращённое свойство, задающее свойства mark-before и mark-after. 3
mark-after Позволяет связывать именованные маркеры с аудиопотоком. 3
mark-before Позволяет связывать именованные маркеры с аудиопотоком. 3
phonemes Задаёт фонетическое произношение в соответствующем элементе, содержащем текст. 3
rest Сокращённое свойство, которое задаёт свойства rest-before и rest-after. 3
rest-after После произнесения содержимого элемента указывает, следует ли сделать паузу или соблюдать просодическую границу. 3
rest-before Перед произнесением содержимого элемента указывает, следует ли сделать паузу или соблюдать просодическую границу. 3
voice-balance Задаёт баланс между левым и правым каналами. 3
voice-duration Указывает продолжительность, необходимую для представления содержимого выбранного элемента. 3
voice-pitch Задаёт среднюю высоту тона (частоту) говорящего голоса. 3
voice-pitch-range Определяет вариацию средней высоты тона. 3
voice-rate Управляет скоростью речи 3
voice-stress Указывает интенсивность акцента. 3
voice-volume В синтезе речи обозначает амплитуду выходного сигнала. 3

Атрибуты таблицы

Свойство Описание CSS
border-collapse Определяет, следует ли объединять границы таблицы. 2
border-spacing Задаёт расстояние между границами соседних ячеек. 2
caption-side Задает положение заголовка таблицы. 2
empty-cells Определяет, отображать ли границы и фон у пустых ячеек таблицы. 2
table-layout Задает алгоритм макетирования, используемый для таблицы. 2

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

Свойство Описание CSS
color Задает цвет текста. 1
Направление Задает направление / направление письма текста. 2
letter-spacing Задает межсимвольный интервал. 1
line-height Задаёт высоту строки 1
text-align Задает горизонтальное выравнивание текста. 1
text-decoration Задает эффект оформления, добавляемый к тексту. 1
text-indent Задаёт отступ первой строки текстового блока. 1
text-transform Управляет регистром текста. 1
unicode-bidi   2
vertical-align Задает вертикальное выравнивание элемента. 1
white-space Задаёт способ обработки пробельных символов внутри элемента. 1
word-spacing Задает интервал между словами. 1
text-emphasis Применяет знаки выделения к тексту элемента и задает цвет переднего плана знаков выделения. 1
hanging-punctuation Указывает, может ли знак препинания выходить за пределы строчного бокса. 3
punctuation-trim Определяет, следует ли удалять знак пунктуации. 3
text-align-last Выравнивание последней строки, когда для text-align установлено значение justify. 3
text-justify Укажите метод выравнивания, когда для text-align установлено значение justify. 3
text-outline Задаёт обводку текста. 3
text-overflow Укажите, что должно происходить, когда текст выходит за пределы содержащего элемента. 3
text-shadow Добавляет тень к тексту. 3
text-wrap Задаёт правила переноса текста. 3
word-break Задаёт правила переноса строк для текста, не относящегося к CJK. 3
word-wrap Задает, должен ли браузер переносить слишком длинные слова. 3

Свойства 2D/3D-преобразований

Свойство Описание CSS
transform Применяется к элементам с 2D- или 3D-преобразованиями. 3
transform-origin Позволяет изменить положение преобразованного элемента. 3
transform-style Определяет, как вложенные элементы отображаются в 3D-пространстве. 3
perspective Задаёт способ отображения 3D-элементов в перспективе. 3
perspective-origin Задает нижнюю позицию 3D-элемента. 3
backface-visibility Определяет, должен ли элемент быть видимым, когда он не обращен к экрану. 3

Свойства переходов

Свойство Описание CSS
transition Это свойство является сокращением для transition-property, transition-duration, transition-timing-function и transition-delay. 3
transition-property Задает свойства CSS, используемые для перехода. 3
transition-duration Задаёт длительность перехода. 3
transition-timing-function Задаёт функцию синхронизации перехода. 3
transition-delay Задает время, когда начинается переход. 3

Свойства пользовательского интерфейса

Свойство Описание CSS
appearance Определяет стиль внешнего вида элемента. 3
box-sizing Позволяет задавать определенные элементы определенным образом, чтобы они помещались в область. 3
icon Задает значок для элемента. 3
nav-down Укажите позицию для навигации вниз, когда пользователь нажимает клавишу со стрелкой вниз. 3
nav-index Указывает порядок навигации (табуляции). 3
nav-left Укажите позицию для навигации влево, когда пользователь нажимает клавишу со стрелкой влево. 3
nav-right Укажите позицию для перехода вправо, когда пользователь нажимает клавишу со стрелкой вправо. 3
nav-up Укажите позицию для перехода вверх, когда пользователь нажимает клавишу со стрелкой вверх. 3
outline-offset Установите смещение контура снаружи края границы. 3
resize Определяет, можно ли изменять размер элемента. 3
Другие расширения