Довідник по CSS — Властивості, що анімуються

all

Універсальна властивість, яка скидає всі значення властивостей у вихідні або успадковані, за винятком властивостей direction і unicode-bidi.

background

Універсальна властивість background дає змогу встановити одночасно кілька характеристик фону. Значення можуть іти в будь-якому порядку, браузер сам визначить, яке з них відповідає потрібній властивості. Для докладного ознайомлення дивіться інформацію про кожну властивість окремо. Припустимо, також, вказувати параметри одразу декількох фонів, перераховуючи їх через кому.

background-color

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

background-position

Задає початкове положення фонового зображення, встановленого за допомогою властивості background-image. Припустимо вказувати кілька значень для кожного фону, перераховуючи значення через кому.

background-position-x

Задає положення фонового зображення всередині елемента по горизонталі. Якщо для елемента встановлено кілька фонових зображень, то можна змінювати положення кожного зображення, перераховуючи значення через кому.

background-position-y

Задає положення фонового зображення всередині елемента по вертикалі. Якщо для елемента встановлено кілька фонових зображень, то можна змінювати положення кожного зображення, перераховуючи значення через кому.

background-size

Масштабує фонове зображення, згідно із заданими розмірами.

block-size

Визначає розмір елемента за блоковою віссю, напрямок якої залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і block-size встановлює висоту елемента. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і block-size встановлює ширину елемента.

border

Універсальна властивість border дає змогу одночасно встановити товщину, стиль і колір кордону навколо елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості. Для встановлення межі тільки на певних сторонах елемента, скористайтеся властивостями border-top, border-bottom, border-left, border-right.

border-bottom

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

border-bottom-color

Встановлює колір кордону внизу елемента.

border-bottom-left-radius

Встановлює радіус заокруглення лівого нижнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

border-bottom-right-radius

Встановлює радіус заокруглення правого нижнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

border-bottom-width

Встановлює товщину кордону внизу елемента.

border-color

Встановлює колір кордону на різних сторонах елемента. Властивість дає змогу задати колір кордону одразу для всіх сторін елемента або тільки для зазначених.

border-left

Властивість border-left дає змогу одночасно встановити товщину, стиль і колір лівої межі елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

border-left-color

Задає колір кордону ліворуч від елемента.

border-left-width

Встановлює товщину кордону ліворуч від елемента.

border-radius

Встановлює радіус заокруглення куточків рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

border-right

Властивість border-right дає змогу одночасно встановити товщину, стиль і колір правої межі елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

border-right-color

Задає колір кордону праворуч від елемента.

border-right-width

Встановлює товщину межі праворуч від елемента.

border-top

Властивість border-top дає змогу одночасно встановити товщину, стиль і колір межі зверху елемента. Значення можуть іти в будь-якому порядку, розділяючись пропуском, браузер сам визначить, яке з них відповідає потрібній властивості.

border-top-color

Задає колір межі зверху елемента.

border-top-left-radius

Встановлює радіус заокруглення лівого верхнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

border-top-right-radius

Встановлює радіус заокруглення правого верхнього куточка рамки. Якщо рамка не задана, то заокруглення також відбувається і з фоном.

border-top-width

Устанавливает толщину границы сверху элемента.

border-width

Задає товщину рамки одночасно на всіх сторонах елемента або індивідуально для кожної сторони. Спосіб зміни товщини залежить від числа значень.

bottom

Встановлює положення нижнього краю вмісту елемента без урахування товщини рамок і відступів. Відлік координат залежить від властивості position, вона зазвичай приймає значення relative (відносне положення) або absolute (абсолютне положення).

box-shadow

Додає тінь до елемента. Допускається використовувати кілька тіней, вказуючи їхні параметри через кому, під час накладення тіней перша тінь у списку буде вищою, остання нижчою. Якщо для елемента задається радіус заокруглення через властивість border-radius, то тінь також вийде із закругленими куточками. Додавання тіні збільшує ширину елемента, тому можлива поява горизонтальної смуги прокрутки в браузері.

caret-color

Задає колір текстового курсору, який відображається в текстових полях форми (<input>, <textarea>), а також для елементів з атрибутом contenteditable. Такий курсор за аналогією з друкарськими машинками також називається кареткою і показує місце введення наступного символу. Як правило, текстовий курсор має вигляд вертикальної миготливої лінії.

clip

Властивість clip визначає область позиціонованого елемента, в якій буде показано його вміст. Усе, що не поміщається в цю область, буде обрізано і стає невидимим. Наразі єдина доступна форма області - прямокутник.

