Колір шрифту – один із ключових аспектів стилів веб-сторінки. Він дозволяє виділити зміст, зробити його більш читаним та привабливим для користувача. У CSS є кілька способів змінити колір шрифту, і кожен з них пропонує різні можливості та гнучкість при налаштуванні зовнішнього вигляду тексту.
Перший спосіб змінити колір шрифту CSS – це використовувати властивість "color". Це основний спосіб завдання кольору тексту. Ви можете вказати колір, використовуючи його назву в російській або англійській мові (наприклад, "червоний" або "red"), використовувати шістнадцяткове подання кольору (#FF0000 для червоного) або використовувати функцію "rgb" або "rgba" для завдання кольору у форматі RGB.
Ще один спосіб змінити колір шрифту CSS – це використовувати класи або ідентифікатори. Ви можете визначити клас або ідентифікатор у CSS-файлі, застосувати його до потрібного елемента на веб-сторінці та вказати колір шрифту для цього класу або ідентифікатора. Цей спосіб особливо корисний, якщо ви хочете змінити колір шрифту лише для певних елементів або груп елементів.
Нарешті, ви також можете змінити колір шрифту CSS, використовуючи псевдоелементи, такі як ::after або ::before. Ці псевдоелементи дозволяють додавати додаткові стилі до елементів, не змінюючи сам HTML-код. Ви можете застосувати потрібний колір шрифту для псевдоелемента, щоб створити ефекти, такі як підкреслення або додавання іконки після тексту.
Селектор | Опис | приклад |
---|---|---|
color | Встановлює колір шрифту елемента | color: red; |
rgb() | Встановлює колір шрифту за допомогою значення RGB | color: rgb(255, 0, 0); |
rgba() | Встановлює колір шрифту за допомогою значень RGBA | color: rgba(255, 0, 0, 0.5); |
hsl() | Встановлює колір шрифту за допомогою значень HSL | color: hsl(0, 100%, 50%); |
hsla() | Встановлює колір шрифту за допомогою HSLA значень | color: hsla(0, 100%, 50%, 0.5); |
У CSS колір тексту задається за допомогою властивості color , а його значення можна записати кількома способами – у шістнадцятковому (hex) вигляді, у форматі RGB або HSL або вказавши ключове слово. Щоб уникнути неправильного відображення кольору, заданого за допомогою ключового слова, краще вказувати його значення hex.
Як змінити колір тексту в HTML через CSS?
CSS за колір тексту відповідає властивість color . Воно може застосовуватися до будь-якого елементу та набувати кольору в одному з форматів: Шістнадцяткова форма. Наприклад, #0d6efd, #d63384.
Як змінити колір тексту на кнопці CSS?
Для зміни кольору фону та тексту кнопки використовуємо відповідно властивості background і color, додаючи їх до селектора buttonЯк показано в прикладі 1. Основні параметри кнопки застосовуємо до селектора button, а додатково вводимо різні класи, щоб легко змінювати колір кнопок.
Як змінити колір тексту?
Зміна кольори шрифту
- Виділіть текст, колір якого потрібно змінити.
- На вкладці Головна в групі Шрифт клацніть стрілку поруч із елементом Колір шрифту, а потім виберіть колір. Для швидкого форматування тексту можна використовувати міні-панель інструментів із параметрами форматування.