Довідник по CSS властивостях(атрибутах)

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

Команди CSS можна вставляти в теги DIV, STYLE, записувати у внутрішній лист стилів, або зовнішній файл.

Значення	Опис значення
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-вісі.

CSS довідник

Даний довідник надає докладний опис усіх CSS властивостей з максимально спрощеними прикладами, для легшого розуміння роботи властивості.

Рамка та контур
Списки
Таблиці
Текст
Тіні та прозорість

Трансформація
Фон
Шрифт
інше

flexbox

Властивість	Значення	Опис	CSS
align-content	stretch\|center\|flex-start\|flex-end\|space-between\|space-around;	Задає вертикальне вирівнювання flex-елементів для flex-контейнерів із багаторядковим вмістом.	3
align-items	stretch\|center\|flex-start\|flex-end\|baseline;	Вертикальне вирівнювання flex-елементів усередині flex-контейнера.	3
align-self	auto\|stretch\|center\|flex-start\|flex-end\|baseline;	Вертикальне вирівнювання flex-елемента.	3
flex	flex-grow flex-shrink flex-basis\|auto;	Визначає ширину, стиск та розтяг для flex-елемента.	3
flex-basis	число\|auto;	Вказує ширину для flex-елемента.	3
flex-direction	row\|row-reverse\|column\|column-reverse;	Напрямок розташування flex-елементів.	3
flex-flow	flex-direction flex-wrap;	Напрямок розташування та можливість перенесення для flex-елементів.	3
flex-grow	число;	Визначає коефіцієнт розтягування flex-елемента.	3
flex-shrink	число;	Визначає коефіцієнт стиснення flex-елемента.	3
flex-wrap	nowrap\|wrap\|wrap-reverse;	Визначає можливість перенесення flex-елементів.	3
justify-content	flex-start\|flex-end\|center\|space-between\|space-around;	Горизонтальне вирівнювання flex-елементів.	3
order	число;	Визначає порядок виведення flex-елементів.	3

Анімація

Властивість	Значення	Опис	CSS
@keyframes	div{animation: mymove 4s infinite;} @keyframes mymove { 0% {top:0px; left:0px; background:red;} 25% {top:0px; left:530px; background:blue;} 50% {top:100px; left:530px; background:yellow;} 75% {top:100px; left:0px; background:green;} 100% {top:0px; left:0px; background:red;} }	Дозволяє створювати анімацію.	3
animation	name duration timing-function delay iteration-count direction fill-mode play-state;	Дозволяє встановити кілька або всі значення властивостей animation в одному оголошенні.	3
animation-delay	час;	Визначає, коли запуститься анімація.	3
animation-direction	normal\|reverse\|alternate\|alternate-reverse;	Вказує чи анімація програватиметься в реверсі на альтернативних циклах.	3
animation-duration	час;	Визначає скільки потрібно часу, щоб закінчити 1 цикл анімації.	3
animation-fill-mode	none\|forwards\|backwards\|both;	Задає стиль елемента, коли анімація не програється (до її запуску, під час зупинки або після її закінчення). За промовчанням CSS анімація не впливає на елемент доти, доки анімація не запуститься, під час паузи та після її завершення. Це дозволяє перевизначити властивість animation-fill-mode.	3
animation-iteration-count	число\|infinite;	Визначає скільки разів анімація має програватися.	3
animation-name	iмя_keyframe\|none;	Визначає ім'я @keyframes.	3
animation-play-state	paused\|running;	Вказує анімація програватиметься або буде в режимі паузи.	3
animation-timing-function	linear\|ease\|ease-in\|ease-out\|cubic-bezier(n,n,n,n);	Визначає криву швидкості анімації.	3
backface-visibility	visible\|hidden;	Визначає, чи має бути видно задню сторону елемента чи ні.	3

Зовнішній та внутрішній відступи

