Довідник CSS

9 червня 2022 р.2675

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

!important — Підвищує пріоритет стилю
align-content — Вирівнює рядки всередині флекс-контейнера за наявності вільного простору по поперечній осі
align-items — Вирівнює флекс-елементи усередині контейнера у перпендикулярному напрямку
align-self — Задає вирівнювання окремого елемента в контейнері поперечної осі
all — Універсальна властивість, яка скидає всі значення властивостей у вихідні або успадковані
backdrop-filter — Застосовує ефекти на кшталт розмиття до області фонового малюнка, розташованої за елементом
backface-visibility — Визначає, показувати зворотний бік елемента чи ні при його трансформації у тривимірному просторі
background — Універсальна властивість дозволяє встановити одночасно кілька характеристик фону
background-attachment — Встановлює, чи прокручуватиметься фонове зображення разом із вмістом елемента
background-blend-mode — Визначає режим накладання фонового зображення на колір фону або інші фонові зображення
background-clip — Визначає, як колір фону або фонове зображення має виводитися під межами
background-color — Визначає колір тла елемента
background-image — Встановлює фонове зображення елемента
background-origin — Визначає область розташування фонового малюнка
background-position — Задає початкове положення фонового зображення
background-position-x — Задає положення фонового зображення всередині елемента по горизонталі
background-position-y — Задає положення фонового зображення всередині елемента по вертикалі
background-repeat — Визначає, як повторюватиметься фонове зображення
background-size — Масштабує фонове зображення, згідно з заданими розмірами
block-size — Визначає розмір елемента по блоковій осі, напрямок якої залежить від значення властивості writing-mode
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-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 — Застосовується для зміни алгоритму розрахунку ширини та висоти елемента
caption-side — Визначає положення заголовка таблиці, який задається елементом
caret-color — Задає колір текстового курсору, який відображається у текстових полях форми, а також для елементів з атрибутом contenteditable
clear — Встановлює, з якого боку елемента заборонено його обтікання іншими елементами
clip — Визначає область позиціонованого елемента, де буде показано його вміст
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
counter-reset — Встановлює ідентифікатор, в якому зберігатиметься лічильник відображення певного елемента, а також початкове значення лічильника
cursor — Встановлює форму курсору, коли він знаходиться у межах елемента
direction — Властивість призначена для сайтів, у яких має значення напрямок тексту
display — Багатоцільова властивість, яка визначає, як елемент повинен бути показаний у документі
empty-cells — Задає відображення меж та фону в осередку таблиці, якщо вона порожня
filter — Використовується для додавання художніх ефектів до елементів, зазвичай до зображень
flex — Скорочена властивість, яка дозволяє вказати параметри елемента, щоб він ефективно заповнював доступний простір
flex-basis — Властивість flex-basis визначає основу флексу, яка є початковим розміром елемента
flex-direction — Властивість flex-direction визначає, як флекси розташовуються в контейнері щодо основних осей та їх напрямок
flex-flow — Є скороченою властивістю для окремих властивостей flex-direction та flex-wrap
flex-grow — Визначає, скільки простору може займати флекс усередині контейнера
flex-shrink — Визначає коефіцієнт стиснення флексів у контейнері
flex-wrap — Вказує, чи слід флексам розташовуватися в один рядок чи можна зайняти кілька рядків
float — Визначає, з якого боку вирівнюватиметься елемент, причому інші елементи обтікатимуть його з інших сторін
font — Універсальна властивість, яка дозволяє одночасно задати кілька характеристик шрифту та тексту
font-family — Встановлює сімейство шрифту, яке використовуватиметься для оформлення тексту вмісту
font-kerning — Керує кернінгом шрифту — це зміна інтервалу між певними поєднаннями літер для збереження щільності літер у тексті
font-size — Визначає розмір шрифту елемента
font-stretch — Встановлює вузьке, нормальне або широке зображення шрифту, що дозволяє ущільнювати або розширювати текст
font-style — Визначає накреслення шрифту — звичайне, курсивне або похилий
font-variant — Визначає, як потрібно представляти малі літери — залишити їх без модифікацій або робити їх усі великими зменшеного розміру
font-weight — Встановлює насиченість шрифту
height — Встановлює висоту елементів
hyphens — Повідомляє браузер, як розставляти переноси слів у блоці тексту
image-rendering — Повідомляє браузеру, яким алгоритмом інтерполювати зображення при масштабуванні його розмірів або зміні масштабу параметрів браузера
justify-content — Визначає, як браузер розподіляє простір навколо флекс-елементів вздовж головної осі контейнера
left — Встановлює положення лівого краю елемента
letter-spacing — Визначає інтервал між літерами в тексті
line-clamp — Обмежує текст заданим числом рядків
line-height — Встановлює висоту рядка тексту
list-style — Універсальна властивість, що дозволяє одночасно встановити стиль маркера, його положення, а також зображення маркера
list-style-image — Встановлює адресу зображення, яке служить маркером списку
list-style-position — Визначає, як розміщуватиметься маркер щодо тексту
list-style-type — Змінює вигляд маркера кожного елемента списку
margin — Встановлює зовнішній відступ кожного краю елемента
margin-bottom — Встановлює величину відступу від нижнього краю елемента
margin-left — Встановлює величину відступу від лівого краю елемента
margin-right — Встановлює величину відступу правого краю елемента
margin-top — Встановлює величину відступу від верхнього краю елемента
max-height — Встановлює максимальну висоту елемента
max-width — Встановлює максимальну ширину елемента
min-height — Задає мінімальну висоту елемента
min-width — Встановлює мінімальну ширину елемента
mix-blend-mode — Визначає режим накладання вихідного кольору на фоновий колір або фонове зображення
object-fit — Керує співвідношенням сторін зображень та відеороликів, а також способом їх масштабування
opacity — Визначає рівень прозорості елемента
order — Визначає порядок виведення флексів усередині флекс-контейнера
orphans — Задає мінімальну кількість рядків тексту, що залишається на попередній сторінці під час друку документа
outline — Одночасно встановлює колір, стиль та товщину зовнішньої межі на всіх чотирьох сторонах елемента
outline-color — Задає колір зовнішньої межі елемента
outline-offset — Встановлює відстань між рамкою, створеною за допомогою властивості outline, та краєм або межею елемента, доданої через border
outline-style — Задає стиль зовнішнього кордону елемента
outline-width — Задає товщину зовнішньої межі елемента
overflow — Керує відображенням вмісту елемента, якщо воно повністю не поміщається в область заданих розмірів
overflow-x — Керує відображенням вмісту блокового елемента по горизонталі
overflow-y — Керує відображенням вмісту блокового елемента по вертикалі
padding — Встановлює значення полів навколо вмісту елемента
padding-block — Одночасно задає початковий та кінцевий внутрішні відступи логічного блоку
padding-block-end — Визначає кінцевий внутрішній відступ логічного блоку.
padding-block-start — Визначає початковий внутрішній відступ логічного блоку.
padding-bottom — Встановлює значення поля від нижнього краю вмісту елемента
padding-inline — Одночасно задає початковий та кінцевий малі внутрішні відступи логічного блоку.
padding-inline-end — Визначає кінцевий рядковий внутрішній відступ логічного блоку
padding-inline-start — Визначає початковий рядковий внутрішній відступ логічного блоку
padding-left — Встановлює значення поля від лівого краю вмісту елемента
padding-right — Встановлює значення поля від правого краю вмісту елемента
padding-top — Встановлює значення поля від верхнього краю вмісту елемента
page-break-after — Додає розрив сторінки під час друку документа після заданого елемента
page-break-before — Додає розрив сторінки під час друку документа перед заданим елементом
page-break-inside — Дозволяє або забороняє розрив сторінки всередині елемента під час друку
perspective — Визначає відстань від площини екрана до точки збіжності ліній і тим самим визначає, наскільки виражений ефект перспективи
perspective-origin — Задає координати точки, куди дивиться спостерігач; Якість працює разом з perspective і визначає точку збіжності ліній за перспективи
place-content — Одночасно встановлює значення властивостей align-content та justify-content
pointer-events — Властивість pointer-events дозволяє керувати тим, як елементи будуть реагувати на події миші або на дотик до сенсорного екрану.
position — Встановлює спосіб розташування елемента щодо вікна браузера або інших об'єктів на веб-сторінці
quotes — Встановлює тип лапок, який застосовується у тексті документа
resize — Вказує, чи можна користувачеві змінювати розмір текстового поля.
right — Встановлює положення правого краю елемента
scroll-behavior — Визначає поведінку прокручування всередині елемента — плавне прокручування або миттєвий перехід
tab-size — Використовується для зміни ширини відступу, заданого символом табуляції.
table-layout — Визначає, як браузер повинен обчислювати ширину осередків таблиці, виходячи з її вмістом
text-align — Визначає горизонтальне вирівнювання тексту
text-align-last — Задає вирівнювання останнього рядка тексту, коли властивість text-align встановлена як justify
text-decoration — Додає оформлення тексту як його підкреслення, перекреслення, лінії над текстом
text-decoration-color — Встановлює колір лінії, яка додається через властивість text-decoration
text-decoration-line — Визначає, як повинна додаватися декоративна лінія до тексту — підкреслення, перекреслення над текстом
text-decoration-style — Встановлює стиль декоративної лінії, яка додається до тексту за допомогою text-decoration або text-decoration-line
text-decoration-skip-ink — Задає, як виводити лінію під або над текстом, коли лінія перетинає виносні елементи літер, на кшталт "у", "р", "ц" та ін.
text-emphasis — Скорочена властивість, що дозволяє встановити значення властивостей text-emphasis-style та text-emphasis-color одночасно
text-emphasis-color — Встановлює колір маркерів, які відображаються за допомогою властивості text-emphasis-style
text-emphasis-position — Встановлює положення маркерів, які відображаються за допомогою властивості text-emphasis-style
text-emphasis-style — Встановлює вигляд візуальних маркерів над кожним символом тексту
text-indent — Встановлює величину відступу першого рядка блоку тексту
text-orientation — Встановлює орієнтацію текстових символів у рядку
text-overflow — Визначає параметри видимості тексту в блоці, якщо текст не поміщається в задану область
text-shadow — Додає тінь до тексту, а також встановлює її параметри
text-transform — Керує перетворенням тексту елемента у великі або великі символи
top — Встановлює положення верхнього краю вмісту елемента
transform — Трансформує елемент, зокрема дозволяє його масштабувати, обертати, зрушувати, нахиляти, а також комбінувати види трансформацій
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-осі
zoom — Змінює масштаб об'єкта відповідно до заданого значення

