Довідник по CSS

color

color

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

font-family

font-family

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

background

background

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

background-image

background-image

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

background-color

background-color

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

background-attachment

background-attachment

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

margin

margin

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

overflow

overflow

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

text-align

text-align

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

caption-side

caption-side

Визначає положення заголовка таблиці, який задається за допомогою елемента <caption>, щодо самої таблиці. Властивість caption-side виводить заголовок до або після таблиці, а вирівнювання тексту по правому або лівому краю встановлюється через властивість text-align.

border

border

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

width

width

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

visibility

visibility

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

vertical-align

vertical-align

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

padding

padding

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

white-space

white-space

Властивість white-space встановлює, як відображати пробіли між словами. За звичайних умов будь-яка кількість пробілів у коді HTML показується на веб-сторінці як один. Винятком є елемент <pre>, поміщений у цей контейнер текст виводиться з усіма пробілами, як він був відформатований користувачем. Таким чином, white-space імітує роботу <pre>, але на відміну від нього не змінює шрифт на моноширинний.

quotes

quotes

Встановлює тип лапок, який застосовується в тексті документа. У кожній мові існують свої традиції для позначення лапок, властивість quotes дає змогу задати вид їхнього відображення в усьому тексті та встановити в такий спосіб його однакове оформлення. Додавання лапок відбувається автоматично для вмісту контейнера <q>, а також для тексту, до якого застосовується стильова властивість content зі значенням open-quote (відкриваюча лапка) або close-quote (закриваюча лапка).

text-decoration

text-decoration

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

list-style

list-style

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

columns

columns

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

border-left

border-left

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

border-right

border-right

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

border-top

border-top

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

border-bottom

border-bottom

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

border-spacing

border-spacing

Задає відстань між межами комірок у таблиці. border-spacing не працює в разі, коли для таблиці встановлено властивість border-collapse зі значенням collapse.

height

height

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

animation

animation

Універсальна властивість, яка задає відразу кілька параметрів анімації.

animation-duration

animation-duration

Задає час у секундах або мілісекундах, скільки має тривати один цикл анімації. За замовчуванням значення дорівнює 0s, це означає, що жодної анімації немає.

animation-timing-function

animation-timing-function

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

animation-delay

animation-delay

Властивість animation-delay встановлює час очікування перед запуском циклу анімації. Значення 0s або 0ms запускає анімацію відразу ж. Негативне значення також вмикає анімацію без затримок, але може призвести до зміни вигляду початку анімації.

animation-iteration-count

animation-iteration-count

Властивість визначає, скільки разів програвати цикл анімації до її зупинки.

animation-direction

animation-direction

Встановлює напрямок руху анімації.

animation-fill-mode

animation-fill-mode

Визначає, які стилі мають застосовуватися до елемента, коли анімація не програється. Наприклад, після її завершення або під час зупинки. За замовчуванням, у момент закінчення анімації стиль елемента повертається до початкового, властивість animation-fill-mode дає змогу змінити цю поведінку і зробити так, щоб стиль елемента залишався як в останнього ключового кадру.

animation-play-state

animation-play-state

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

animation-name

animation-name

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

float

float

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

clear

clear

Скасовує дію float із зазначеного боку для елементів, що стоять вище.

border-width

border-width

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

border-style

border-style

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

border-color

border-color

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

background-position

background-position

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

background-size

background-size

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

background-repeat

background-repeat

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

background-origin

background-origin

Властивість background-origin визначає область позиціонування фонового малюнка. Ця властивість не застосовується, коли значення background-attachment задано як fixed.

background-clip

background-clip

Визначає, як колір фону або фонова картинка має виводитися під межами. Ефект помітний за прозорих або пунктирних кордонів.

box-sizing

box-sizing

Застосовується для зміни алгоритму розрахунку ширини і висоти елемента.

display

display

Багатоцільова властивість, яка визначає, як елемент має бути показаний у документі.

column-width

column-width

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

column-count

column-count

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

content

content

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

text-decoration-line

text-decoration-line

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

text-decoration-style

text-decoration-style

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

text-decoration-color

text-decoration-color

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

table-layout

table-layout

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

align-content

align-content

Задає тип вирівнювання рядків усередині флекс-контейнера за поперечною віссю за наявності вільного простору.

align-items

align-items

Властивість align-items вирівнює флекс-елементи всередині контейнера в перпендикулярному напрямку.

align-self

align-self

Властивість align-self вирівнює флекс-елементи поточного рядка, переписуючи значення align-items.

all

all

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

backdrop-filter

backdrop-filter

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

backface-visibility

backface-visibility

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

background-blend-mode

background-blend-mode

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

background-position-y

background-position-y

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

block-size

block-size

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

border-bottom-color

border-bottom-color

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

border-bottom-left-radius

border-bottom-left-radius

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