Властивість	Значення	Опис	CSS
margin	величина\|auto\|inherit;	Задає зовнішні відступи елемента.	1
margin-bottom	величина\|auto\|inherit;	Задає нижній зовнішній відступ елемента.	1
margin-left	величина\|auto\|inherit;	Задає лівий зовнішній відступ елемента.	1
margin-right	величина\|auto\|inherit;	Задає правий зовнішній відступ елемента.	1
margin-top	величина\|auto\|inherit;	Задає верхній зовнішній відступ елемента.	1
padding	[розмір \| проценти] {1 ... 4} \| inherit;	Встановлює внутрішні відступи елемента.	1
padding-bottom	розмір\|%\|inherit;	Задає нижній відступ (внутрішнє поле) елемента.	1
padding-left	розмір\|%\|inherit;	Задає лівий відступ для елемента.	1
padding-right	розмір\|%\|inherit;	Задає правий відступ (внутрішнє поле) елемента.	1
padding-top	розмір\|%\|inherit;	Задає верхній відступ для елемента.	1

Позиціювання

Властивість	Значення	Опис	CSS
bottom	auto\|величина\|inherit;	Вказує напрямок усунення позиціонованого елемента від нижнього краю.	2
clear	none\|left\|right\|both\|inherit;	Вказує, з якого боку елемента не допускаються плаваючі елементи.	1
clip	auto\|rect (верх, право, низ, ліво)\|inherit;	Визначає видиму частину абсолютно позиціонованих елементів.	2
display	none, block, inline, list-item, table, table-cell, flex ...	Вказує, як буде відображено елемент у браузері.	1
float	none\|left\|right\|inherit;	Визначає, чи буде елемент плаваючим.	1
left	auto\|величина\|inherit;	Вказує напрямок усунення позиціонованого елемента від лівого краю.	2
position	static \| absolute \| fixed \| relative \| inherit;	Визначає спосіб позиціонування елементів.	2
right	auto\|величина\|inherit;	Вказує напрямок усунення позиціонованого елемента від правого краю.	2
top	auto\|величина\|inherit;	Вказує напрямок усунення позиціонованого елемента від верхнього краю.	2
visibility	visible\|hidden\|collapse\|inherit;	Визначає, чи елемент видимим.	2
z-index	auto\|число\|inherit;	Вказує порядок розташування елементів осі Z.	2

Розмір

Властивість	Значення	Опис	CSS
height	auto\|величина\|inherit;	Встановлює фіксовану висоту.	1
max-height	none\|величина\|%\|inherit;	Вказує максимальну фіксовану висоту.	2
max-width	none\|величина\|%\|inherit;	Вказує максимальну фіксовану ширину.	2
min-width	none\|величина\|%\|inherit;	Вказує мінімальну фіксовану ширину.	2
min-height	none\|величина\|%\|inherit;	Вказує мінімальну фіксовану висоту.	2
overflow	visible\|hidden\|scroll\|auto\|inherit;	Визначає, що робити, якщо вміст елемента перевищує розмір області елемента.	2
overflow-x	visible\|hidden\|scroll\|auto\|inherit;	Вказує, обрізати чи ні лівий/правий край вмісту - якщо він переповнює доступну область елемента його змісту.	3
overflow-у	visible\|hidden\|scroll\|auto\|inherit;	Вказує, обрізати чи ні верхній/нижній край вмісту - якщо він переповнює доступну область елемента для його змісту.	3
resize	none\|both\|horizontal\|vertical\|inherit;	Вказує, чи може змінюватися розмір елемента користувачем.	3
width	auto\|величина\|inherit;	Встановлює фіксовану ширину.	1

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