@-правила

@charset — Застосовується для завдання кодування зовнішнього файлу CSS
@document — встановлює стильові правила на основі адреси документа
@font-face — Визначає налаштування шрифтів, а також дозволяє завантажити специфічний шрифт на комп'ютер користувача
@import — Дозволяє імпортувати вміст CSS-файлу до поточної стильової таблиці
@keyframes — Встановлює ключові кадри під час анімації елемента
@media — Вказує тип носія, для якого буде застосований вказаний стиль
@page — Задає значення полів під час друку документа
@supports — Дозволяє перевірити, підтримує браузер ту чи іншу можливість, і на основі цього створити набір стильових правил
@viewport — Дозволяє оптимізувати макет веб-сторінки залежно від різних пристроїв та їх розмірів

Селектори та їх комбінації

Псевдокласи

:active — Визначає стиль активного елемента
:blank — Представляє порожні елементи, тобто ті, які не містять дочірніх елементів або тексту
:checked — Застосовується до елементів інтерфейсу, таких як перемикачі (checkbox) та прапорці (radio), коли вони знаходяться в положення "включено"
:default — Застосовує стиль до елементів форм, які встановлені за замовчуванням у групі схожих елементів
:disabled — Застосовує стиль до заблокованих елементів форм
:empty — Порожні елементи, тобто ті, які не містять дочірніх елементів, тексту, пробілів або перенесення рядків
:enabled — Використовується для застосування стилю до доступних (не заблокованих) елементів форм
:first-child
:first-of-type — Задає правила стилів для першого елемента вказаного типу
:focus — Визначає стиль для елемента, що отримує фокус
:focus-within — Визначає стиль елемента, коли він сам або елементи всередину і його отримують фокус
: fullscreen — Псевдоклас :fullscreen застосовується до елементів, коли браузер знаходиться в повноекранному режимі
:hover — Визначає стиль елемента при наведенні на нього курсора миші
:in-range — Застосовується до елементів форм, у яких введене користувачем значення знаходиться в заданому діапазоні
:indeterminate — Задає стиль для елементів форм, таких як прапорці та перемикачі, коли вони знаходяться в невизначеному стані
:invalid — Застосовується до полів форми, вміст яких не відповідає зазначеному типу
:lang — Визначає мову, яка використовується в документі або його фрагменті
:last-child — Задає стильове оформлення останнього елемента свого родить еля
:last-of-type — Задає правила стилів для останнього елемента певного типу
:link — Застосовується до посилань, які ще не відвідувалися користувачем
:not — Задає правила стилів для елементів, які не містять зазначений селектор
:nth-child — Використовується для додавання стилю до елементів на основі нумерації в дереві елементів
:nth-last-child — Використовується для додавання стилю до елементів на основі нумерації в дереві елементів
:nth-last-of-type — Використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів
:nth-of-type — Використовується для додавання стилю до елементів зазначеного типу на основі нумерації у дереві елементів
:only-child
:only-of-type — Застосовується до дочірніх елементів зазначеного типу, тільки якщо він єдиний у батька
:optional — Застосовує стильові правила до поля форми, у якого не заданий атрибут required
:out-of-range — Застосовується до полів форм, у яких введене користувачем значення виходить із заданого діапазону
:placeholder-shown — Визначає стиль елемента input або textarea, який зараз відображає текст підказки, заданої атрибутом placeholder
:read-only — Застосовується до полів форми, у яких заданий атрибут readonly
:read-write — Застосовується до полів форми, доступних для зміни
:required — Застосовує стильові правила до елемента input, у якого встановлено атрибут required
:root — Визначає кореневий елемент документа
:target — Застосовується до цільового елемента, інакше кажучи, до ідентифікатора, вказаного в адресному рядку браузера
:valid — Застосовується до полів форми, вміст яких проходить перевірку в браузері на відповідність зазначеному типу
:visited — Застосовується до посилань, вже відвіданих користувачем, та задає для їх стильове оформлення