border-bottom-right-radius

border-bottom-right-radius

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

border-bottom-style

border-bottom-style

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

border-bottom-width

border-bottom-width

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

border-collapse

border-collapse

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

border-image

border-image

Використовується для відображення мальованої рамки навколо елемента. Товщина рамки задається властивістю border, при цьому якщо вказано border: 0, то рамка не виводиться. За інших значень border малюнок завжди має пріоритет. Фон, якщо він заданий через властивість background, відображається під рамкою.

border-left-color

border-left-color

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

border-left-style

border-left-style

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

border-left-width

border-left-width

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

border-radius

border-radius

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

border-right-color

border-right-color

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

border-right-style

border-right-style

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

border-right-width

border-right-width

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

border-top-color

border-top-color

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

border-top-left-radius

border-top-left-radius

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

border-top-right-radius

border-top-right-radius

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

border-top-style

border-top-style

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

border-top-width

border-top-width

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

bottom

bottom

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

box-decoration-break

box-decoration-break

Вказує, як оформляти фрагмент тексту під час його перенесення на інший рядок. Працює тільки для таких властивостей: background, border, border-image, box-shadow, clip-path, margin і padding.

box-shadow

box-shadow

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

caret-color

caret-color

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

clip

clip

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

column-fill

column-fill

Визначає, як вміст має розподілятися всередині колонок.

column-gap

column-gap

Задає відстань між колонками в багатоколоночному тексті.

column-rule

column-rule

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

column-rule-color

column-rule-color

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

column-rule-style

column-rule-style

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

column-rule-width

column-rule-width

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

column-span

column-span

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

counter-increment

counter-increment

Стильова властивість counter-increment призначена для збільшення значення лічильника прирощень, який задається властивістю counter-reset. Такий лічильник підраховує кількість відображень елементів на сторінці та може виводитися за допомогою властивості content і псевдоелементів ::after і ::before. Це дає змогу створювати списки (зокрема багаторівневі), у яких нумерація та вигляд задаються через стилі.

counter-reset

counter-reset

Встановлює змінну, в якій зберігатиметься лічильник відображень певного елемента, а також початкове значення лічильника. Такий лічильник може виводитися за допомогою властивості content і псевдоелементів ::after і ::before.

cursor

cursor

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

direction

direction

direction призначений для сайтів, у яких має значення напрямок тексту. Наприклад, при використанні арабського алфавіту читання відбувається справа наліво.

empty-cells

empty-cells

Задає відображення меж і фону в комірці, якщо вона порожня. У разі одночасного додавання до таблиці властивості border-collapse зі значенням collapse, властивість empty-cells ігнорується.

filter

filter

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

flex

flex

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

flex-basis

flex-basis

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

flex-direction

flex-direction

Властивість flex-direction задає напрямок основних вісей у контейнері, чим і визначає положення флексів у контейнері. На напрямок також впливає значення атрибута dir у контейнері.

flex-flow

flex-flow

Є скороченою властивістю окремих властивостей flex-direction та flex-wrap.

flex-grow

flex-grow

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

flex-shrink

flex-shrink

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

flex-wrap

flex-wrap

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

font

font

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

hyphens

hyphens

Властивість hyphens повідомляє браузеру, як розставляти переноси слів у блоці тексту. Словник переносів зберігається в браузері та підключається за наявності атрибута lang з кодом мови. Так, для російської мови слід додати lang="ru" до елемента <html> або безпосередньо до абзацу тексту. Правила переносів визначаються браузером і можуть відрізнятися.

image-rendering

image-rendering

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

justify-content

justify-content

Визначає, яким чином браузер розподіляє місце навколо флекс-елементів вздовж головної осі контейнера. Це робиться після того, як застосовуються розміри та автоматичні відступи, за винятком ситуації, коли принаймні один елемент flex-grow має більше нуля. При цьому не залишається ніякого вільного простору для маніпулювання.

left

left

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

letter-spacing

letter-spacing

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

line-clamp

line-clamp

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

line-height

line-height

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

list-style-image

list-style-image

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

list-style-position

list-style-position

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

list-style-type

list-style-type

Змінює вигляд маркера кожного елемента списку. Ця властивість використовується лише тоді, коли значення list-style-image встановлено як none. Маркери відрізняються для маркованого списку (елемент <ul>) та нумерованого (елемент <ol>).

margin-bottom

margin-bottom

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

margin-left

margin-left

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

margin-right

margin-right

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

margin-top

margin-top

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

max-height

max-height

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

max-width

max-width

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

min-height

min-height

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

min-width

min-width

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

mix-blend-mode

mix-blend-mode

Визначає режим накладення вихідного кольору на фоновий колір або фонове зображення.

object-fit

object-fit