Властивість	Значення	Опис	CSS
border	border-width border-style border-color\|inherit;	Дозволяє використовувати основні властивості меж в одному оголошенні.	1
border-bottom	width style color\|inherit;	Дозволяє використовувати значення основних властивостей нижньої межі рамки в одному оголошенні.	1
border-bottom-color	цвет\|transparent\|inherit;	Задає колір нижньої межі рамки.	1
border-bottom-left-radius	величина\|% [величина\|%]\|inherit;	Дозволяє зробити округлу межу нижнього лівого кута.	3
border-bottom-right-radius	величина\|% [величина\|%]\|inherit;	Дозволяє зробити округлу межу нижнього правого кута.	3
border-bottom-style	none\|hidden\|dotted\|dashed\|solid \|double\|groove\|ridge\|inset\|outset\|inherit;	Визначає стиль для нижньої межі рамки.	1
border-bottom-width	medium\|thin\|thick\|ширина\|inherit;	Визначає ширину нижньої межі рамки.	1
border-color	колір\|transparent\|inherit;	Задає колір для меж рамки елемента.	1
border-image	source slice width outset repeat\|inherit;	Дозволяє використовувати зображення як рамку.	3
border-left	width style color\|inherit;	Дозволяє використовувати значення основних властивостей лівої межі рамки в одному оголошенні.	1
border-left-color	колір\|transparent\|inherit;	Встановлює колір для лівої межі рамки.	1
border-left-style	none\|hidden\|dotted\|dashed\|solid \|double\|groove\|ridge\|inset\|outset\|inherit;	Визначає стиль для лівого кордону рамки.	1
border-left-width	medium\|thin\|thick\|ширина\|inherit;	Визначає ширину лівої межі рамки.	1
border-radius	[величина \| проценты]{1,4} [ / [величина \| проценты]{1,4} ]	Дозволяє змінити форму кутів.	3
border-right	width style color\|inherit;	Змінює зовнішній вигляд правої межі рамки.	1
border-right-color	цвет\|transparent\|inherit;	Задає колір для правої межі рамки.	1
border-right-style	none\|hidden\|dotted\|dashed\|solid \|double\|groove\|ridge\|inset\|outset\|inherit;	Визначає стиль правої межі рамки.	1
border-right-width	medium\|thin\|thick\|ширина\|inherit;	Вказує ширину для правої межі рамки.	1
border-style	none\|hidden\|dotted\|dashed\|solid \|double\|groove\|ridge\|inset\|outset\|inherit;	Встановлює стиль для меж рамки елемента.	1
border-top	width style color\|inherit;	Змінює зовнішній вигляд верхньої межі рамки.	1
border-top-color	цвет\|transparent\|inherit;	Задає колір верхньої межі рамки.	1
border-top-left-radius	величина\|% [величина\|%]\|inherit;	Дозволяє зробити округлу межу верхнього лівого кута.	3
border-top-right-radius	величина\|% [величина\|%]\|inherit;	Дозволяє зробити округлу межу верхнього правого кута.	3
border-top-style	none\|hidden\|dotted\|dashed\|solid \|double\|groove\|ridge\|inset\|outset\|inherit;	Визначає стиль верхньої межі рамки.	1
border-top-width	medium\|thin\|thick\|ширина\|inherit;	Визначає ширину верхньої межі рамки.	1
border-width	medium\|thin\|thick\|ширина\|inherit;	Задає ширину меж рамки елемента.	1
outline	outline-color outline-style outline-width\|inherit;	Створює зовнішню межу навколо елемента.	2
outline-color	invert\|колір\|inherit;	Визначає колір зовнішнього кордону.	2
outline-offset	величина\|inherit;	Зсув зовнішньої межі на задану відстань від краю елемента.	3
outline-style	none\|hidden\|dotted\|dashed\|solid \|double\|groove\|ridge\|inset\|outset\|inherit;	Вказує стиль для зовнішнього кордону.	2
outline-width	medium\|thin\|thick\|ширина\|inherit;	Вказує ширину зовнішнього кордону.	2

Списки

Властивість	Значення	Опис	CSS
list-style	list-style-type list-style-position list-style-image\|inherit;	Керує маркером у списках.	1
list-style-image	none\|url\|inherit;	Замінює маркер списків на зображення.	1
list-style-position	inside\|outside\|inherit;	Визначає розташування маркера щодо пункту списку.	1
list-style-type	circle, lower-alpha, upper-latin, upper-roman, none...	Вказує вид маркера у списку.	1

Таблиці

Властивість	Значення	Опис	CSS
border-collapse	separate\|collapse\|inherit;	Визначає, чи будуть межі рамки об'єднані в одну.	2
border-spacing	відстань\|inherit;	Визначає відстань між межами суміжних осередків та загальною рамкою таблиці.	2
caption-side	top\|bottom\|inherit;	Вказує розташування заголовка таблиці.	2
empty-cells	show\|hide\|inherit;	Регулює видимість порожніх осередків у таблиці.	2
table-layout	auto\|fixed\|inherit;	Вказує алгоритм використання макета таблиці.	2