Псевдоелементи

::after — Використовується для виведення бажаного контенту після вмісту елемента, до якого він додається
::backdrop — Зазвичай використовується для затемнення сторінки , щоб акцентувати увагу на фотографії або діалоговому вікні
::before — Використовується для виведення бажаного контенту до вмісту елемента, до якого він додається
::first-letter — Визначає стиль першого символу в тексті елемента, до якого додається
::first-line — Задає стиль першого рядка форматованого тексту
::placeholder — Задає стильове оформлення тексту, що підказує, створеного атрибутом placeholder
::selection — Застосовує стиль до виділеного користувачем фрагмента тексту

Вендорні властивості, псевдокласи, псевдоелементи

Ці властивості працюють лише у певних браузерах. Префікс-moz-для Firefox,-ms-для Internet Explorer,-webkit-для Chrome та Safari,-o-для Opera.

-moz-orient — Встановлює положення індикатора прогресу — горизонтальне або вертикальне
-ms-interpolation-mode — Вказує браузеру, який алгоритм використовувати при масштабуванні картинок
::-ms-browse — Дозволяє задати стиль кнопки «Огляд» при завантаженні файлів
::-ms-check — Задає стиль перемикачів та прапорців
::-ms-clear — Задає стиль кнопки для очищення текстового поля
::-ms-expand — Задає стиль кнопки розкриття списку форми
::-ms-fill — Задає стиль індикатора прогресу
::-ms-fill-lower — Задає стильові параметри слайдера
::-ms-fill-upper — Задає стильові параметри слайдера
::-ms-reveal
::-ms-thumb — Задає стиль повзунка для слайдера
::-ms-ticks-after — Застосовує стильові параметри до поділів нижче доріжки слайдера
::-ms-ticks-before — Застосовує стильові параметри до поділів вище доріжки слайдера
::-ms-tooltip — Застосовує стильові параметри до підказки слайдера
::-ms-track — Задає стиль доріжки повзунка для слайдера
::-ms-value — Дозволяє змінювати стиль елементів форми