Керує співвідношенням сторін замінних елементів, таких як <img> і <video>, коли в них задано ширину або висоту, а також способом масштабування. Властивість object-fit може зберігати початкові пропорції елемента або навпаки, спотворювати пропорції, на догоду дотримання розмірів.

opacity

opacity

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

order

order

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

orphans

orphans

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

outline

outline

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

outline-color

outline-color

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

Іoutline-offset

Іoutline-offset

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

outline-style

outline-style

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

outline-width

outline-width

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

overflow-x

overflow-x

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

overflow-y

overflow-y

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

padding-block

padding-block

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

padding-block-end

padding-block-end

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

padding-block-start

padding-block-start

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

padding-bottom

padding-bottom

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

padding-inline

padding-inline

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

padding-inline-end

padding-inline-end

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

padding-inline-start

padding-inline-start

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

padding-left

padding-left

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

padding-right

padding-right

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

padding-top

padding-top

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

page-break-after

page-break-after

Додає розрив сторінки під час друку документа після заданого елемента.

page-break-before

page-break-before

Додає розрив сторінки під час друку документа перед заданим елементом.

page-break-inside

page-break-inside

Дозволяє або забороняє розрив сторінки всередині елемента під час друку.

perspective

perspective

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

perspective-origin

perspective-origin

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

place-content

place-content

Скорочена властивість place-content одночасно встановлює значення властивостей align-content і justify-content.

pointer-events

pointer-events

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

position

position

Встановлює спосіб позиціонування елемента відносно вікна браузера або інших об'єктів на веб-сторінці.

resize

resize

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

right

right

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

scroll-behavior

scroll-behavior

Визначає поведінку прокрутки всередині елемента - плавна прокрутка або миттєвий перехід.

tab-size

tab-size

Використовується для зміни ширини відступу, заданого за допомогою символу табуляції (клавіша Tab).

text-align-last

text-align-last

Задає вирівнювання останнього рядка блоку тексту.

text-decoration-skip-ink

text-decoration-skip-ink

Задає, як виводити лінію під або над текстом, коли лінія перетинає виносні елементи букв, на кшталт "у", "р", "ц" тощо. Лінія може бути суцільною або перериватися, щоб пропустити "хвостики" букв.

text-emphasis

text-emphasis

Скорочена властивість, що дає змогу встановити значення властивостей text-emphasis-style і text-emphasis-color одночасно.

text-emphasis-color

text-emphasis-color

Встановлює колір маркерів, що відображаються за допомогою властивості text-emphasis-style.

text-emphasis-position

text-emphasis-position

Встановлює положення маркерів, що відображаються за допомогою властивості text-emphasis-style.

text-emphasis-style

text-emphasis-style

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

text-indent

text-indent

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

text-orientation

text-orientation

Властивість text-orientation встановлює орієнтацію текстових символів у рядку і застосовується тільки до вертикального тексту (коли властивість writing-mode задано як vertical-lr або vertical-rl).

text-overflow

text-overflow

Визначає параметри видимості тексту в блоці, якщо текст цілком не поміщається в задану область. Можливі два варіанти: текст обрізають; текст обрізають і до кінця рядка додають три крапки. text-overflow працює в тому разі, якщо для блоку значення властивості overflow встановлено як auto, scroll або hidden.

text-shadow

text-shadow

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

text-transform

text-transform

Керує перетворенням тексту елемента на великі або прописні символи. Коли значення відмінне від none, регістр вихідного тексту буде змінено.

top

top

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

transform

transform

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

transform-origin

transform-origin

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

transform-style

transform-style

Визначає, як дочірні елементи будуть відображатися в 3D-просторі. Цю властивість слід використовувати спільно з transform.

transition

transition

Універсальна властивість, яка дає змогу одночасно задати значення transition-property, transition-duration, transition-timing-function і transition-delay. Встановлює ефект переходу між двома станами елемента, вони можуть бути визначені за допомогою псевдокласу :hover або :active, а також динамічно через JavaScript.

transition-delay

transition-delay

Властивість transition-delay встановлює час очікування перед запуском ефекту переходу. Значення 0s запускає анімацію відразу ж. Негативне значення також вмикає анімацію без затримок, але може призвести до зміни вигляду початку анімації.

transition-duration

transition-duration

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

transition-property

transition-property

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

transition-timing-function

transition-timing-function

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

unicode-bidi

unicode-bidi

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

user-select

user-select

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

widows

widows

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

word-break

word-break

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

word-spacing

word-spacing

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

word-wrap

word-wrap

Властивість word-wrap указывает, переносити чи ні довгі слова, які не вміщаються по ширині у задану область.

writing-mode

writing-mode

Встановлює напрямок тексту на сторінці - по горизонталі або вертикалі.

z-index

z-index

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

zoom

zoom

Змінює масштаб об'єкта згідно із заданим значенням.

inline-size

