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 контролює ширину, стиль і колір рамки елемента
-
-
display - міняє поведінку блоку (блокови/строковий/блоковий)
viewport - видима частина сторінки, що відображається на екрані. Звісно ж, на комп’ютері та мобільному пристрої області перегляду різні. Користувач також може скористатися прокручуванням і змінити видиму частину.
flex - керування виравлюванням / установкою напрямку єлементів у середині тегу
object-fit - изначає яким чином вміст елемента img буде вміщатися в контейнер, коли розміри чи пропорції зображення та контейнера не збігаються. Зображення можна обрізати, розтягувати чи масштабувати.
calc - дозволяє розраховувати розміри
nth-child - приміняє ввластивості ксс до определенніх дочерних єлементів по формулі
box-shadow - додає елементу ефект об'єму та висоту
fill - керує кольором заливки векторної картинки SVG
position - Якщо треба розташувати один елемент поверх іншого
z-index - Позиціовані елементи випадають з потоку, а значить для них потрібно правило, яке визначатиме який елемент знаходиться вище, а який нижче на осі
transition-property - задає властивості, до яких буде застосовано ефект переходу. Значенням може бути одна властивість або список властивостей через кому. Значення за замовчуванням — all, тобто анімуються всі можливі властивості.
-
-
transition-delay - визначає затримку, після якої розпочинається анімація переходу. За замовчуванням встановлено значення 0s.
transition - Всі властивості переходу можна поєднати в одну складову властивість
transform - відповідає за застосування однієї або більше трансформацій елемента.
clamp - позволяет ограничивать диапазон изменения некоего значения