Довідник по 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 | Вказує, де для навігації використовується клавіша зі стрілкою вгору |
| object-fit | Як зображення <img> або відео <video> має бути вписано у контейнер. |
| object-position | Як зображення <img> або відео <video> має позиціонуватися по x/y всередині контейнера. |
| 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-вісі. |