inline-size

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

min-block-size

min-block-size

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

marks

marks

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

font-kerning

font-kerning

Властивість font-kerning керує кернінгом шрифту. Кернінг – це зміна інтервалу між певними поєднаннями літер для збереження щільності літер у тексті. Це особливо важливо для літер, у яких є похилі лінії, наприклад А, У, W, V. Інформація про кернінг зберігається в самому шрифті, і якщо шрифт не підтримує цю можливість, то властивість font-kerning не вплине на текст.

font-size

font-size

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

font-stretch

font-stretch

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

font-style

font-style

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

font-variant

font-variant

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

font-weight

font-weight

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

!important

!important

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

background-position-x

background-position-x

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

@font-face

@font-face

Правило @font-face дає змогу визначити налаштування шрифтів, а також завантажити специфічний шрифт на комп'ютер користувача.

@keyframes

@keyframes

Правило @keyframes встановлює ключові кадри під час анімації елемента. Ключовий кадр - це властивості елемента (прозорість, колір, положення та ін.), які мають застосовуватися до елемента в заданий момент часу. Таким чином, анімація являє собою плавний перехід стильових властивостей від одного ключового кадру до іншого. Обчислення проміжних значень між такими кадрами бере на себе браузер.

@media

@media

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

@page

@page

Правило @page дає змогу задати значення полів під час друку документа або для сторінок, у яких тип носія задано як print.

@document

@document

@document встановлює стильові правила на основі адреси документа. Наприклад, якщо адреси мобільної та основної версії сайту різняться, то ми можемо задати власний стиль елементів для кожної версії.

@import

@import

Правило @import дає змогу імпортувати вміст CSS-файлу в поточну таблицю стилів. @import не дозволяється вставляти після будь-яких оголошень, крім @charset або іншого @import.

@supports

@supports

Правило @supports дає змогу перевірити, чи підтримує браузер ту чи іншу можливість, і на основі цього створити набір стильових правил. Припустимо створювати комплексні умови за допомогою логічних операторів not, and, or.

@viewport

@viewport

Дозволяє оптимізувати макет веб-сторінки залежно від різних пристроїв та їхніх розмірів. Є аналогом <meta name="viewport">, але переносить параметри з HTML у правила CSS.

@charset

@charset

Команда @charset використовується для кодування зовнішнього файлу CSS. Це має значення, якщо в CSS-файлі використовуються символи національного алфавіту.

A

A

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

#id

#id

Ідентифікатор визначає унікальне ім'я елемента, яке використовується для зміни його стилю і звернення до нього через скрипти.

.class

.class

Класи застосовують, коли необхідно визначити стиль для одного або декількох елементів веб-сторінки. Елементи при цьому можуть бути різними, але мати частково або повністю схожі елементи оформлення. У коді HTML ім'я класу визначається через атрибут class.

.class1.class2

.class1.class2

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

*

*

Іноді потрібно встановити одночасно один стиль для всіх елементів веб-сторінки, наприклад, задати шрифт або накреслення тексту. У цьому випадку допоможе універсальний селектор, який відповідає будь-якому елементу веб-сторінки.

A B

A B

Під час створення веб-сторінки часто доводиться вкладати одні елементи всередину інших. Щоб стилі цих елементів використовувалися коректно, допоможуть вкладені селектори. Наприклад, встановити стиль для <b> тільки коли він розташовується всередині контейнера <p>. Таким чином можна одночасно встановити стиль для окремого елемента, а також елемента, який знаходиться всередині іншого.

A > B

A > B

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

A + B

A + B

Сусідні називаються елементи веб-сторінки, коли вони йдуть безпосередньо один за одним у коді документа.

A ~ B

A ~ B

Споріднені селектори за своєю поведінкою схожі на сусідні селектори (запис виду E + F), але на відміну від них стильові правила застосовуються до всіх прилеглих елементів. Наприклад, для селектора h1~p стиль буде застосовуватися до всіх елементів <p>, що розташовуються після заголовка <h1>. При цьому <h1> і <p> повинні мати спільний батьківський елемент, тому якщо <p> вставити всередину <div>, то стилі застосовуватися вже не будуть.

[attr]

[attr]

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

[attr='value']

[attr='value']

Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.

[attr^='value']

[attr^='value']

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

[attr$='value']

[attr$='value']

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

[attr*='value']

[attr*='value']

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

[attr~='value']

[attr~='value']

Деякі значення атрибутів можуть перераховуватися через пробіл, наприклад імена класів. Щоб задати стиль за наявності в списку необхідного значення, потрібно використовувати конструкцію ~=.

[attr|='value']

[attr|='value']

В іменах ідентифікаторів і класів дозволено використовувати символ дефіса (-), що дає змогу створювати значущі значення атрибутів id і class.

Псевдоклас :active

