НАЙКРАЩИЙ САЙТ ДЛЯ ВЕБ-РОЗРОБНИКІВ

CSS Довідник

CSS Довідник CSS Підтримка браузерами CSS Селектори CSS Функції CSS Довідник Aural CSS Безпечні веб-шрифти CSS Альтернативні шрифти CSS Анімація CSS Одиниці CSS PX-EM Конвертер CSS Кольори CSS Значення кольору CSS Значення за замовчуванням CSS Сутності

CSS Властивості

accent-color align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backdrop-filter backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border 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-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style 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 caret-color @charset clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-feature-settings font-kerning font-size font-size-adjust font-stretch font-style font-variant font-variant-caps font-weight gap 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 image-rendering @import isolation justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top mask-image mask-mode mask-origin mask-position mask-repeat mask-size max-height max-width @media min-height min-width mix-blend-mode object-fit object-position opacity 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 perspective-origin pointer-events position quotes resize right row-gap scroll-behavior tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-decoration-thickness text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style 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


CSS3. Уроки W3Schools для початківців українською мовою

En

CSS Довідник


CSS Властивості

A

accent-color Визначає колір акценту для елементів керування інтерфейсу користувача
align-content Визначає вирівнювання між лініями всередині гнучкого контейнера, коли елементи не використовують увесь доступний простір
align-items Визначає вирівнювання для елементів усередині гнучкого контейнера
align-self Визначає вирівнювання для вибраних елементів усередині гнучкого контейнера
all Скидає всі властивості (крім unicode-bidi та напрямку)
animation Скорочена властивість для всіх властивостей animation-*
animation-delay Визначає затримку для початку анімації
animation-direction Визначає, чи має відтворюватися анімація вперед, назад або по черзі
animation-duration Визначає, скільки часу має тривати анімація, щоб завершити один цикл
animation-fill-mode Визначає стиль для елемента, коли анімація не відтворюється (перед її початком, після її завершення або обидва)
animation-iteration-count Визначає кількість відтворення анімації
animation-name Вказує назву для анімації @keyframes
animation-play-state Визначає, чи анімація запущена чи призупинена
animation-timing-function Визначає криву швидкості анімації

B

backdrop-filter Визначає графічний ефект для області за елементом
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-width, border-style та border-color
border-bottom Скорочена властивість для border-bottom-width, border-bottom-style та border-bottom-color
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-width, border-top-style та border-top-color
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 Визначає, чи має відбуватися розрив сторінки, стовпця чи області всередині вказаного елемента

C

caption-side Визначає розміщення підпису до таблиці
caret-color Визначає колір курсора (каретки) у вхідних даних, текстових областях або будь-якому елементі, який можна редагувати
@charset Визначає кодування символів, що використовується в таблиці стилів
clear Визначає, що має статися з елементом, який знаходиться поруч із плаваючим елементом
clip Затискає абсолютно позиціонований елемент
color Встановлює колір тексту
column-count Визначає кількість стовпців, на які має бути розділений елемент
column-fill Визначає, як заповнювати стовпці, збалансовано чи ні
column-gap Визначає проміжок між колонками
column-rule Скорочена властивість для всіх властивостей column-rule-*
column-rule-color Визначає колір лінії між стовпцями
column-rule-style Визначає стиль правила між стовпцями
column-rule-width Визначає ширину лінії між стовпцями
column-span Визначає, скільки стовпців має охоплювати елемент
column-width Визначає ширину стовпця
columns Скорочена властивість для column-width та column-count
content Використовується з псевдоелементами :before та :after для вставки створеного вмісту
counter-increment Збільшує або зменшує значення одного чи кількох лічильників CSS
counter-reset Створює або скидає один або кілька лічильників CSS
cursor Визначає курсор миші, який буде відображатися при наведенні на елемент

D

direction Визначає напрямок тексту/напрямок написання
display Визначає, як має відображатися певний елемент HTML