Текст

Властивість	Значення	Опис	CSS
color	колір\|inherit;	Змінює колір тексту.	1
direction	ltr\|rtl\|inherit;	Визначає напрямок написання тексту.	2
letter-spacing	normal\|відстань\|inherit;	Контролює відстань між символами тексту.	1
line-height	normal\|число\|висота\|inherit;	Визначає міжрядковий інтервал.	1
quotes	none\|рядок\|inherit;	Визначає тип лапок для вбудованих цитат.	2
text-align	left\|right\|center\|justify\|inherit;	Вказує спосіб вирівнювання вмісту по горизонталі.	1
text-decoration	none\|underline\|overline\|line-through\|inherit;	Додає деякі елементи декорування тексту.	1
text-indent	величина\|inherit;	Визначає відступ першого рядка тексту елемента.	1
text-overflow	clip\|ellipsis\|строка\|inherit;	Вказує, що має статися, коли текст переповнює елемент, що містить.	3
text-transform	none\|capitalize\|uppercase\|lowercase\|inherit;	Контролює використання малих і великих літер у тексті.	1
vertical-align	baseline\|величина\|sub\|super\|top \|text-top\|middle\|bottom\|text-bottom\|inherit;	Визначає вертикальне вирівнювання елемента.	1
white-space	normal \| nowrap \| pre \| pre-line \| pre-wrap;	Визначає спосіб обробки прогалин усередині елемента.	1
word-break	normal\|break-all\|keep-all\|inherit;	Визначає правила перенесення для не CJK сценаріїв.	3
word-spacing	normal\|ширина\|inherit;	Визначає ширину пропусків між словами.	1
word-wrap	normal\|break-word\|inherit;	Дозволяє переривати довгі слова для перенесення на інший рядок.	3

Тіні та прозорість

Властивість	Значення	Опис	CSS
box-shadow	none\|зміщення-х зміщення-у розмиття розмір колір [inset]\|inherit;	Додає ефект відкидання тіні до елемента.	3
opacity	число\|inherit;	Встановлює рівень прозорості елемента.	3
text-shadow	х_тінь у_тінь розмитість колір\|none\|inherit;	Створює тінь для тексту.	3

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

Властивість	Значення	Опис	CSS
perspective	число\|none;	Визначає, скільки пікселів видалено 3D елемент від точки огляду.	3
perspective-origin	x-вісь y-вісь\|inherit;	Визначає де розташовується 3D елемент на осях x і y.	3
transform	none\|transform-functions\|inherit;	Застосовує 2D або 3D перетворення елемента.	3
transform-origin	вісь_X вісь_Y вісь_Z\|inherit;	Дозволяє змінити позицію перетворених елементів.	3
transform-style	flat\|preserve-3d\|inherit;	Визначає, як вкладені елементи відображатимуться у тривимірному просторі.	3
transition	property duration timing-function delay\|inherit;	Керує ефектом трансформації.	3
transition-delay	час\|inherit;	Вказує, коли має розпочатися ефект трансформації.	3
transition-duration	час\|inherit;	Вказує тривалість трансформації.	3
transition-property	none\|all\|властивість\|inherit;	Вказує назву CSS властивості, для якої буде використано ефект трансформації.	3
transition-timing-function	ease\|linear\|ease-in\|ease-out \|ease-in-out\|cubic-bezier()\|inherit;	Задає криву швидкості ефекту трансформації.	3

Фон

