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

color: red; - колір тексту

background-color - колір фону

background-image - задає фонове зображення елемента, адреса якого вказується аргументом функції url(). Це може бути як відносний, так і абсолютний шлях.

background-repeat - керує повторенням фонового зображення. За замовчуванням воно повторюється по горизонталі (X) та вертикалі (Y). Це відбувається, якщо зображення менше ніж розмір елемента.

background-position - керує положенням фонового зображення відносно рамки елемента, використовуючи дві координати — x по горизонталі і y по вертикалі.

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

background - складена властивість для одночасного встановлення значень всіх розглянутих властивостей

width - ширина блоку

max-width - максимальна ширина блоку, але система може автоматично зробити меньше

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

font-size - Надає розмір шрифту елемента в абсолютних або відносних одиницях вимірювання. Наразі обмежимося абсолютними одиницями — px (пікселями). За замовчуванням розмір шрифту абзацу = 16px.

font-weight - онтролює товщину зображення (жирність, вагу) літер у шрифті. Значення властивості можна задавати, за допомогою набору зарезервованих слів або за допомогою цифр від 100 до 900 з кроком 100. Ці значення задають ступінь товщини гліфу від тонкого 100 до товстого 900. У розробці використовуються тільки цифри, через можливість задати однаково точну вагу в усіх браузерах.

font-style - задає тип накреслення тексту, наприклад, можна зробити текст курсивом. font-style: normal | italic | oblique | initial | inherit

text-decoration - задає різні ефекти оформлення тексту: нижнє і верхнє підкреслення, а також закреслення. text-decoration: none | underline | line-through | overline. Таблиця стилів від браузера задає для більшості елементів значення none. А ось, наприклад, у посилань за замовчуванням зазначено underline.

text-transform - задає регістр символів у тексті (наприклад, зробити всі літери великими або маленькими). У розмітці текст завжди набирається згідно з правилами мови. А потім, за допомогою text-transform, виконуються всі потрібні налаштування. Адже все оформлення має бути в CSS. text-transform: none | uppercase | lowercase | capitalize

text-align - керує вирівнюванням текстового вмісту по горизонталі. Використання значення justify — не найліпша ідея. Хоча текст і притискається до правої та лівої межі блоку рівномірно, його читабельність падає. Все тому, що прогалини між словами мають різну довжину, а це негативно впливає на сприйнятті тексту. text-align: left | right | center | justify

line-height - встановлює міжрядковий інтервал (інтерліньяж, висоту рядка) тексту. За замовчуванням відстань між рядками залежить від типу шрифту та його розмірів і визначається браузером автоматично. Використання множника гарантує рівномірне масштабування інтервалу між рядками при зміні розміру тексту.line-height: множник | значення | відсотки | normal | inherit

letter-spacing - визначає інтервал між символами. <letter-spacing: значення | normal | inherit

text-indent - встановлює величину відступу першого рядка текстового блоку, наприклад абзацу. text-indent: значення | відсотки | inherit

text-shadow - контролює тінь тексту, а також задає її параметри: колір, зміщення та радіус розмиття. text-shadow: <зміщення по x>, <зміщення по y>, <радіус розмиття>, <колір>

list-style-type - визначає тип маркера списку. Щоб прибрати відображення маркера, необхідно встановити значення none.

cursor: pointer - зміна вигляду при наведенні курсору

box-sizing - визначає тип блокової моделі елемента – формулу (алгоритм) розрахунку його розмірів.

padding - властивість, яка контролює внутрішні поля між вмістом і рамкою для всіх сторін елемента: зверху (top), справа (right), знизу (bottom) і зліва (left). Саме в такому порядку

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

border - Складова властивість border контролює ширину, стиль і колір рамки елемента

border-radius - Для заокруглення всі кути рамки

overflow - Для заокруглення зображення

display - міняє поведінку блоку (блокови/строковий/блоковий)

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

flex - керування виравлюванням / установкою напрямку єлементів у середині тегу

object-fit - изначає яким чином вміст елемента img буде вміщатися в контейнер, коли розміри чи пропорції зображення та контейнера не збігаються. Зображення можна обрізати, розтягувати чи масштабувати.

calc - дозволяє розраховувати розміри

nth-child - приміняє ввластивості ксс до определенніх дочерних єлементів по формулі

box-shadow - додає елементу ефект об'єму та висоту

fill - керує кольором заливки векторної картинки SVG

position - Якщо треба розташувати один елемент поверх іншого

z-index - Позиціовані елементи випадають з потоку, а значить для них потрібно правило, яке визначатиме який елемент знаходиться вище, а який нижче на осі

transition-property - задає властивості, до яких буде застосовано ефект переходу. Значенням може бути одна властивість або список властивостей через кому. Значення за замовчуванням — all, тобто анімуються всі можливі властивості.

transition-duration - тривалість переходу

transition-timing-function - задає функцію розподілу часу, тобто поведінку анімації.

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

transition - Всі властивості переходу можна поєднати в одну складову властивість

transform - відповідає за застосування однієї або більше трансформацій елемента.

clamp - позволяет ограничивать диапазон изменения некоего значения