Значення властивостей

Функції

attr() — Застосовується для додавання значення атрибута HTML-елемента до стильової властивості
blur() — Задає розмиття зображення або тексту за Гаусом
brightness() — Підвищує або знижує яскравість зображення
calc() — Використовується для вказівки значення властивостей, які в якості значень використовують розмір, кут, час, число
clamp () — Задає значення, а також його нижню і верхню межі
contrast() — Підвищує або знижує контрастність зображення
drop-shadow() — Додає тінь до зображення з урахуванням його прозорих ділянок
grayscale() — Перетворює зображення на чорно-біле
hue-rotate() — Змінює кольоровість зображення за рахунок повороту відтінку на колірному колі
invert() — Інвертує кольори у зображенні
linear-gradient() — Створює лінійні й градієнт
opacity() — Задає рівень прозорості зображенням
perspective() — Задає значення перспективи для тривимірних трансформацій з елементом
radial-gradient() — Додає радіальний градієнт
repeating-linear-gradient() — Створює лінійний градієнт, що повторюється
repeating-radial-gradient() — Створює повторюваний радіальний градієнт
rotate() — Повертає елемент у двовимірному просторі на заданий кут щодо точки трансформації
rotateX() — Повертає елемент на заданий кут щодо осі X
rotateY() — Повертає елемент на заданий кут щодо осі Y
rotateZ() — Повертає елемент на заданий кут щодо осі Z
saturate() — Змінює насиченість кольорів у зображенні
sepia() — Перетворює зображення на сепію
scale() — Масштабує елемент по горизонталі та вертикалі
scaleX() — Масштабує елемент по горизонталі
scaleY() — Масштабує елемент по вертикалі
scaleZ() — Масштабує елемент по осі Z
skew () — Нахиляє елемент на заданий кут по горизонталі та вертикалі
skewX() — Нахиляє елемент на заданий кут по горизонталі
skewY() — Нахиляє т елемент на заданий кут по вертикалі
translate () — Зсув елемент на задане значення по горизонталі та вертикалі
translateX() — Зсув елемента по горизонталі на вказане значення
translateY() — Зрушує елемент по вертикалі на вказане значення
translateZ() — Зміщує елемент по осі Z на вказане значення
var() — Вставляє значення змінних користувачів у значення стильових властивостей
:target — Застосовується до цільового елемента, інакше кажучи, до ідентифікатора, вказаного в адресному рядку браузера
:valid — Застосовується до полів форми , вміст яких проходить перевірку в браузері на відповідність зазначеному типу
:visited — Застосовується до посилань, вже відвіданих користувачем, та задає для їх стильове оформлення

Одиниці

Розмір

ch
cm
em
ex
in
mm
pc
pt
px
rem
vh
vmax
vmin
vw

Кут

Час

Дозвіл

Анімація

Список властивостей, до яких застосовується анімація.