Як змінити колір тексту в HTML

Метод1 З 2:

Використання CSS

1. Відкрийте файл HTML.найкращий спосіб змінити колір тексту-це скористатися CSS. Старий тег &#lt; font&#gt; більше не підтримується в HTML5. Тому скористайтеся CSS, щоб визначити стиль елементів сторінки.

   • Цей метод також застосовується до зовнішніх таблиць стилів (окремих файлів CSS). Наведені нижче приклади призначені для файлу HTML з внутрішньою таблицею стилів.
2. Розмістіть курсор всередині тега&#Lt;head&#gt;. стилі визначаються всередині цього тега, якщо використовується внутрішня таблиця стилів.
3. Введіть&#Lt;style&#gt; , щоб створити внутрішню таблицю стилів. коли тег &#Lt;style&#gt; знаходиться всередині тега &#lt;head&#gt;, таблиця стилів, яка знаходиться всередині тега &#lt;style&#gt;, буде застосована до будь-яких елементів сторінки. Таким чином, початок HTML-файлу має виглядати наступним чином:^[1]

   &#lt;!DOCTYPE html&#gt;
   &#lt;Html&#gt;
   &#lt;Head&#gt;
   &#lt;Style&#gt;
   
   &#lt;/Style&#gt;
   &#lt;/Head&#gt;
   
4. Введіть елемент, колір тексту якого потрібно змінити. використовуйте розділ &#Lt; style &#gt;, щоб визначити зовнішній вигляд елементів сторінки. Наприклад, щоб змінити стиль всього тексту на сторінці, введіть наступне:

   &#lt;!DOCTYPE html&#gt;
   &#lt;Html&#gt;
   &#lt;Head&#gt;
   &#lt;Style&#gt;
   Body {
   
   }
   &#lt;/Style&#gt;
   &#lt;/Head&#gt;
   
5. У селекторі елемента введіть атрибутcolor:. Цей атрибут визначає колір тексту вибраного елемента. У нашому прикладі цей атрибут змінить колір основного тексту, який є елементом, що включає весь текст на сторінці:

   &#lt;!DOCTYPE html&#gt;
   &#lt;Html&#gt;
   &#lt;Head&#gt;
   &#lt;Style&#gt;
   Body {
   	Color:
   }
   &#lt;/Style&#gt;
   &#lt;/Head&#gt;
   
6. Введіть колір тексту.це можна зробити трьома способами: ввести ім'я, ввести шістнадцяткове значення або ввести значення RGB. Наприклад, щоб зробити текст синім, введіть blue, rgb(0, 0, 255) або #0000FF.

   &#lt;!DOCTYPE html&#gt;
   &#lt;Html&#gt;
   &#lt;Head&#gt;
   &#lt;Style&#gt;
   Body {
   	Color: Red;
   }
   &#lt;/Style&#gt;
   &#lt;/Head&#gt;
   
7. Додайте інші селектори, щоб змінити колір різних елементів.можна використовувати різні селектори, щоб змінювати колір тексту різних елементів сторінки:

   &#lt;!DOCTYPE html&#gt;
   &#lt;Html&#gt;
   &#lt;Head&#gt;
   &#lt;Style&#gt;
   Body {
   	Color: Red;
   }
   H1 {
   	Color: #00FF00;
   }
   P {
   	Color: Rgb(0,0,255)
   }
   &#lt;/Style&#gt;
   &#lt;/Head&#gt;
   &#lt;Body&#gt;
   
   &#lt;H1&#gt;цей заголовок буде зеленим.&#lt;/H1&#gt;
   
   &#lt;P&#gt;цей параграф буде синім.&#lt;/P&#gt;
   
   Цей основний текст буде червоним.
   &#lt;/Body&#gt;
   &#lt;/Html&#gt;
   
8. Вкажіть стильовий клас CSS замість того, щоб змінювати елемент. можна вказати стильовий клас, а потім застосувати його до будь-якого елементу сторінки, щоб змінити стиль елемента. Наприклад, клас .redtext забарвить текст елемента, до якого застосований цей клас, в червоний колір:

   &#lt;!DOCTYPE html&#gt;
   &#lt;Html&#gt;
   &#lt;Head&#gt;
   &#lt;Style&#gt;
   .Redtext {
   	Color: Red;
   }
   &#lt;/Style&#gt;
   &#lt;/Head&#gt;
   &#lt;Body&#gt;
   
   &#lt;H1 Class="redtext"&#gt; цей заголовок буде червоним&#lt;/H1&#gt;
   &#lt;P&#gt;цей параграф буде стандартним.&#lt;/P&#gt;
   &#lt;P Class="redtext"&#gt;цей параграф буде червоним&#lt;/P&#gt;
   
   &#lt;/Body&#gt;
   &#lt;/Html&#gt;