Значення, одиниці та кольори CSS

CSS-властивості кажуть браузеру, що ти хочеш змінити. CSS-значення кажуть браузеру, яке точне налаштування використати.

Наприклад, color — це властивість, а blue — це значення. Разом вони утворюють повну CSS-декларацію.

У цьому уроці ти вивчиш поширені CSS-значення для розмірів і кольорів.

Що робить значення в CSS

Значення завершує CSS-декларацію.

Різним властивостям потрібні різні типи значень:

• color потребує значення кольору, наприклад blue або #2563eb.
• width потребує значення розміру, наприклад 200px або 50%.
• font-size потребує значення розміру тексту, наприклад 1rem.

<p class="intro">CSS-значення керують тим, як виглядає цей текст.</p>

<style>
  .intro {
    color: blue;
    font-size: 1.25rem;
  }
</style>

Браузер читає кожну властивість разом із її значенням.

Абсолютні одиниці: px

px означає CSS-пікселі. Це абсолютна одиниця, тобто розмір не залежить від батьківського елемента.

<div class="user-card">Привіт</div>

<style>
  .user-card {
    width: 300px;
    border: 1px solid black;
    padding: 16px;
  }
</style>

Картка має ширину 300px.

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

Не став пробіл між числом і одиницею. Пиши 300px, а не 300 px.

Відносні одиниці: %, em і rem

Відносні одиниці обчислюються на основі чогось іншого.

• % зазвичай залежить від розміру батьківського контейнера.
• em залежить від розміру шрифту поточного елемента.
• rem залежить від кореневого розміру шрифту сторінки.

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

Коли використовувати px

Використовуй px, коли потрібен точний контроль над маленьким розміром.

Це корисно для рамок, іконок, аватарів і маленьких фіксованих деталей.

Будь обережним із великими ширинами макета в px. Макет 900px може добре виглядати на ноутбуці, але вилізти за межі екрана на маленькому телефоні.

Коли використовувати %

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

Якщо батьківський елемент має ширину 800px, дочірній елемент із width: 50% матиме ширину 400px.

<div class="layout">
  <div class="half-width-card">Половина ширини</div>
</div>

<style>
  .layout {
    width: 400px;
    border: 1px solid black;
  }

  .half-width-card {
    width: 50%;
    background-color: lightblue;
    padding: 12px;
  }
</style>

Використовуй % для гнучких макетів, колонок і елементів, які мають реагувати на свій контейнер.

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

Коли використовувати em

em масштабується від поточного розміру шрифту.

Якщо елемент має font-size: 16px, тоді 1em дорівнює 16px, а 2em дорівнює 32px.

<button class="alert-button">Видалити</button>

<style>
  .alert-button {
    font-size: 16px;
    padding: 0.75em 1.25em;
  }
</style>

Використовуй em для відступів усередині кнопок і маленьких компонентів. Якщо текст кнопки стане більшим, padding виросте разом із ним.

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

Коли використовувати rem

rem означає root em. Він базується на кореневому розмірі шрифту сторінки, зазвичай на елементі html.

У багатьох браузерах стандартний кореневий розмір шрифту — 16px, тому 2rem часто дорівнює 32px.

<h2 class="page-heading">Головний заголовок</h2>

<style>
  .page-heading {
    font-size: 2rem;
  }
</style>

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

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

Робочий приклад: змішування одиниць

Цей приклад змішує фіксовані та відносні одиниці.

<div class="container">
  <div class="percent-card">
    <p class="rem-text">Цей текст використовує одиниці rem.</p>
  </div>
</div>

<style>
  .container {
    width: 400px;
    background-color: lightgray;
    padding: 20px;
  }

  .percent-card {
    width: 50%;
    background-color: white;
    border: 2px solid black;
  }

  .rem-text {
    font-size: 1.5rem;
    margin: 1em;
  }
</style>

Контейнер має фіксовану ширину. Картка використовує половину цієї ширини. Текст використовує rem, а його зовнішній відступ використовує em.

Назви кольорів

У CSS є кольори з назвами, наприклад red, blue, black, white і green.

<p class="warning-text">Перевір форму перед надсиланням.</p>

<style>
  .warning-text {
    color: red;
  }
</style>

Назви кольорів корисні для швидких тестів і простих прикладів.

У реальних проєктах ти зазвичай використовуватимеш hex, RGB або HSL, бо вони дають більше контролю.

Hex-кольори

Hex-кольори використовують # і шість символів після нього.

Ці символи представляють червоний, зелений і синій.

<button class="primary-button">Зберегти</button>

<style>
  .primary-button {
    background-color: #2563eb;
    color: #ffffff;
  }
</style>