color

Визначає колір тексту елемента.

column-count

Визначає кількість колонок у багатоколонному тексті.

column-rule

У багатоколоночному тексті відмальовує лінію між колонок і визначає її параметри.

column-rule-color

У багатоколоночному тексті задає колір ліній між колонок. Якщо такий колір явно не вказано, то колір тексту в колонках і колір ліній між ними збігається.

column-rule-width

У багатоколоночному тексті задає товщину ліній між колонок.

columns

Універсальна властивість, яка дає змогу одночасно задати ширину і кількість колонок багатоколонкового тексту.

filter

Властивість filter призначена для застосування художніх ефектів до елементів. Зазвичай використовується для зображень, щоб розмити їх, збільшити контрастність, перетворити на чорно-білу картинку тощо.

flex

Скорочена властивість, яка дозволяє вказати параметри елемента, щоб він ефективно заповнював доступний простір. Елементи можуть бути розтягнутими пропорційно з урахуванням заданого співвідношення або стиснутими так, щоб повністю вмістити всі елементи в один рядок без перенесення.

flex-basis

Властивість flex-basis визначає основу флексу, яка є початковим розміром елемента. Схоже на властивості width та height, до яких додається вміст елемента.

flex-grow

Визначає, скільки простору може займати флекс усередині контейнера. За значення беруться числа, вони задають пропорції кожного флексу. Наприклад, якщо для всіх елементів встановлено значення 1, всі вони вийдуть однакового розміру. Якщо якийсь елемент отримав значення 2, його розмір буде вдвічі більшим від інших.

flex-shrink

Встановлює коефіцієнт стиснення флексів у контейнері та задає, наскільки елемент зменшуватиметься відносно інших флексів, щоб розмістити всі елементи в один рядок.

font

Універсальна властивість, що дозволяє одночасно задати кілька характеристик шрифту та тексту.

font-size

Визначає розмір елемента шрифту. Розмір може бути встановлений декількома способами. Набір констант (xx-small, x-small, small, medium, large, x-large, xx-large) визначає розмір, який називається абсолютним. Правду кажучи, вони не зовсім абсолютні, оскільки залежать від налаштувань браузера та операційної системи.

font-stretch

Встановлює вузьке, нормальне або широке зображення шрифту, що дозволяє розширювати текст або робити його більш щільним.

font-weight

Встановлює насиченість шрифту. Значення вказується у вигляді чисел від 100 до 900 з кроком 100 або за допомогою ключових слів.

height

Встановлює висоту вмісту елемента. За замовчуванням висота визначається автоматично, виходячи з вмісту елемента, але якщо задати фіксоване значення висоти, то вона буде встановлена, незважаючи на обсяг вмісту. Якщо вміст елемента перевищує вказане значення висоти, то висота елемента залишиться незмінною, а вміст відображатиметься поверх нього. Через цю особливість може вийти накладення вмісту елементів один на одного, коли елементи в коді HTML ідуть послідовно. Щоб цього не сталося, додайте властивість overflow зі значенням auto до стилю елемента.

inline-size

Визначає розмір елемента за рядковою віссю, напрямок якої залежить від значення властивості writing-mode. Для горизонтального листа (writing-mode: horizontal-tb) рядкова вісь буде горизонтальною, inline-size встановлює ширину елемента. Для вертикального напрямку письма (writing-mode: vertical-lr та writing-mode: vertical-rl) рядкова вісь буде вертикальною, inline-size встановлює висоту елемента.

left

Для позиціонованого елемента визначає відстань від лівого краю батьківського елемента, не враховуючи відступ, поле і ширину рамки, до лівого краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батьківського елементу виступає вікно браузера і положення елемента визначається від його лівого краю (рис. 1).

letter-spacing

Визначає інтервал між символами в межах елемента. Браузери зазвичай встановлюють відстань між символами, виходячи з типу і виду шрифту, його розмірів і налаштувань операційної системи. Щоб змінити це значення і застосовується ця властивість. Припустимо використовувати від'ємне значення, але в цьому випадку треба переконатися, що зберігається читабельність тексту.

line-height

Для блокових елементів визначає мінімальну висоту рядка тексту. Для вбудованих рядкових елементів (на кшталт <img>) властивість line-height не має жодного ефекту. Для решти рядкових елементів line-height задає висоту, яка використовується для розрахунку висоти рядка блоку.

margin

Встановлює величину відступу від кожного краю елемента. Відступом є простір від межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

