Властивості CSS — повний довідник українською

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

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

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

Властивість	Опис
all	Перевизначає значення усіх властивостей.
backdrop-filter	Застосовує графічні ефекти (розмиття, насиченість) до області позаду елемента.
bottom	Зміщення відносно нижнього краю.
box-shadow	Додає тінь до елементу.
clear	Встановлює, з якого боку елемента заборонено його обтікання іншими елементами.
clip	Визначає область позиціонованого елемента, в якій буде показано його вміст.
clip-path	Обрізає елемент за заданою фігурою — видима лишається тільки внутрішня частина.
contain	Ізолює елемент від решти документа, дозволяючи браузеру оптимізувати рендеринг.
content-visibility	Дозволяє браузеру пропускати рендеринг вмісту поза екраном.
display	Тип блока для HTML-елемента.
float	Визначає, по якій стороні буде вирівнюватися елемент, при цьому інші елементи будуть обтікати його з інших сторін.
inset	Скорочення для top, right, bottom і left одним рядком.
isolation	Створює новий контекст накладання — ізолює елемент від змішування з тлом.
left	Відступ від лівого краю батьківського елемента.
mask	Маскує елемент зображенням або градієнтом: видимою лишається частина під маскою.
mix-blend-mode	Визначає, як вміст елемента змішується з кольорами того, що лежить під ним.
object-fit	Як зображення <img> або відео <video> має бути вписано у контейнер.
object-position	Як зображення <img> або відео <video> має позиціонуватися по x/y всередині контейнера.
opacity	Прозорость html-елементів
overscroll-behavior	Керує поведінкою на краю прокрутки: чи тягне контейнер за собою батьківський.
place-content	Скорочення для align-content і justify-content — вирівнювання вмісту сітки одним рядком.
place-items	Скорочення для align-items і justify-items — вирівнювання елементів сітки одним рядком.
place-self	Скорочення для align-self і justify-self — вирівнювання окремого елемента сітки.
position	Тип позиціонування елемента.
right	Відступ від правого краю батьківського елемента.
scrollbar-color	Задає кольори смуги прокрутки: повзунка й доріжки.
scrollbar-width	Задає товщину смуги прокрутки: auto, thin або none.
scroll-snap-align	Точка прив'язки елемента при прокручуванні з прилипанням (scroll snap).
scroll-snap-stop	Чи може швидка прокрутка проскочити повз точку прилипання, чи мусить зупинитись.
scroll-snap-type	Вмикає прокрутку з прилипанням: задає вісь і строгість прилипання до точок.
top	Відступ від верхнього краю.
unicode-bidi	Напрямок відображення слів в тексті.
vertical-align	Вертикальне вирівнювання елемента.
visibility	Робить елемент невидимим.
will-change	Підказує браузеру, які властивості елемента невдовзі змінюватимуться.
z-index	Встановлює порядок елементів на z-вісі.
break-after	Як повинні поводитися розриві після генерації контейнеру
break-before	Змушує розбивати на декілька стовпців макет.
break-inside	Визначає стан перерв у контейнері.
color	Задає колір тексту та його оздоблення
filter	Художні ефекти.
hyphens	Повідомляє браузеру, як розставляти переноси слів в блоці тексту.
ime-mode	Контролює стан редактора методів вводу (IME) для текстових полів
line-break	Визначення способу або можливості переривання рядків
orphans	Мінімальна кількість рядків у контейнері, які потрібно залишити у фрагменті перед перервою фрагментації
text-combine-upright	Вказує комбінацію декількох символів на простір одного
text-underline-position	Позиціювання підкреслення
widows	Мінімальна кількість рядків тексту, який розміщується на наступній сторінці під-час друку документа
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	Товщина кордону.
margin	Зовнішній відступ.
margin-bottom	Зовнішній відспуп знизу.
margin-left	Зовнішній відспуп ліворуч.
margin-right	Зовнішній відступ праворуч.
margin-top	Зовнішній відступ зверху..
padding	Відступи навколо вмісту елементу.
padding-bottom	Внутрішній відступ знизу.
padding-left	Внутрішній відступ ліворуч.
padding-right	Внутрішній відступ праворуч.
padding-top	Внутрішній відступ зверху.
overflow	Поведінка переповненого елемента.
overflow-x	Поведінка елемента, переповненого по горизонталі.
overflow-y	Поведінка елемента, переповненого по вертикалі.
aspect-ratio	Задає співвідношення сторін елемента.
height	Встановлює висоту елемента
max-height	Максимально допустима висота елемента.
max-width	Максимально допустима ширина елемента.
min-height	Мінімально допустима висота елемента.
min-width	Встановлює мінімальну ширину елемента.
width	Встановлює ширину елемента
align-content	Вирівнювання рядків гумового контейнера по вертикалі.
align-items	Вирівнювання вмісту рядків гумового контейнера.
align-self	Вирівнювання окремих елементів всередині гумового контейнера.
flex	Розмір гумових елементів.
flex-basis	Початкова довжина флекс елемента.
flex-direction	Напрямок розрашовування гнучких елементів.
flex-flow	Скорочена властивість для властивостей flex-direction і flex-wrap.
flex-grow	Коефіціент збільшення гнучкого елемента.
flex-shrink	Коефіцієнт стиснення флексів в контейнері.
flex-wrap	Спосіб знесення гнучких елемнтів.
justify-content	Вирівнює елементи гнучкого контейнера по горизонталі.
order	Сортування гнучких елементів.
animation	Універсальна властивість, яке задає відразу кілька параметрів анімації.
animation-delay	Встановлює час очікування перед запуском циклу анімації.
animation-direction	Встановлює напрямок руху анімації.
animation-duration	Скільки часу потрібно анімації на один цикл.
animation-fill-mode	Стиль для елемента, коли анімація не відтворюється (коли вона анімація закінчена або має затримку)
animation-iteration-count	Скільки разів анімація повинна повторитися.
animation-name	Задає ім'я @keyframes для анімації
animation-play-state	Зупиняє чи запускає анімацію.
animation-timing-function	Тип прискорення анімації.
keyframes	Встановлює ключові кадри при анімації елемента.
backface-visibility	Приховує віддзеркалення елемента.
offset-distance	Позиція елемента на траєкторії руху: 0% — початок шляху, 100% — кінець.
offset-path	Траєкторія, вздовж якої рухається елемент (motion path).
offset-rotate	Орієнтація елемента під час руху вздовж траєкторії.
perspective	Вказує як 3D-елементи будуть виглядати у перспективі
perspective-origin	Визначає нижню позицію 3D-елементів
rotate	Обертання елемента окремою властивістю, без transform.
scale	Масштабування елемента окремою властивістю, без transform.
transform	2D чи 3D трансформація елементу.
transform-origin	Координати точки, відносно якої буде відбуватися трансформація.
transform-style	Відображення вкладених елементів в 3D-просторі.
translate	Зсув елемента окремою властивістю, без transform.
transition	Встановлює ефект переходу між двома станами елемента.
transition-delay	Встановлює час очікування перед запуском ефекту переходу.
transition-duration	Тривалість ефекту переходу.
transition-property	Встановлює ім'я стильової властивості.
transition-timing-function	Прискорення ефекту трансформації.
direction	Визначає напрямок тексту/напрямок вводу тексту
hanging-punctuation	Чи можуть розділові знаки розміщуватися за межами рядки.
letter-spacing	Визначає інтервал між символами в межах елемента.
line-height	Визначає мінімальну висоту рядка тексту.
overflow-wrap	Вказує, переносити чи ні довгі слова, які не поміщаються по ширині в задану область.
tab-size	Визначає довжину табуляції.
text-align	Горизонтальне вирівнювання тексту.
text-align-last	Вирівнювання останнього рядка тексту.
text-indent	Відступ першого рядка.
text-justify	Спосіб вирівнювання тексту, що вирівняний по ширину.
text-transform	Зміна регістру букв у тексті.
text-wrap	Керує перенесенням тексту: balance вирівнює довжини рядків у заголовках.
user-select	Чи може користувач виділяти курсором текст на сторінці
white-space	Встановлює, як відображати пропуски між словами.
word-break	Тип перенесення слів.
word-spacing	Встановлює інтервал між словами.
word-wrap	Вказує, переносити чи ні довгі слова.
writing-mode	Встановлює напрямок тексту на сторінці - по горизонталі або вертикалі.
box-decoration-break	Стилізація окремих фрагментів елемента
text-decoration	Оздоблення тексту.
text-decoration-color	Колір оздоблення тексту.
text-decoration-line	Позиція декоративної лінії.
text-decoration-style	Стиль декоративної лінії.
text-decoration-thickness	Товщина лінії підкреслення чи перекреслення.
text-shadow	Додає тінь до тексту.
text-underline-offset	Відстань підкреслення від тексту.
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	Товщину шрифту
text-orientation	Орієнтацію текстових символів у рядку
caption-side	Визначає розміщення заголовку таблиці.
empty-cells	Приховує в таблиці порожні комірки.
table-layout	Задає алгоритм формування макету таблиці.
counter-increment	Прирощує один або кілька лічильників.
counter-reset	Створює або скидає один або кілька лічильників
list-style	Задає основні властивості списку.
list-style-image	Встановлює зображення замість мітки списку.
list-style-position	Розміщення мітки списку відносно тексту
list-style-type	Тип мітки списку.
accent-color	Колір акценту стандартних елементів форм: чекбоксів, радіокнопок, повзунків.
appearance	Вмикає або вимикає системний вигляд елементів форм.
box-sizing	Задає алгоритму розрахунку ширини і висоти елемента.
caret-color	Колір текстового курсора (каретки) у полях введення.
color-scheme	Повідомляє браузеру, у яких колірних схемах елемент уміє рендеритись (світла/темна).
content	Змінює вміст елемента після формування сторінки.
cursor	Визначає тип курсора, який буде відображатися
nav-down	Вказує, де для навігації використовується клавіша зі стрілкою вниз
nav-index	Визначає порядок табуляції для елемента
nav-left	Вказує, де для навігації використовується клавіша зі стрілкою вліво
nav-right	Вказує, де для навігації використовується клавіша зі стрілкою вправо
nav-up	Вказує, де для навігації використовується клавіша зі стрілкою вгору
outline	Зовнішній контур навколо елементу.
outline-color	Колір контуру елемента.
outline-offset	Відстань між контуром та краєм елемента.
outline-style	Стиль контуру елемента.
outline-width	Товщину контуру елемента.
pointer-events	Чи реагує елемент на події вказівника (кліки, наведення).
resize	Дозволяє змінювати розміри елемента.
scroll-behavior	Плавна чи миттєва прокрутка при переходах за якорями і scrollTo().
scroll-margin	Відступ навколо елемента при прокручуванні до нього (якорі, scrollIntoView).
scroll-padding	Внутрішні відступи області прокрутки — «мертва зона» біля країв (шапки, панелі).
text-overflow	Обрізання тексту, що виходить за межі елемента.
touch-action	Які сенсорні жести браузер обробляє сам (прокрутка, зум), а які віддає скрипту.
column-count	Кількість колонок в на які повинен бути розділений елемент.
column-fill	Спосіб заповнення стовпчиків в багатоколонковому тексті.
column-gap	Проміжок між колонками.
column-rule	Визначає властивості лінії між колонками.
column-rule-color	Вказує колір лінії.
column-rule-style	Визначає вигляд лінії.
column-rule-width	Товщина лінії між колонками
columns	Ширина та кількість колонок в багатоколонковому тексті.
column-span	Скільки колонок повинен займати елемент
column-width	Ширина стовпчика в багатоколонковому тексті.
marks	Відображає спеціальні мітки на сторінці при друку документа
page-break-after	Додає розрив сторінки при друку документа після заданого елемента
page-break-before	Додає розрив сторінки при друку документа перед заданим елементом.
page-break-inside	Додає розрив сторінки при друку документа всередині заданого елемента.
quotes	Вказує тип лапок для цитат.
gap	Проміжок між рядками та колонками у flex-, grid- і колонкових контейнерах.
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	Визначає розміри рядків
row-gap	Проміжок між рядками flex- або grid-контейнера.
container	Скорочення container-name і container-type — оголошує елемент контейнером для @container-запитів.
container-name	Ім'я контейнера, до якого звертаються @container-запити.
container-type	Робить елемент контейнером запитів: нащадки можуть реагувати на ЙОГО розмір через @container.
view-transition-name	Ім'я елемента для View Transitions — плавних переходів між станами сторінки.