Псевдоклас :active

Псевдоклас :active визначає стиль активного елемента. Це такий стан елемента, який відбувається між клацанням і відпусканням клавіші миші. Здебільшого застосовується до посилань і кнопок, але ними не обмежений.

Псевдоклас :visited

Псевдоклас :visited

Псевдоклас :visited застосовується до посилань, уже відвіданих користувачем, і задає для них стильове оформлення.

Псевдокласс :nth-child

Псевдокласс :nth-child

Псевдоклас :nth-child використовується для додавання стилю до елементів на основі нумерації в дереві елементів.

Псевдоклас :first-child

Псевдоклас :first-child

Псевдоклас :first-child задає стиль першого елемента в групі братніх елементів (які мають один батьківський елемент).

Псевдоклас :hover

Псевдоклас :hover

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

Псевдоклас :blank

Псевдоклас :blank

Псевдоклас :blank представляє порожні елементи, іншими словами такі, що не містять дочірніх елементів або тексту. За своєю дією схожий на :empty, але :blank, на відміну від нього, вважає порожніми елементи, що містять пробіл або перенесення рядків.

Псевдоклас :checked

Псевдоклас :checked

Псевдоклас :checked застосовується до елементів інтерфейсу, таких як перемикачі (checkbox), прапорці (radio) і пункти списку (option), коли вони перебувають у положенні "увімкнено". Перемикання елементів у такий стан відбувається за допомогою атрибута checked елемента <input> або користувачем.

Псевдоклас :default

Псевдоклас :default

Псевдоклас :default застосовує стиль до елементів форм, які встановлені за замовчуванням у групі схожих елементів. Наприклад, у нас може бути дві кнопки для надсилання даних форми на сервер. Одна з цих кнопок задана за замовчуванням, ми можемо змінити її стиль через :default.

Псевдоклас :disabled

Псевдоклас :disabled

Псевдоклас :disabled використовується для застосування стилю до заблокованих елементів форм. Такі елементи не можуть отримати фокус, бути натиснутими або активованими, у текстових полях не можна набирати текст.

Псевдоклас :empty

Псевдоклас :empty

Псевдоклас :empty представляє порожні елементи, іншими словами такі, що не містять дочірніх елементів, тексту, пробілів або переносів рядків. Наприклад, <p></p> є порожнім елементом, а <p> </p>, <p>&nbsp;</p> або <p>еге</p> вже ні.

Псевдоклас :enabled

Псевдоклас :enabled

Псевдоклас :enabled використовується для застосування стилю до доступних (не заблокованих) елементів форм. За замовчуванням, усі елементи форм є доступними, якщо в коді HTML до них не додається атрибут disabled.

Псевдоклас :first-of-type

Псевдоклас :first-of-type

Псевдоклас :first-of-type задає стиль першого елемента певного типу в групі братніх елементів (що мають один батьківський елемент).

Псевдоклас :focus

Псевдоклас :focus

Псевдоклас :focus визначає стиль для елемента, який отримує фокус. Наприклад, ним може бути текстове поле форми, у яке встановлюється курсор.

Псевдоклас :focus-within

Псевдоклас :focus-within

Псевдоклас :focus-within визначає стиль елемента, коли він сам або елементи всередині нього отримують фокус. На відміну від :focus, який застосовується безпосередньо до самого елемента, :focus-within працює для батьківського елемента. Це дає змогу виділяти кольором або іншими методами всю форму або окремі її частини, коли користувач працює з полями форми.

Псевдоклас :fullscreen

Псевдоклас :fullscreen

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

Псевдоклас :in-range

Псевдоклас :in-range

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

Псевдоклас :indeterminate

Псевдоклас :indeterminate

Псевдоклас :indeterminate задає стиль для перемикачів, коли вони перебувають у невизначеному стані. Наприклад, якщо жоден перемикач не позначений, то вони перебувають у зазначеному стані. У реальності, стиль застосовується тільки до елементів, у яких DOM-атрибут :indeterminate через JavaScript встановлений у значення true. Також цей псевдоклас використовується деякими браузерами для елемента <progress>.

Псевдоклас :invalid

Псевдоклас :invalid

Застосовується до полів форми, вміст яких не відповідає зазначеному типу. Наприклад, для type="number" має вводитися число, а не букви, для type="email" коректна адреса електронної пошти.

Псевдоклас :lang

Псевдоклас :lang

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

Псевдоклас :last-child

Псевдоклас :last-child

Псевдоклас :last-child задає стиль останнього елемента в групі братніх елементів (що мають один батьківський елемент).

Псевдоклас :last-of-type

Псевдоклас :last-of-type

Псевдоклас :last-of-type задає стиль останнього елемента певного типу в групі братніх елементів (що мають один батьківський елемент).

Псевдоклас :link

Псевдоклас :link