E

empty-cells Визначає, чи відображати межі та фон порожніх клітинок у таблиці

F

filter Визначає ефекти (наприклад, розмивання або зміну кольору) для елемента перед його відображенням
flex Скорочена властивість для властивостей flex-grow, flex-shrink та flex-basis
flex-basis Визначає початкову довжину гнучкого елемента
flex-direction Визначає напрямок гнучких елементів
flex-flow Скорочена властивість для властивостей flex-direction та flex-wrap
flex-grow Визначає, наскільки об’єкт буде рости відносно решти
flex-shrink Визначає, як елемент буде зменшуватися відносно решти
flex-wrap Визначає, чи повинні гнучкі елементи обертатися чи ні
float Визначає, чи повинен елемент плавати ліворуч, праворуч або взагалі не повинен плавати
font Скорочена властивість для властивостей font-style, font-variant, font-weight, font-size/line-height та font-family
@font-face Правило, яке дозволяє вебсайтам завантажувати та використовувати шрифти, відмінні від "веб-безпечних" шрифтів
font-family Визначає сімейство шрифтів для тексту
font-feature-settings Дозволяє контролювати розширені типографічні функції у шрифтах OpenType
@font-feature-values Дозволяє авторам використовувати загальну назву в font-variant-alternate для функції, активованої по-різному в OpenType
font-kerning Керує використанням інформації про кернінг (проміжки між літерами)
font-language-override Керує використанням мовних гліфів у гарнітурі
font-size Визначає розмір шрифту тексту
font-size-adjust Зберігає читабельність тексту, коли виникає резервний шрифт
font-stretch Вибирає звичайне, стиснуте або розширений вигляд з сімейства шрифтів
font-style Визначає стиль шрифту для тексту
font-synthesis Контролює, які відсутні шрифти (жирний або курсив) можуть бути синтезовані браузером
font-variant Визначає, чи слід відображати текст малим шрифтом
font-variant-alternates Керує використанням альтернативних гліфів, пов’язаних з альтернативними назвами, визначеними в @font-feature-values
font-variant-caps Керує використанням альтернативних гліфів для великих літер
font-variant-east-asian Контролює використання альтернативних гліфів для східноазіатських писемностей (наприклад, японської та китайської)
font-variant-ligatures Контролює, які лігатури та контекстуальні форми використовуються в текстовому вмісті елементів, до яких він застосовується
font-variant-numeric Керує використанням альтернативних гліфів для чисел, дробів і порядкових маркерів
font-variant-position Керує використанням альтернативних гліфів меншого розміру, розташованих як верхній або нижній індекс відносно базової лінії шрифту
font-weight Визначає товщину шрифту

G

gap Скорочена властивість для властивостей row-gap та column-gap
grid Скорочена властивість для властивостей grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns та grid-auto-flow
grid-area Або вказує назву для елемента сітки, або ця властивість є скороченою властивістю для grid-row-start, grid-column-start, grid-row-end і grid-column-end
grid-auto-columns Визначає розмір стовпця за умовчанням
grid-auto-flow Визначає, як автоматично розміщені елементи вставляють у сітку
grid-auto-rows Визначає розмір рядка за умовчанням
grid-column Скорочена властивість для властивостей grid-column-start та grid-column-end
grid-column-end Визначає, де закінчувати елемент сітки
grid-column-gap Визначає розмір проміжку між колонками
grid-column-start Визначає, з чого почати елемент сітки
grid-gap Скорочена властивість для grid-row-gap and grid-column-gap properties
grid-row Скорочена властивість для властивостей grid-row-start та grid-row-end
grid-row-end Визначає, де закінчувати елемент сітки
grid-row-gap Визначає розмір проміжку між рядами
grid-row-start Визначає, з чого почати елемент сітки
grid-template Скорочена властивість для властивостей grid-template-rows, grid-template-columns та grid-areas
grid-template-areas Визначає спосіб відображення стовпців і рядків за допомогою іменованих елементів сітки
grid-template-columns Визначає розмір стовпців і кількість стовпців у макеті сітки
grid-template-rows Визначає розмір рядків у макеті сітки