Властивість	Значення	Опис	CSS
background	color position/size repeat clip origin attachment image;	Встановлює кілька або всі значення властивостей тла в одному оголошенні.	1
background-attachment	scroll\|fixed\|local\|inherit;	Вказує, чи буде фонове зображення фіксованим.	1
background-clip	border-box\|padding-box\|content-box\|inherit;	Визначає область в елементі, для якого задається тло.	3
background-color	колір\|transparent\|inherit;	Встановлює колір тла для елемента.	1
background-image	url\|none\|inherit;	Встановлює фонове зображення елемента.	1
background-origin	padding-box\|border-box\|content-box\|inherit;	Вказує область розташування для фонового зображення.	3
background-position	left top center bottom right x% y%	Встановлює місце для фонового зображення.	1
background-repeat	repeat\|repeat-x\|repeat-y\|no-repeat\|inherit;	Задає, як фонове зображення повторюватиметься на екрані.	1
background-size	auto\|величина\|cover\|contain\|inherit;	Вказує розмір фонового зображення.	3

Шрифт

Властивість	Значення	Опис	CSS
font	font-style font-variant font-weight font-size/line-height \|caption\|icon\|menu\|message-box	Змінює стандартний текст.	1
@font-face	@font-face{ font-family: myFont; src: url("Fun_Light.ttf"),url("Fun_Light.eot"); } p{font-family: myFont, serif;}	Дозволяє використовувати будь-який шрифт на сторінці.	3
font-family	serif, sans-serif, cursive, fantasy, monospace...	Вказує шрифт або сімейство шрифтів для тексту.	1
font-size	:medium\|xx-small\|x-small\|small\|large \|x-large\|xx-large\|smaller\|larger\|inherit;	Вказує розмір шрифту.	1
font-size-adjust	число\|none\|inherit;	Контролює розмір неосновних шрифтів.	3
font-stretch	ultra-condensed\|extra-condensed\|condensed\|semi-condensed \|normal\|semi-expanded \|expanded\|extra-expanded\|ultra-expanded\|inherit;	Регулює ширину тексту.	3
font-style	normal\|italic\|oblique\|inherit;	Дозволяє змінювати стиль тексту.	1
font-variant	normal\|small-caps\|inherit;	Конвертує малі літери в великі зменшеного розміру.	1
font-weight	normal\|bold\|bolder\|lighter\|число\|inherit;	Вказує ширину символів тексту.	1

Інше

Властивість	Значення	Опис	CSS
box-sizing	content-box\|border-box\|inherit;	Дозволяє змусити певні елементи заповнювати область певним способом.	3
column-count	число\|auto\|inherit;	Розділяє елемент на колонки.	3
column-gap	відстань\|normal\|inherit;	Задає відстань між колонками елемента.	3
column-rule	column-rule-width column-rule-style column-rule-color\|inherit;	Властивість column-rule дозволяє вказати значення властивостей column-rule-* (ширину, стиль та колір) в одному оголошенні.	3
column-rule-color	колір\|inherit;	Визначає колір межі між колонками.	3
column-rule-style	none\|hidden\|dotted\|dashed\|solid \|double\|groove\|ridge\|inset\|outset\|inherit;	Визначає стиль межі між колонками.	3
column-rule-width	medium\|thin\|thick\|ширина\|inherit;	Вказує ширину межі між колонками.	3
columns	auto\|column-width column-count\|inherit;	Дозволяє використовувати значення властивостей column-width та column-count в одному оголошенні.	3
column-span	1\|all\|inherit;	Вказує елементу кількість колонок для обхвату.	3
column-width	auto\|ширина\|inherit;	Визначає ширину колонок.	3
content	значення [значення [...]];	Визначає вміст для псевдо-елементів :: before та :: after.	2
counter-increment	none \| імя [число];	Збільшує значення лічильника.	2
counter-reset	none \| імя [число];	Встановлює початкове значення лічильника.	2
cursor	auto crosshair default e-resize help move n-resize ne-resize nw-resize pointer progress s-resize se-resize sw-resize text w-resize wait	Змінює вигляд курсору миші.	2
page-break-after	auto\|always\|avoid\|left\|right\|inherit;	Визначає наявність або відсутність розриву сторінки після заданого елемента.	2
page-break-before	auto\|always\|avoid\|left\|right\|inherit;	Визначає наявність або відсутність розриву сторінки перед заданим елементом.	2
page-break-inside	auto\|avoid\|inherit;	Визначає наявність або відсутність розриву сторінки всередині елемента.	2
inherit - успадковує властивість батьківського елемента