Псевдоклас :link застосовується до посилань, які ще не відвідувалися користувачем, і задає для них стильове оформлення.

Псевдоклас :not

Псевдоклас :not

Псевдоклас :not задає правила стилів для елементів, які не містять зазначений селектор.

Псевдоклас :nth-last-child

Псевдоклас :nth-last-child

Псевдоклас :nth-last-child використовується для додавання стилю до елементів на основі нумерації в дереві елементів. На відміну від псевдокласу :nth-child відлік ведеться не від першого елемента, а від останнього.

Псевдоклас :nth-last-of-type

Псевдоклас :nth-last-of-type

Псевдоклас: nth-last-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів. На відміну від псевдокласу :nth-of-type відлік ведеться не від першого елемента, а від останнього.

Псевдоклас :nth-of-type

Псевдоклас :nth-of-type

Псевдоклас :nth-of-type використовується для додавання стилю до елементів зазначеного типу на основі нумерації в дереві елементів.

Псевдоклас :only-child

Псевдоклас :only-child

Псевдоклас :only-child застосовується до дочірнього елемента, тільки якщо він є єдиним у батьківського елемента.

Псевдоклас :only-of-type

Псевдоклас :only-of-type

Псевдоклас :only-of-type застосовується до дочірнього елемента зазначеного типу, тільки якщо він єдиний у батьківського елемента.

Псевдоклас :optional

Псевдоклас :optional

Застосовує стильові правила до елемента <input>, у якого не задано атрибут required, він дає змогу виділяти поля, обов'язкові до заповнення перед відправленням форми. Таким чином :optional застосовується до необов'язкових полів форми.

Псевдокласс :out-of-range

Псевдокласс :out-of-range

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

Псевдоклас :placeholder-shown

Псевдоклас :placeholder-shown

Визначає стиль елемента <input> або <textarea>, який наразі відображає текст підказки, заданої атрибутом placeholder. Така підказка зазвичай зникає під час набору тексту.

Псевдоклас :read-only

Псевдоклас :read-only

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

Псевдоклас :read-write

Псевдоклас :read-write

Застосовується до полів форми, доступних для зміни. Псевдоклас :read-write є протилежним за своєю дією :read-only, який застосовується до полів з атрибутом readonly (тільки для читання).

Псевдоклас :required

Псевдоклас :required

Застосовує стильові правила до елемента <input>, у якого встановлений атрибут required, він дає змогу виділяти поля обов'язкові до заповнення перед відправленням форми.

Псевдоклас :target

Псевдоклас :target

Для переходу до обраного фрагмента документа, в адресі пишеться символ # і вказується ім'я ідентифікатора. Наприклад, в адресі http://www.w3.org/TR/css3-selectors/#target-pseudo відбувається перехід до елемента, атрибут id якого задано як target-pseudo. Такий запис адреси називається "цільовий елемент". Псевдоклас :target застосовується до цільового елемента, іншими словами, до ідентифікатора, який вказано в адресному рядку браузера.

Псевдоклас :valid

Псевдоклас :valid

Застосовується до полів форми, вміст яких проходить перевірку в браузері на відповідність зазначеному типу. Наприклад, для type="number" вводиться число, а не букви, для type="email" коректна адреса електронної пошти.

Псевдоелемент ::first-letter

Псевдоелемент ::first-letter

Псевдоелемент ::first-letter визначає стиль першого символу в тексті елемента, до якого додається. До цього псевдоелемента можуть застосовуватися тільки стильові властивості, пов'язані з властивостями шрифту, полів, відступів, кордонів, кольору і фону.

Псевдоелемент ::first-line

Псевдоелемент ::first-line

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

Псевдоелемент ::selection

Псевдоелемент ::selection

Псевдоелемент ::selection застосовує стиль до виділеного користувачем тексту. У правилах стилів допускається використовувати такі властивості: color, background, background-color, cursor, outline і text-shadow.

Псевдоелемент ::after

Псевдоелемент ::after

Псевдоелемент, який використовується для виведення контенту після вмісту елемента, до якого він додається. Псевдоелемент ::after працює спільно з властивістю content.

Псевдоелемент ::before

Псевдоелемент ::before

Псевдоелемент ::before застосовується для відображення контенту до вмісту елемента, до якого він додається. Працює спільно з властивістю content.

Псевдоелемент ::backdrop

Псевдоелемент ::backdrop

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

Псевдоелемент ::placeholder

Псевдоелемент ::placeholder

Псевдоелемент, за допомогою якого задається стильове оформлення підказкового тексту, створеного атрибутом placeholder. Допускається використовувати властивості для зміни вигляду тексту, наприклад, задати шрифт і колір.

-ms-interpolation-mode

-ms-interpolation-mode

