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

Яскраве оформлення вашого сайту - запорука залучення постійної уваги гостей сторінки і збільшення конверсії. Правильно підібрана гама кольорів вплине в тому числі і на сприйняття інформації читачем. Мова йде не тільки про квіти фону або окремих елементах інтернет-сторінки, але і в більшій мірі кольорі самого тексту, розміщеного на сайті.

Використання CSS для оформлення сайту

таблиця кольорів

Для оформлення HTML-документа і зміни налаштувань тексту в ньому використовується CSS (Cascading Style Sheet - каскадні таблиці стилів).

Для внесення коригувань в колір тексту HTML в більш ранніх версіях можна було скористатися тегом…. Після виходу версії HTML5, програмісти і власники сайтів для цих цілей почали користуватися тільки CSS. Це відповідає всім стандартам і можна буде не турбуватися про те, як сайт буде відображатися в різних браузерах.

Внести зміни кольору тексту в HTML, застосовуючи CSS, можна кількома способами:

  • За допомогою режиму HEX: color: # 0000ff;
  • З використанням слова, що позначає необхідний колір (англійською мовою): color: blue.

Пряме включення CSS в документ HTML

поєднання квітів

Використання атрибута style для зміни кольору тексту в HTML коді розберемо на прикладі.

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

Початок будь-якого нового HTML - документа виглядає наступним чином:

Змінюємо колір тексту в HTML

За замовчуванням колір тексту вмісту сторінки - чорний. Звичайно, якщо додатковими тегами не задано інше оформлення.

Включення атрибута style (style = "колір в форматі hex або колір, заданий словом") з певним значенням кольору, змінить колір тексту відповідно до Ваших побажань. Текст цього заголовка-синій.

У попередньому параграфі і в даному випадку ми задали колір тексту в режимі HEX, який представляє собою шестнадцатеричную систему числення. Кольори зашифровані в поєднаннях цифр від 0 до 9 і латинських букв від a до f. Колір цього тексту-зелений.

Запам’ятовувати номери кольорів не потрібно. Існує таблиця кольорів в HEX-форматі. Знайти її дуже просто, написавши в пошуковику відповідний запит. Даний параграф на сайті буде пофарбований в червоний колір.

Легше представляється визначення кольору тексту англійським словом. Колір тексту в цьому прикладі коричневий. Основні кольори легко дізнатися і запам’ятати. Також будь-який сайт з вивчення англійської мови підкаже вам потрібні слова.

Використання квітів в hex-форматі потрібно в разі потреби зміни кольору непоширеного відтінку. Тут ми застосували колір Indigo згідно з таблицею кольорів.

Застосування методу, розглянутого вище, виправдано в разі, якщо необхідно змінити колір тексту кількох рядків або параграфів, тобто не масштабно.

Підключення CSS в секцію

вибір кольору html

Для того щоб задати в загальному колір тексту сторінки, відмінний від чорного, тег style повинен самостійно використовуватися всередині парного тега….

Цей спосіб зручний для використання новачками, а також для немногостранічних сайтів.

Нижче наведено приклад розмітки, при якій всі стилі (в тому числі зміна кольору тексту HTML-документа), розміщені всередині тега парного тега… будуть застосовані до всього документа, якщо всередині парного тега… не задані свої додаткові параметри.

Body {

Color: green;

}

Таким чином, спеціально задавши колір основної частини документа, даний текст буде пофарбований в зелений колір (green).

Розглянуті вище приклади того, як можна змінити колір тексту в HTML дозволять з легкістю підібрати оформлення для вашого сайту і урізноманітнити його колірну гамму.



ЩЕ ПОЧИТАТИ