H

hanging-punctuation Визначає, чи можна поставити знак пунктуації за межами рядка
height Встановлює висоту елемента
hyphens Встановлює спосіб розділення слів для покращення макета параграфів

I

image-rendering Визначає тип алгоритму для масштабування зображення
@import Дозволяє імпортувати таблицю стилів в іншу таблицю стилів
isolation Визначає, чи повинен елемент створювати новий вміст стеку

J

justify-content Визначає вирівнювання між елементами всередині гнучкого контейнера, коли елементи не використовують увесь доступний простір

K

@keyframes Визначає код анімації

L

left Визначає ліву позицію позиціонованого елемента
letter-spacing Збільшує або зменшує пробіл між символами в тексті
line-break Визначає, як/якщо розривати рядки
line-height Встановлює висоту лінії
list-style Встановлює всі властивості для списку в одній декларації
list-style-image Визначає зображення як маркер елемента списку
list-style-position Визначає положення маркерів елементів списку (маркованих точок)
list-style-type Визначає тип маркера пункту списку

M

margin Встановлює всі властивості поля в одній декларації
margin-bottom Встановлює нижнє поле елемента
margin-left Встановлює ліве поле елемента
margin-right Встановлює праве поле елемента
margin-top Встановлює верхнє поле елемента
mask Приховує частини елемента шляхом маскування або вирізання зображення в певних місцях
mask-clip Визначає область маски
mask-composite Представляє операцію компонування, що використовується на поточному шарі маски з шарами маски під ним
mask-image Визначає зображення, яке буде використовуватися як шар маски для елемента
mask-mode Визначає, чи розглядається зображення шару маски як маска яскравості чи як маска альфа
mask-origin Визначає початкове положення (область положення маски) зображення шару маски
mask-position Встановлює початкове положення зображення шару маски (відносно області положення маски)
mask-repeat Визначає спосіб повторення зображення шару маски
mask-size Визначає розмір зображення шару маски
mask-type Визначає, чи SVG елемент <mask> розглядається як маска яскравості або як маска альфа
max-height Встановлює максимальну висоту елемента
max-width Встановлює максимальну висоту елемента
@media Встановлює правила стилю для різних типів/пристроїв/розмірів носіїв
min-height Встановлює мінімальну висоту елемента
min-width Встановлює мінімальну ширину елемента
mix-blend-mode Визначає, як вміст елемента має поєднуватися з його безпосереднім батьківським фоном

O

object-fit Визначає, як вміст заміненого елемента має бути розміщено в блоці, що встановлений його використаною висотою та шириною
object-position Визначає вирівнювання заміненого елемента всередині його поля
opacity Встановлює рівень непрозорості для елемента
order Встановлює порядок гнучкого елемента відносно решти
orphans Встановлює мінімальну кількість рядків, які потрібно залишити внизу сторінки або стовпця
outline Скорочена властивість для властивостей outline-width, outline-style та outline-color
outline-color Встановлює колір контуру
outline-offset Зміщує контур і малює його за край межі
outline-style Встановлює стиль контуру
outline-width Встановлює ширину контуру
overflow
Визначає, що станеться, якщо вміст переповнить поле елемента
overflow-wrap Визначає, чи може браузер розривати рядки з довгими словами, якщо вони переповнюють контейнер
overflow-x Визначає, чи обрізати лівий/правий краї вмісту, якщо він переповнює область вмісту елемента
overflow-y Визначає, чи обрізати верхній/нижній краї вмісту, якщо він переповнює область вмісту елемента

P