-ms-interpolation-mode вказує браузеру, який алгоритм використовувати при масштабуванні картинок. Використовується лише для елементів <img>.

::-ms-browse

::-ms-browse

Дозволяє задати стиль кнопки "Огляд" при завантаженні файлів через <input type="file">.

::-ms-check

::-ms-check

Задає стиль перемикачів (input type="radio") і прапорців (input type="checkbox").

::-ms-clear

::-ms-clear

Задає стиль кнопки для очищення текстового поля. Початково цю кнопку не видно, вона з'являється в правій частині поля тільки під час введення тексту.

::-ms-expand

::-ms-expand

Задає стиль кнопки розкриття списку, створеного за допомогою елемента <select>.

::-ms-fill

::-ms-fill

Задає стиль індикатора елемента <progress>. Саме значення індикатора і його положення змінюється динамічно за допомогою скриптів.

::-ms-fill-lower

::-ms-fill-lower

Задає стиль слайдера (input type="range"). Стиль застосовується до доріжки слайдера від меншого значення до поточного значення, де розташовується повзунок.

::-ms-fill-upper

::-ms-fill-upper

Задає стиль слайдера (input type="range"). Стиль застосовується до доріжки слайдера від поточного значення, де розташовується повзунок, до максимального значення слайдера.

::-ms-reveal

::-ms-reveal

Задає стиль кнопки для перегляду пароля в полі <input type="password">. Кнопку початково не видно і вона з'являється в правій частині поля під час введення пароля (рис. 1). Якщо клацнути по цій кнопці й утримувати ліву кнопку миші, то замість крапок буде показано пароль, що вводиться.

::-ms-thumb

::-ms-thumb

Задає стиль повзунка для слайдера (input type="range").

::-ms-ticks-after

::-ms-ticks-after

Застосовує стильові параметри до поділок нижче доріжки слайдера (input type="range"). За замовчуванням ці поділки не відображаються, і щоб їх стало видно, у стилях слід додати властивість display зі значенням block.

::-ms-ticks-before

::-ms-ticks-before

Застосовує стильові параметри до поділок вище доріжки слайдера (input type="range"). За замовчуванням ці поділки не відображаються, і щоб їх стало видно, у стилях слід додати властивість display зі значенням block.

::-ms-tooltip

::-ms-tooltip

Застосовує стильові параметри до спливаючої підказки слайдера (input type="range"), де відображається вибране поточне значення. Припустимо задавати тільки властивості display і visibility.

::-ms-track

::-ms-track

Задає стиль доріжки повзунка для слайдера (input type="range").

::-ms-value

::-ms-value

Дозволяє змінювати стиль елементів форми, зроблених за допомогою <input> або <select>.

Колір

Колір

Колір у стилях можна задавати різними способами: за шістнадцятковим значенням, за назвою, у форматі RGB, RGBA, HSL, HSLA.

Медіа-запити

Медіа-запити

Поряд із типами носіїв у CSS3 включено підтримку різних технічних параметрів пристроїв, на основі яких потрібно завантажувати ті чи інші стилі. Наприклад, можна визначити смартфон з максимальною роздільною здатністю 640 пікселів і для нього встановити одні стильові властивості, а для інших пристроїв інші. Також можна виявити різні характеристики на кшталт наявності монохромного екрана, орієнтації (портретна або альбомна) тощо. Усі характеристики легко комбінуються, тому допустимо задати стиль тільки для пристроїв в альбомній орієнтації із заданою роздільною здатністю екрана.

Час

Час

Задає час у секундах або мілісекундах. Значення складається з цілого або дробового числа, за яким одразу ж слідує символ s для секунд або ms для мілісекунд. Пробіл після числа неприпустимий. Для перетворення одиниць пам'ятайте, що 1s = 1000ms.

Размер

Размер

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

Кут

Кут

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

Число

Число

Значенням може виступати ціле число, що містить цифри від 0 до 9, і десятковий дріб, у якому ціла і десяткова частина розділяються крапкою. Якщо число починається з нуля, то його можна опустити (.5 замість 0.5).

Фільтр

Фільтр

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

currentColor

currentColor

Ключове слово currentColor відповідає значенню властивості color для поточного елемента. Це дає змогу використовувати значення кольору для властивостей, які не отримують його за замовчуванням.

calc()

calc()

Використовується для вказівки обчислюваного значення властивостей, що як значення використовують розмір, кут, час, число. Це дає змогу задавати значення, що ґрунтуються на додаванні або відніманні різних одиниць вимірів, наприклад можна задати 100% - 20px. Якщо значення не може бути обчислено, воно ігнорується.

attr()

attr()

Функція attr() застосовується для додавання значення атрибута HTML-елемента в стильову властивість. Наприклад, можна отримати значення атрибута class, а потім використовувати його як значення властивості background для зміни кольору.

linear-gradient()