Hex-кольори поширені в дизайн-інструментах, таких як Figma.

Завжди додавай #. Пиши #ffffff, а не ffffff.

RGB-кольори

RGB означає red, green і blue: червоний, зелений і синій.

Функція rgb() використовує три числа від 0 до 255.

<div class="header-box">Синій блок</div>

<style>
  .header-box {
    background-color: rgb(0, 0, 255);
    color: white;
    padding: 16px;
  }
</style>

rgb(0, 0, 0) — це чорний. rgb(255, 255, 255) — це білий.

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

RGBA-кольори і прозорість

RGBA схожий на RGB, але додає альфа-значення.

Альфа-значення керує непрозорістю:

• 0 означає повністю прозорий.
• 0.5 означає 50% видимий.
• 1 означає повністю суцільний.

<div class="pattern-background">
  <div class="glass-card">
    <p>Цей блок видимий на 80%.</p>
  </div>
</div>

<style>
  .pattern-background {
    background-color: navy;
    padding: 40px;
  }

  .glass-card {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
  }
</style>

Використовуй rgba() для накладок, напівпрозорих карток і фонів поверх зображень або сильних кольорів.

Не використовуй значення більше за 1 для альфа-значення.

HSL-кольори

HSL означає hue, saturation і lightness: тон, насиченість і світлість.

• Тон — це число від 0 до 360 на колірному колі.
• Насиченість керує інтенсивністю кольору.
• Світлість керує тим, наскільки колір світлий або темний.

<p class="success-message">Успішно збережено.</p>

<style>
  .success-message {
    color: hsl(120, 100%, 35%);
  }
</style>

HSL корисний, коли хочеш налаштувати колір вручну.

Наприклад, щоб зробити колір темнішим, можна зменшити відсоток світлості.

Також можна використовувати hsla() для прозорості:

Порівняння форматів кольору

• Назви кольорів легко читати, але вони обмежені.
• Hex-кольори як #ff0000 часто використовуються в дизайн-інструментах.
• RGB як rgb(255, 0, 0) напряму показує значення червоного, зеленого й синього.
• RGBA як rgba(255, 0, 0, 0.5) додає прозорість.
• HSL як hsl(0, 100%, 50%) корисний для ручного налаштування колірних тем.

Типові помилки початківців

• Писати пробіли всередині одиниць, наприклад 20 px або 100 %. Використовуй 20px і 100%.
• Забувати # у hex-кольорах. Використовуй #ffffff, а не ffffff.
• Очікувати, що height: 50% працюватиме без висоти у батьківського елемента.
• Використовувати лише px для повних макетів, що може спричинити переповнення на маленьких екранах.
• Використовувати альфа-значення на кшталт 50 у rgba(). Використовуй 0.5 для 50% видимості.

Міні-завдання

Подивись на це CSS-правило:

Яку ширину матиме цей блок, якщо його батьківський контейнер має ширину 800px?

Який візуальний ефект має колір фону?

Відповідь: блок матиме ширину 400px. Фон буде чорним із 50% непрозорості, тому те, що позаду, зможе просвічуватися.

Короткий тест

Питання 1: Яка одиниця базується на кореневому розмірі шрифту сторінки?

Відповідь: rem.

Питання 2: Який формат кольору використовує символ #?

Відповідь: Hex-колір.

Питання 3: Що робить альфа-значення в rgba()?

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

Малий виклик

Спробуй стилізувати картку профілю:

• Використай px, щоб додати рамку.
• Використай rem, щоб зробити текст заголовка більшим.
• Використай rgba(), щоб дати абзацу напівпрозорий фон.
• Використай hex-колір для фону кнопки.

<div class="profile-card">
  <h3 class="profile-name">Jane Doe</h3>
  <p class="profile-bio">Веброзробниця в процесі навчання.</p>
  <button class="profile-button">Стежити</button>
</div>

<style>
  .profile-card {
    /* Додай суцільну рамку 2px */
  }

  .profile-name {
    /* Встанови розмір шрифту 2rem */
  }

  .profile-bio {
    /* Додай білий фон із 50% непрозорості */
  }

  .profile-button {
    /* Встанови колір фону через hex-колір */
  }
</style>

Один можливий варіант:

Підсумок

• Значення — це налаштування, які застосовуються до CSS-властивостей.
• px корисний для точних фіксованих вимірювань.
• % відносний до батьківського контейнера.
• em масштабується від розміру шрифту поточного елемента.
• rem масштабується від кореневого розміру шрифту.
• Назви кольорів прості, але обмежені.
• Hex, RGB і HSL — поширені способи задавати точні кольори.
• RGBA і HSLA додають прозорість за допомогою альфа-значення.