margin-bottom

Встановлює величину відступу від нижнього краю елемента. Відступом є відстань від зовнішнього краю нижньої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

margin-left

Встановлює величину відступу від лівого краю елемента. Відступом є відстань від зовнішнього краю лівої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

margin-right

Встановлює величину відступу від правого краю елемента. Відступом є відстань від зовнішнього краю правого краю поточного елемента до внутрішнього краю його батьківського елемента (рис. 1).

margin-top

Встановлює величину відступу від верхнього краю елемента. Відступом є відстань від зовнішнього краю верхньої межі поточного елемента до внутрішньої межі його батьківського елемента (рис. 1).

max-height

Встановлює максимальну висоту елемента. Значення висоти елемента обчислюватиметься залежно від значень встановлених властивостей height, max-height і min-height. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

max-width

Встановлює максимальну ширину елемента. Значення ширини елемента обчислюватиметься залежно від значень установлених властивостей width, max-width і min-width. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

min-block-size

Визначає мінімальний розмір елемента по блоковій осі, напрямок якої залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і min-block-size встановлює мінімальну висоту елемента. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і min-block-size встановлює мінімальну ширину елемента.

min-height

Задає мінімальну висоту елемента. Значення висоти елемента обчислюватиметься залежно від установлених значень властивостей height, max-height і min-height. У табл. 1 показано, чим керується браузер під час спільного використання зазначених стильових властивостей.

min-width

Встановлює мінімальну ширину елемента. Якщо вікно браузера за шириною стає меншим за задану мінімальну ширину елемента, то ширина елемента залишається незмінною, а у вікні з'являється горизонтальна смуга прокрутки.

opacity

Визначає рівень прозорості елемента веб-сторінки. За часткової або повної прозорості через елемент проступає фоновий малюнок або інші елементи, розташовані нижче напівпрозорого об'єкта.

order

Визначає порядок виведення флексів усередині флекс-контейнера. Елементи розташовуються відповідно до значень властивості order від меншого до більшого. За рівних значень order елементи виводяться в тому порядку, в якому вони з'являються у вихідному коді.

outline

Універсальна властивість, що одночасно встановлює колір, стиль і товщину зовнішньої межі на всіх чотирьох сторонах елемента. На відміну від лінії, що задається через border, у властивості outline є такі особливості:

outline-color

Вказує колір зовнішньої межі елемента. На відміну від лінії, що задається через border, лінія через властивість outline відображається навколо елемента, не впливаючи на ширину блоку або його положення.

Іoutline-offset

Встановлює відстань між рамкою, створеною за допомогою властивості outline, і краєм або межею елемента, доданою через border.

outline-width

Визначає товщину зовнішньої межі елемента. На відміну від властивості border-width, для outline-width не можна задати межу для кожної сторони елемента індивідуально.

padding

Встановлює значення полів навколо вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

padding-block

Універсальна властивість, яка одночасно задає початковий і кінцевий внутрішні відступи елемента по блоковій осі. Напрямок осі залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блокова вісь буде вертикальною і padding-block встановлює відступи зверху та знизу. Для вертикального напряму письма (writing-mode: vertical-lr і writing-mode: vertical-rl) блокова вісь буде горизонтальною і padding-block встановлює відступи зліва та справа.

padding-block-end

Визначає кінцевий внутрішній відступ елемента по блоковій осі. Залежно від значення властивості writing-mode, властивість padding-block-end може відповідати властивості padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-block-end у поєднанні з іншими властивостями.

padding-block-start

Визначає початковий внутрішній відступ елемента по блоковій осі. Залежно від значення властивості writing-mode, властивість padding-block-start може відповідати властивості padding-top, padding-right, padding-left. У табл. 1 показано положення padding-block-start у поєднанні з іншими властивостями.

padding-bottom

Встановлює значення поля від нижнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

padding-inline

Універсальна властивість, яка одночасно задає початковий і кінцевий внутрішні відступи елемента по рядковій осі. Напрямок осі залежить від значення властивості writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строкова вісь буде горизонтальною і padding-inline встановлює відступи зліва та справа. Для вертикального напрямку письма (writing-mode: vertical-lr і writing-mode: vertical-rl) строкова вісь буде вертикальною, а padding-inline встановлює відступи зверху та знизу.

padding-inline-end

Визначає початковий внутрішній відступ елемента по рядковій осі. Залежно від значення властивості writing-mode і direction, властивість padding-inline-end може відповідати властивості padding-top, padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-inline-end у поєднанні з іншими властивостями.