linear-gradient()

Функція linear-gradient() додає лінійний градієнт до фону елемента. Вона виступає значенням властивості background-image або background.

radial-gradient()

radial-gradient()

Функція radial-gradient() додає радіальний градієнт до фону елемента. Радіальні за своїм принципом схожі на лінійні градієнти, але один колір переходить в інший не вздовж прямої лінії, а немов кола по воді навколо точки.

repeating-linear-gradient()

repeating-linear-gradient()

Створює нескінченно повторюваний лінійний градієнт, утворюючи тим самим фоновий візерунок. За своєю дією схожа на функцію linear-gradient() і має ті самі параметри. При цьому кольори послідовно змінюють один одного, після останнього кольору в списку кольорів градієнта відразу ж іде перший.

repeating-radial-gradient()

repeating-radial-gradient()

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

perspective()

perspective()

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

rotate()

rotate()

Функція rotate(α) повертає елемент у двовимірному просторі навколо точки обертання на заданий кут α. Точка обертання за замовчуванням розташовується в центрі елемента і може бути змінена за допомогою властивості transform-origin.

rotateX()

rotateX()

Функція rotateX(α) повертає елемент навколо осі X на заданий кут α.

rotateY()

rotateY()

Функція rotateY() повертає елемент навколо осі Y на заданий кут α.

rotateZ()

rotateZ()

Функція rotateZ(α) повертає елемент навколо осі Z на заданий кут α.

scale()

scale()

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

scaleX()

scaleX()

Масштабує елемент по горизонтальній осі X.

scaleY()

scaleY()

Масштабує елемент по вертикальній осі Y.

scaleZ()

scaleZ()

Масштабує елемент за віссю Z. Ефект буде помітний тільки під час використання перспективи, повороту елемента за осями X або Y, а також під час зміщення елемента за віссю Z.

skew()

skew()

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

skewX()

skewX()

Нахиляє елемент на заданий кут по горизонталі.

skewY()

skewY()

Нахиляє елемент на заданий кут по вертикалі.

translate()

translate()

Зсуває елемент відносно вихідного розташування на задане значення по горизонталі та вертикалі.

translateX()

translateX()

Зсуває елемент відносно його початкового розташування на задане значення по горизонталі.

translateY()

translateY()

Зсуває елемент відносно його початкового розташування на задане значення по вертикалі.

translateZ()

translateZ()

Зсуває елемент відносно його початкового розташування на задане значення за віссю Z. Ефект буде помітний тільки в разі використання перспективи, повороту елемента за осями X або Y.

ch

ch

Одиниця ch визначає ширину нульового символу (0). Якщо браузер не може обчислити розміри цього символу (наприклад, для користувальницького шрифту), тоді ширина символу приймається рівною 0.5em, а висота 1em.

cm

cm

em

em

ex

ex

in

in

mm

mm

pc

pc

pt

pt

px

px

rem

rem

vh

vh

vmax

vmax

vmin

vmin

vw

vw

deg

deg

grad

grad

rad

rad

turn

turn

s

s

ms

ms

dpi

dpi

dpcm

dpcm

dppx

dppx

Текст и шрифт

Текст и шрифт

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

Анімація

Анімація

@keyframes встановлює ключові кадри під час анімації елемента. Ключовий кадр - це властивості елемента (прозорість, колір, положення та ін.), які мають застосовуватися до елемента в заданий момент часу.

Границі

Границі

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

Колір та фон

Колір та фон

Дозволяє застосувати ефекти на кшталт розмиття до області фонового малюнка, розташованої за елементом.

Розмір

Розмір

Визначає розмір елемента по блоковій осі, напрямок якої залежить від значення властивості writing-mode.

Форматування

Форматування

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

Контент

Контент

Дозволяє вставляти генерований вміст у текст веб-сторінки, який спочатку в тексті відсутній.

Відступи та поля

Відступи та поля

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

Псевдокласи

Псевдокласи

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

Таблиці

Таблиці

Встановлює, як відображати межі навколо клітинок таблиці.

Списки

Списки

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

Флекси

Флекси

Вирівнює рядки всередині флекс-контейнера за наявності вільного простору по поперечній осі.

Логічні

Логічні

Визначає розмір елемента по блоковій осі, напрямок якої залежить від значення властивості writing-mode.

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

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

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

Друк

Друк

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

@-правила

@-правила

Задає кодування зовнішнього файлу CSS. Це має значення, якщо в CSS-файлі використовуються символи національного алфавіту.

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

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

Дає змогу задати стиль кнопки "Огляд" під час завантаження файлів.

Форми

Форми

Застосовується до елементів інтерфейсу, таких як перемикачі (checkbox) і прапорці (radio), коли вони перебувають у положенні "увімкнено".

Властивості, що анімуються

Властивості, що анімуються

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