Довідник по CSS властивостям

Каскадні таблиці стилів (англ. Cascading Style Sheets) — спеціальна мова, що використовується для запису оформлення сторінок, написаних мовами розмітки даних.

Концепція стилів працює так - текст спочатку виводиться, а потім форматується, за допомогою CSS стилів.

Cтилі дають змогу розмежувати вміст веб сторінки від її оформлення.


Значення Опи значення
align-content Вирівнювання рядків гумового контейнера по вертикалі.
align-items Вирівнювання вмісту рядків гумового контейнера.
align-self Вирівнювання окремих елементів всередині гумового контейнера.
all Перевизначає значення усіх властивостей.
animation Універсальна властивість, яке задає відразу кілька параметрів анімації.
animation-delay Встановлює час очікування перед запуском циклу анімації.
animation-direction Встановлює напрямок руху анімації.
animation-duration Скільки часу потрібно анімації на один цикл.
animation-fill-mode Стиль для елемента, коли анімація не відтворюється (коли вона анімація закінчена або має затримку)
animation-iteration-count Скільки разів анімація повинна повторитися.
animation-name Задає ім'я @keyframes для анімації
animation-play-state Зупиняє чи запускає анімацію.
animation-timing-function Тип прискорення анімації.
backface-visibility Приховує віддзеркалення елемента.
background Універсальна властивість для всіх властивостей background
background-attachment Визначає поведінку фонового зображення при прокручуванні сторінки.
background-blend-mode Задає режим накладання декількох фонів.
background-clip Визначає як тло має виводитися під гранями.
background-color Встановлює цілісний колір тла.
background-image Вказує одне або кілька фонових зображень.
background-origin Визначає позицію тла.
background-position Вказує початкову позицію (зміщення) фонового зображення.
background-repeat Спосіб повторення фонового зображення.
background-size Вказує розмір тла.
border Універсальна властивість для всіх властивостей border.
border-bottom Універсальна властивість для всіх властивостей 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
border-left-color Встановлює колір лівого кордону.
border-left-style Встановлює стиль лівого кордону.
border-left-width Задає товщину лівої границі
border-radius Універсальна властивість для всіх властивостей border-*-radius
border-right Універсальна властивість для всіх властивостей border-right.
border-right-color Встановлює колір правого кордону.
border-right-style Встановлює стиль правого кордону.
border-right-width Задає товщину правого кордону.
border-spacing Відстань між кордонами сусідніх комірок.
border-style Стиль кордонів елементу.
border-top Універсальна властивість для всіх інших властивостей 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 Визначає стан перерв у контейнері.
caption-side Визначає розміщення заголовку таблиці.
clear Встановлює, з якого боку елемента заборонено його обтікання іншими елементами.
clip Визначає область позиціонованого елемента, в якій буде показано його вміст.
color Задає колір тексту та його оздоблення
column-count Кількість колонок в на які повинен бути розділений елемент.
column-fill Спосіб заповнення стовпчиків в багатоколонковому тексті.
column-gap Проміжок між колонками.
column-rule Визначає властивості лінії між колонками.
column-rule-color Вказує колір лінії.
column-rule-style Визначає вигляд лінії.
column-rule-width Товщина лінії між колонками
columns Ширина та кількість колонок в багатоколонковому тексті.
column-span Скільки колонок повинен займати елемент
column-width Ширина стовпчика в багатоколонковому тексті.
content Змінює вміст елемента після формування сторінки.
counter-increment Прирощує один або кілька лічильників.
counter-reset Створює або скидає один або кілька лічильників
cursor Визначає тип курсора, який буде відображатися
direction Визначає напрямок тексту/напрямок вводу тексту
display Тип блока для HTML-елемента.
empty-cells Приховує в таблиці порожні комірки.
filter Художні ефекти.
flex Розмір гумових елементів.
flex-basis Початкова довжина флекс елемента.
flex-direction Напрямок розрашовування гнучких елементів.
flex-flow Скорочена властивість для властивостей flex-direction і flex-wrap.​
flex-grow Коефіціент збільшення гнучкого елемента.
flex-shrink Коефіцієнт стиснення флексів в контейнері.
flex-wrap Спосіб знесення гнучких елемнтів.
float Визначає, по якій стороні буде вирівнюватися елемент, при цьому інші елементи будуть обтікати його з інших сторін.
font Універсальна властивість для всіх інших властивостей font
font-face Завантаження власного шрифту
font-family Задає сімейство шрифту.
font-feature-settings Контроль над функціями OpenType.
font-feature-values Дозволяє використовувати загальну назву в властивості font-variant-alternates​ для функцій, активізованих по-різному в OpenType.
font-kerning Зміни інтервалу між глифами.
font-language-override Дозволяє керувати використанням конкретних гліфів для конкретної мови.
font-size Розмір тексту.
font-size-adjust Зберігає читаємість тексту при ви користуванні резервного шрифту
font-stretch Встановлює вигляд шрифту
font-style Стиль шрифту.
font-synthesis Синтез шрифту, коли для цієї мети він не має спеціального гліфа.​
font-variant Контроль стилістичних функцій шрифтів.
font-variant-alternates Дозволяє керувати вибором альтернативних гліфів
font-variant-caps Альтернативні гліфи для маленьких літер.
font-variant-east-asian Заміщення гліфів у східноазіатських текстах.
font-variant-ligatures Керування лігатурами у шрифті
font-variant-numeric Стиль відображення чисел на сторінці
font-variant-position Введення індексів гліфів
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 Повідомляє браузеру, як розставляти переноси слів в блоці тексту.
ime-mode Контролює стан редактора методів вводу (IME) для текстових полів
justify-content Вирівнює елементи гнучкого контейнера по горизонталі.
keyframes Встановлює ключові кадри при анімації елемента.
left Відступ від лівого краю батьківського елемента.
letter-spacing Визначає інтервал між символами в межах елемента.
line-break Визначення способу або можливості переривання рядків
line-height Визначає мінімальну висоту рядка тексту.
list-style Задає основні властивості списку.
list-style-image Встановлює зображення замість мітки списку.
list-style-position Розміщення мітки списку відносно тексту
list-style-type Тип мітки списку.
margin Зовнішній відступ.
margin-bottom Зовнішній відспуп знизу.
margin-left Зовнішній відспуп ліворуч.
margin-right Зовнішній відступ праворуч.
margin-top Зовнішній відступ зверху..
marks Відображає спеціальні мітки на сторінці при друку документа
max-height Максимально допустима висота елемента.
max-width Максимально допустима ширина елемента.
min-height Мінімально допустима висота елемента.
min-width Встановлює мінімальну ширину елемента.
nav-down Вказує, де для навігації використовується клавіша зі стрілкою вниз
nav-index Визначає порядок табуляції для елемента
nav-left Вказує, де для навігації використовується клавіша зі стрілкою вліво
nav-right Вказує, де для навігації використовується клавіша зі стрілкою вправо
nav-up Вказує, де для навігації використовується клавіша зі стрілкою вгору
opacity Прозорость html-елементів
order Сортування гнучких елементів.
orphans Мінімальна кількість рядків у контейнері, які потрібно залишити у фрагменті перед перервою фрагментації
outline Зовнішній контур навколо елементу.
outline-color Колір контуру елемента.
outline-offset Відстань між контуром та краєм елемента.
outline-style Стиль контуру елемента.
outline-width Товщину контуру елемента.
overflow Поведінка переповненого елемента.
overflow-wrap Вказує, переносити чи ні довгі слова, які не поміщаються по ширині в задану область.
overflow-x Поведінка елемента, переповненого по горизонталі.
overflow-y Поведінка елемента, переповненого по вертикалі.
padding Відступи навколо вмісту елементу.
padding-bottom Внутрішній відступ знизу.
padding-left Внутрішній відступ ліворуч.
padding-right Внутрішній відступ праворуч.
padding-top Внутрішній відступ зверху.
page-break-after Додає розрив сторінки при друку документа після заданого елемента
page-break-before Додає розрив сторінки при друку документа перед заданим елементом.
page-break-inside Додає розрив сторінки при друку документа всередині заданого елемента.
perspective Вказує як 3D-елементи будуть виглядати у перспективі
perspective-origin Визначає нижню позицію 3D-елементів
position Тип позиціонування елемента.
quotes Вказує тип лапок для цитат.
resize Дозволяє змінювати розміри елемента.​
right Відступ від правого краю батьківського елемента.
table-layout Задає алгоритм формування макету таблиці.
tab-size Визначає довжину табуляції.
text-align Горизонтальне вирівнювання тексту.
text-align-last Вирівнювання останнього рядка тексту.
text-combine-upright Вказує комбінацію декількох символів на простір одного
text-decoration Оздоблення тексту.
text-decoration-color Колір оздоблення тексту.
text-decoration-line Позиція декоративної лінії.
text-decoration-style Стиль декоративної лінії.
text-indent Відступ першого рядка.
text-justify Спосіб вирівнювання тексту, що вирівняний по ширину.
text-orientation Орієнтацію текстових символів у рядку
text-overflow Обрізання тексту, що виходить за межі елемента.
text-shadow Додає тінь до тексту.
text-transform Зміна регістру букв у тексті.
text-underline-position Позиціювання підкреслення
top Відступ від верхнього краю.
transform 2D чи 3D трансформація елементу.
transform-origin Координати точки, відносно якої буде відбуватися трансформація.
transform-style Відображення вкладених елементів в 3D-просторі.
transition Встановлює ефект переходу між двома станами елемента.
transition-delay Встановлює час очікування перед запуском ефекту переходу.
transition-duration Тривалість ефекту переходу.
transition-property Встановлює ім'я стильової властивості.
transition-timing-function Прискорення ефекту трансформації.
unicode-bidi Напрямок відображення слів в тексті.
user-select Чи може користувач виділяти курсором текст на сторінці
vertical-align Вертикальне вирівнювання елемента.
visibility Робить елемент невидимим.
white-space Встановлює, як відображати пропуски між словами.
widows Мінімальна кількість рядків тексту, який розміщується на наступній сторінці під-час друку документа
width Встановлює ширину елемента
word-break Тип перенесення слів.
word-spacing Встановлює інтервал між словами.
word-wrap Вказує, переносити чи ні довгі слова.
writing-mode Встановлює напрямок тексту на сторінці - по горизонталі або вертикалі.
z-index Встановлює порядок елементів на z-вісі.