padding Скорочена властивість для всіх властивостей padding-*
padding-bottom Встановлює нижній відступ елемента
padding-left Встановлює лівий відступ елемента
padding-right Встановлює правильний відступ елемента
padding-top Встановлює верхній відступ елемента
page-break-after Встановлює поведінку розриву сторінки після елемента
page-break-before Встановлює поведінку розриву сторінки перед елементом
page-break-inside Встановлює поведінку розриву сторінки всередині елемента
perspective Надає тривимірному елементу деяку перспективу
perspective-origin Визначає, з якої позиції користувач дивиться на 3D-розташований елемент
pointer-events Визначає, чи реагує елемент на події покажчика
position Визначає тип методу позиціонування, що використовується для елемента (статичний, відносний, абсолютний або фіксований)

Q

quotes Встановлює тип лапок для вбудованих цитат

R

resize Визначає, чи може (і як) користувач змінювати розмір елемента
right Визначає правильну позицію позиціонованого елемента
row-gap Визначає проміжок між рядками сітки

S

scroll-behavior Визначає, чи потрібно плавно анімувати позицію прокручування в полі, що прокручується, замість прямого переходу

T

tab-size Визначає ширину символу табуляції
table-layout Визначає алгоритм, який використовується для розміщення комірок, рядків і стовпців таблиці
text-align Визначає горизонтальне вирівнювання тексту
text-align-last Описує, як вирівнюється останній рядок блоку або рядок безпосередньо перед примусовим розривом рядка, коли для вирівнювання тексту встановлено "justify"
text-combine-upright Визначає комбінацію кількох символів у пробілі одного символу
text-decoration Визначає декорування, додане до тексту
text-decoration-color Визначає колір text-decoration
text-decoration-line Визначає тип лінії в text-decoration
text-decoration-style Визначає стиль лінії в text-decoration
text-decoration-thickness Визначає товщину декоративної лінії
text-emphasis Застосовує знаки виділення до тексту
text-indent Визначає відступ першого рядка в текстовому блоці
text-justify Визначає метод вирівнювання, який використовується, коли є вирівнювання тексту "justify"
text-orientation Визначає орієнтацію тексту в рядку
text-overflow Визначає, що має статися, коли текст переповнює елемент, що містить
text-shadow Додає тінь до тексту
text-transform Контролює використання великих літер у тексті
text-underline-position Визначає положення підкреслення, яке встановлюється за допомогою властивості text-decoration
top Визначає верхню позицію позиціонованого елемента
transform Застосовує 2D або 3D трансформацію до елемента
transform-origin Дозволяє змінювати положення трансформованих елементів
transform-style Визначає спосіб візуалізації вкладених елементів у 3D-просторі
transition Скорочена властивість для всіх властивостей transition-*
transition-delay Визначає, коли почнеться ефект переходу
transition-duration Визначає, скільки секунд або мілісекунд потрібно для завершення ефекту переходу
transition-property Визначає ім’я властивості CSS, для якого призначений ефект переходу
transition-timing-function Визначає криву швидкості ефекту переходу

U

unicode-bidi Використовується разом із властивістю direction, щоб установити або повернути, чи має бути перевизначений текст для підтримки кількох мов в одному документі
user-select Визначає, чи можна виділити текст елемента

V

vertical-align Встановлює вертикальне вирівнювання елемента
visibility Визначає, чи є елемент видимим

W

white-space Визначає, як обробляються пробіли всередині елемента
widows Встановлює мінімальну кількість рядків, які потрібно залишити у верхній частині сторінки або стовпця
width Встановлює ширину елемента
word-break Визначає, як слова мають розриватися, коли вони досягають кінця рядка
word-spacing Збільшує або зменшує пробіл між словами в тексті
word-wrap Дозволяє розривати довгі, нерозривні слова та переносити їх на наступний рядок
writing-mode Визначає горизонтальне чи вертикальне розміщення рядків тексту

Z

z-index Встановлює порядок стека позиціонованого елемента