У цьому уроці ми розглянемо останній атрибут тега , який визначає колір тексту. За промовчанням текст має чорний колір, який виводиться на білому тлі. Для того щоб змінити колір тексту в htmlпотрібно застосувати атрибут color тега :
Для завдання кольору достатньо вказати назву, наприклад: red, green, blue. Розглянемо невеликий приклад:
Текст зеленого кольору
Текст червоного кольору
Текст фіолетового кольору
Подивимося результат у браузері:
Текст у першому абзаці став зеленим, у другому – червоним, а третьому – фіолетовим. Усього існує 16 назв основних кольорів та 130 додаткових. Повний список кольорів ви можете переглянути в таблиці кольорів html.
Цей спосіб позначення кольору дуже простий, але обмежений. Тому для того, щоб змінити колір у html – коді, частіше використовують шістнадцяткове число перед яким стоїть знак решітки (#), наприклад:
За допомогою такого позначення можна отримати понад 16 мільйонів кольорів та їх відтінків! Отримати код кольору можна за допомогою конвертера кольорів HEX , який є на сайті, або скориставшись палітрою кольорів у Photoshop. Розглянемо приклад і запишемо наступний код:
Текст зеленого кольору
Текст червоного кольору
Текст фіолетового кольору
Збережемо файл і подивимося на результат:
Як ви бачите, ми задали тексту ті ж кольори, як і в першому прикладі, тільки тут ми скористалися шістнадцятковою системою обчислення або іншими словами ми задали колір у форматі HEX.
Тепер ви навчилися змінювати колір тексту в html і наприкінці уроку пропоную повторити всі атрибути тега , і задати тексту відразу кілька параметрів, а саме: шрифт, розмір та колір. Запишіть приклад:
Задаємо тексту шрифт, розмір та колір
Задаємо тексту шрифт, розмір та колір
Під час створення веб-сторінки доводиться стикатися з різними проблемами дизайну. Одним із поширених є питання, як змінити колір тексту в HTML. Вирішити її досить просто, при цьому існує два різні способи.
Завдання атрибуту вбудованого стилю тексту
Щоб зрозуміти, як змінити колір тексту в HTML, достатньо переглянути список атрибутів текстового поля. Серед них є ряд значень, що визначають стиль тексту, укладеного в ці теги, які вказуються всередині ключового слова style.
Для зміни кольору тексту достатньо в обраній ділянці текстового поля всередині тега, що відкривається, ввести слово style= "". Всередині цього атрибуту можна вказувати різні значення параметрів - за зміну відтінку кольору тексту відповідає значення атрибута color. Вказавши цей параметр, після знака двокрапки необхідно вказати колір, у якому будуть пофарбовані всі символи поля. При цьому, визначаючи відтінок, можна вказати як явне значення кольору, наприклад, red або yellow, так і шістнадцяткове значення, або rgb.
Незалежно від вибраного способу визначення кольору, результат буде однаковим у разі однакового вибору відтінку. Таким чином, усі наступні три приклади виконають однакові зміни тексту – забарвлять його у жовтий колір.
1.
текст
2.
текст
3.
текст
Зміна кольору за допомогою CSS
Використання таблиці стилів також дозволяє вирішити, як змінити колір тексту HTML. CSS повністю підтримується всіма сучасними версіями HTML, а також дозволяє змінювати стиль відразу кількох елементів сторінки.
Щоб зрозуміти, як змінити колір тексту в HTML за допомогою CSS, не обов'язково розумітися на формальній мові визначення зовнішнього вигляду. Для визначення атрибутів деякого елемента необхідно створити CSS-опис, який записується всередину тега
і визначається тегом