padding-inline-start

Визначає початковий внутрішній відступ елемента по рядковій осі. Залежно від значення властивості writing-mode і direction, властивість padding-inline-start може відповідати властивості padding-top, padding-bottom, padding-right, padding-left. У табл. 1 показано положення padding-inline-start у поєднанні з іншими властивостями.

padding-left

Встановлює значення поля від лівого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

padding-right

Встановлює значення поля від правого краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

padding-top

Встановлює значення поля від верхнього краю вмісту елемента. Полем називається відстань від внутрішнього краю рамки елемента до уявного прямокутника, що обмежує його вміст (рис. 1).

perspective

Визначає відстань від площини екрана до точки збіжності ліній і тим самим задає, наскільки виражений ефект перспективи. Точка збіжності за замовчуванням розташовується в центрі елемента і може бути змінена за допомогою властивості perspective-origin.

perspective-origin

Задає координати точки, куди дивиться спостерігач. Ця властивість працює спільно з властивістю perspective і визначає точку збіжності ліній під час перспективи.

right

Для позиціонованого елемента визначає відстань від правого краю батьківського елемента, не враховуючи відступ, поле і ширину рамки, до правого краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батьківського елементу виступає вікно браузера і положення елемента визначається від його правого краю (рис. 1). У разі значення relative, right відраховується від правого краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від правого краю батьківського (рис. 2).

text-decoration

Додає оформлення тексту у вигляді його підкреслення, перекреслення або лінії над текстом. Одночасно можна застосувати більше одного стилю, перераховуючи значення через пробіл.

text-decoration-color

Встановлює колір лінії, яка додається через властивість text-decoration.

text-indent

Встановлює величину відступу першого рядка блоку тексту (наприклад, для абзацу <p>). Впливу на всі інші рядки не чинить. Допускається від'ємне значення для створення виступу першого рядка, але слід перевірити, щоб текст не виходив за межі вікна браузера.

text-shadow

Додає тінь до тексту, а також встановлює її параметри: колір тіні, зміщення щодо напису та радіус розмиття. Властивість text-shadow може працювати спільно з псевдоелементами :first-letter і :first-line.

top

Для позиціонованого елемента визначає відстань від верхнього краю батьківського елемента до верхнього краю дочірнього елемента. Відлік координат залежить від значення властивості position. Якщо воно дорівнює absolute, у ролі батька виступає вікно браузера, і положення елемента визначається від його верхнього краю (рис. 1). У разі значення relative, top відраховується від верхнього краю вихідного положення елемента. Якщо для батьківського елемента задано position: relative, то абсолютне позиціонування дочірніх елементів визначає їхнє положення від верхнього краю батьківського (рис. 2).

transform

Трансформує елемент, зокрема, дає змогу його масштабувати, обертати, зрушувати, нахиляти, а також комбінувати види трансформацій, перераховуючи функції трансформації через пробіл.

transform-origin

Встановлює координати точки, щодо якої відбуватиметься трансформація елемента.

vertical-align

Вирівнює елемент по вертикалі відносно свого батька, навколишнього тексту або комірки таблиці.

visibility

Призначений для відображення або приховування елемента, включно з рамкою навколо нього і тлом. Під час приховування елемента, хоча його і стає не видно, місце, яке елемент займає, залишається за ним. Якщо передбачається виведення різних елементів в одне й те саме місце екрана, для обходу цієї особливості слід використовувати абсолютне позиціонування або скористатися властивістю display.

width

Встановлює ширину вмісту елемента. За замовчуванням ширина залежить від типу елемента: блокові займають усю доступну ширину; ширина рядково-блокових дорівнює ширині їхнього вмісту. Властивість width дає змогу явно задати бажану ширину елемента, незважаючи на його вихідну поведінку.

word-spacing

Встановлює інтервал між словами. Якщо для тексту задано вирівнювання через text-align зі значенням justify (вирівнювання по ширині), то інтервал між словами буде встановлено примусово, але не менше за значення, зазначене через word-spacing.

z-index

Будь-які позиціоновані елементи на веб-сторінці можуть накладатися один на одного в певному порядку, імітуючи тим самим третій вимір, перпендикулярний до екрана. Кожен елемент може розташовуватися як нижче, так і вище за інші об'єкти веб-сторінки, їхнім розміщенням за z-віссю і керує z-index. Ця властивість працює тільки для елементів, у яких значення position задано як absolute, fixed або relative.