Як задати колір тексту в CSS – змінюємо колір тексту за допомогою стилів

🗓️ Оновлено: 17.08.2022
💬Коментарів: 0
👁️Переглядів: 862

Відповідь на питання

Відповідь на питання “Як змінити колір тексту в CSS” досить проста – за допомогою властивості color. Достатньо задати потрібному селектору (елементу, класу, айді і т.і.) властивість color з певним значенням. Найчастіше на практиці це виглядає так:

p {
  color: #ffffff;
}

Ось так ми задали білий колір тексту для всіх блоків <p>.

Різні формати

На що варто звернути увагу – колір можна вказувати у різних форматах.

Наприклад, замість #ffffff – ви можете прописати white і колір все також буде білим. Або замість шести символів f прописати лише три – все одно працюватиме. Ще можете вказати колір за допомогою системи RGB. Це коли ви змішуєте три кольори (червоний, зелений та синій), щоб отримати один. Тоді формат буде ось такий:

p {
  color: rgb(255,255,255);
}

Колір такий самий білий.

Як задати прозорість тексту

Щоб встановити прозорість для тексту, достатньо скористатися розширеною версією rgb – rgba. Тут ми четвертим параметром задаємо прозорість (від 0 до 1). Ось, для наочності, зробимо чорний текст трохи прозорим:

p {
  color: rgba(0,0,0,0.5);
}

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

Стаття була корисною?
👍
Так - 2
👎
Ні - 0
💬Коментарі:

CSS Головоломки в Telegram
Підписуйся і не пропускай:
Актуальні новини
Цікаві завдання
Корисні добірки
Наш рейтинг
🏆Найкращий хостинг для сайту
9/10
8/10
8/10
4
8/10
8/10
7/10
7/10
Что читают?
🏆Популярные записи
Як зробити гамбургер (бургер) меню – готовий код та докладне пояснення
Переглядів: 18274
Поява елементів при скролі
Переглядів: 16835
Як вирівняти картинку по центру за допомогою CSS
Переглядів: 6944
Як зробити плавне збільшення картинки при наведенні – ефект на чистому CSS
Переглядів: 6785
Як зробити ефект натискання кнопки на CSS
Переглядів: 6206
Перевірка знань
🤔Чи добре ви знаєте CSS?
Есть два блочных элемента, которые идут друг за другом в html. Какой будет оступ (margin) между ними, если задать им такие стили:

.top {
  height: 30px;
  background-color: blue;
  margin-bottom: 10px;
}
.bottom {
  height: 30px;
  background-color: red;
  margin-top: 20px;
}
    
10px
20px
30px
Very Peri
🤔Колір 2022 року
Інститут кольору Pantone оголосив цвіт 2022 року. Це бузковий відтінок під назвою 17-3938 Very Peri.
#6667ab