Як змінити колір шрифту за допомогою CSS, CSS, Інтернет-технології, статті на

допомогою

Гарний дизайн – важлива складова будь-якого успішного сайту. CSS дає повний контроль за зовнішнім виглядом тексту. У тому числі і над тим, як у HTML змінити колір тексту.

Колір шрифту можна змінювати стилізацію всередині HTML-документа. Однак рекомендується використовувати зовнішні таблиці CSS-стилів.

Внутрішні стилі, які задаються в заголовку документа, прийнято використовувати на маленьких сайтах. У великих проектах краще уникати внутрішньої стилізації, оскільки це можна порівняти зі застарілим тегом font, яким ми користувалися багато років тому. Рядкові стилі значно ускладнюють обслуговування коду, оскільки вони вказуються безпосередньо перед кожним елементом на сторінці. Сьогодні ви дізнаєтесь, як змінювати колір шрифту за допомогою зовнішнього CSS та стилізувати тег

Додаємо стилі для зміни кольору шрифту

У цьому прикладі знадобиться веб-сторінка з розміткою та окремий файл CSS, що підключається всередині HTML-коду.

У HTML-документі буде кілька елементів, але ми будемо працювати лише параграфом. Ось так змінюється колір тексту всередині тегів

за допомогою зовнішньої таблиці стилів.

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

    Додаємо атрибут style до тега

:

  1. Додаємо властивість color:
  1. Додаємо значення кольору після властивості:

на сторінці стануть чорними.

Перед тим, як змінити колір тексту в HTML, потрібно розуміти, що в даному прикладі використовується назва кольору black. Незважаючи на те, що це один із способів вказівки кольору в CSS, він має певні обмеження.

Немає нічого страшного в тому, щоб використати назви black(чорний) та white (білий). Але цей спосіб не дозволяє вказувати певні відтінки. Тому для вказівки кольору частіше використовуються шістнадцяткові значення:

Цей CSS-код також зробить елементи

чорними, оскільки hex-код #000000 означає чорний колір. Також можна використовувати скорочений варіант #000 і результат буде тим же.

Як зазначалося раніше, hex-значення відмінно підходять у випадках, коли потрібно використовувати складні кольори.

Це hex-значення надасть тексту синій колір. Але на відміну від простого blue, цей код дозволяє вказати конкретні відтінки синього. У цьому прикладі вийде тьмяний сіро-синій колір.

Перейдемо до RGBA-значень. RGBA підтримують всі сучасні браузери, тому цей метод можна використовувати, не турбуючись про запасні варіанти:

Це RGBA-значення забезпечить той самий тьмяний, сіро-синій колір. Перші три значення відповідають за червоний, зелений та синій, а остання цифра – за рівень непрозорості. "1" означає "100%". Тобто текст буде повністю непрозорим.

Якщо сумніваєтеся в підтримці браузерами, кольори можна вказувати таким чином:

У цьому синтаксисі спочатку йде hex-значення, яке потім переписується значенням RGBA. Це означає, що застарілі браузери, які не мають підтримки RGBA , будуть використовувати перше значення і ігнорувати друге. Сучасні браузери будуть використовувати друге значення. Це потрібно враховувати, щоб знати, як змінити колір тексту в таблиці HTML.

Переклад статті “How to Change the Font Color with CSS” був підготовлений дружньою командою проекту Сайтобудування від А до Я.