Как изменить цвет текста

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

Использование CSS для оформления сайта

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

Для внесения корректировок в цвет текста HTML в более ранних версиях можно было воспользоваться тегом <font>…</font>. После выхода версии HTML5, программисты и владельцы сайтов для этих целей начали пользоваться только CSS. Это отвечает всем стандартам и можно будет не беспокоиться о том, как сайт будет отображаться в разных браузерах.

Внести изменения цвета текста в HTML, применяя CSS, можно несколькими способами:

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

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

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

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

Начало любого нового HTML- документа выглядит следующим образом:

<!DOCTYPE html>

<html>

<head>

<h2>Изменяем цвет текста в HTML</h2>

</head>

<body>

<h1> По умолчанию цвет текста содержимого страницы — черный. Конечно, если дополнительными тегами не задано другое оформление. </h1>

<h2 style=»color:#0000ff»> Включение атрибута style (style=»цвет в формате hex или цвет, заданный словом») с определенным значением цвета, изменит цвет текста в соответствии с Вашими пожеланиями. Текст этого заголовка-синий. </h2>

<p style=»color:#008000″> В предыдущем параграфе и в данном случае мы задали цвет текста в режиме HEX, который представляет собой шестнадцатеричную систему исчисления. Цвета зашифрованы в сочетаниях цифр от 0 до 9 и латинских букв от a до f. Цвет этого текста-зеленый. </p>

<p style=»color:#ff0000″> Запоминать номера цветов не нужно. Существует таблица цветов в HEX-формате. Найти ее очень просто, написав в поисковике соответствующий запрос. Данный параграф на сайте будет окрашен в красный цвет. </p>

<p style=»color:brown»> Легче представляется определение цвета текста английским словом. Цвет текста в этом примере коричневый. Основные цвета легко узнать и запомнить. Также любой сайт по изучению английского языка подскажет вам нужные слова. </p>

<p style=»color:#4B0082″> Использование цветов в hex-формате нужно в случае необходимости изменения цвета нераспространенного оттенка. Здесь мы применили цвет Indigo согласно таблице цветов. </p>

</body>

</html>

Применение способа, рассмотренного выше, оправдано в случае, если необходимо изменить цвет текста нескольких строк или параграфов, то есть не масштабно.

Подключение CSS в секцию <head>

Для того чтобы задать в общем цвет текста страницы, отличный от черного, тег style должен самостоятельно использоваться внутри парного тега <head>…</head>.

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

Ниже приведен пример разметки, при которой все стили (в том числе изменение цвета текста HTML-документа), размещенные внутри тега парного тега <style>…</style> будут применены ко всему документу, если внутри парного тега <body>…</body> не заданы свои дополнительные параметры.

<!DOCTYPE html>

<html>

<head>

<style>

body {

color: green;

}

</style>

</head>

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

</body>

</html>

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

fb.ru

 

В этом уроке мы рассмотрим последний атрибут тега <font>, который задает цвет текста. По умолчанию текст имеет черный цвет, который выводиться на белом фоне. Для того, чтобы изменить цвет текста в html, нужно применить атрибут color тега <font>:

<font color="цвет">

Для задания цвета достаточно указать его название, например: red, green, blue. Рассмотрим небольшой пример:

  <html>   <head>   <title>Урок 6. Изменяем цвет текста</title>   </head>   <body>   <p><font color="green">Текст зеленого цвета</font></p>   <p><font color="red">Текст красного цвета</font></p>   <p><font color="purple">Текст фиолетового цвета</font></p>   </body>  </html>    

Посмотрим результат в браузере:

Текст в первом абзаце стал зеленым, во втором – красным, а в третьем – фиолетовым. Всего существует 16 названий основных цветов и 130 дополнительных. Полный список цветов вы можете посмотреть в таблице цветов html.

Этот способ обозначения цвета очень прост, но весьма ограничен. Поэтому для того чтобы изменить цвет в html – коде, чаще используют шестнадцатеричное число перед которым стоит знак решетки (#), например:

<font color="#5AFF00">

 

С помощью такого обозначения можно получить более 16 миллионов цветов и их оттенков! Получить код цвета можно с помощью конвертера цветов HEX, который имеется на сайте, или воспользовавшись палитрой цветов в том же Photoshop. Рассмотрим пример и запишем следующий код:

  <html>   <head>   <title>Урок 6. Изменяем цвет текста</title>   </head>   <body>   <p><font color="#008000">Текст зеленого цвета</font></p>   <p><font color="#FF0000">Текст красного цвета</font></p>   <p><font color="#800080">Текст фиолетового цвета</font></p>   </body>  </html>    

Сохраним файл и посмотрим на результат:

Как вы видите, мы задали тексту те же цвета, как и в первом примере, только здесь мы воспользовались шестнадцатеричной системой исчисления или другими словами, мы задали цвет в формате HEX.

Теперь вы научились изменять цвет текста в html и в конце урока предлагаю повторить все атрибуты тега <font>, и задать тексту сразу несколько параметров, а именно: шрифт, размер и цвет. Запишите пример:

  <html>   <head>   <title>Задаем тексту несколько параметров</title>   </head>   <body>   <p>&nbsp</p>   <p align="center"><font face="courier" size="+2" color="#008000">Задаем тексту шрифт, размер и цвет</font></p>   <p align="center"><font face="arial" size="+3" color="#00FF02">Задаем тексту шрифт, размер и цвет</font></p>   <p align="center"><font face="comic sans ms" size="+4" color="#FF002E">Задаем тексту шрифт, размер и цвет</font></p>   </body>  </html>    

Как всегда не забудем сохранить файл и посмотрим результат:

Тексту применились все параметры, которые мы задали и все отображается корректно. Сам код думаю пояснять не стоит, так как все теги и атрибуты мы рассматривали в предыдущих уроках, и вы их уже знаете.

saperka.ru

Как изменить HTML цвет и фон текста

Попробуем изменить фон текста в HTML:

<title>HTML, фон, текст, цвет</title>
</head>
<body>
<h3 style="background-color:#ff9911">HTML Фон текста оранжевый</h3>
<p style="background-color:#ff0000; color:#ffffff">Цвет HTML текста белый, фон красный</p>

Результат: цвет HTML текста и его фон

Атрибут background-color определяет фон, в данном случае изменения затрагивают текст.

ab-w.net

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

  • Имя цвета — В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.
  • HEX-код цвета — Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета — красный, зеленый и синий. HEX-код — это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

Раньше в HTML рекомендовалось использовать только безопасную палитру цветов, которая гарантированно отображалась во всех браузерах и на всех мониторах одинаково. Но сегодня ей ограничиваться совершенно не обязательно, так как и браузеры и мониторы давно научились правильно отображать гораздо больший список цветов. А вот указывать цвета по именам я вам как раз и не рекомендую, дело в том, что многие браузеры до сих пор с одним и тем же именем связывают разные цвета. Поэтому в данном учебнике я буду всегда использовать именно HEX-коды цветов.

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

И как обычно, чтобы изменить цвет текста на всей странице — достаточно указать атрибут style в теге <BODY>. А если необходимо изменить цвет шрифта для фрагмента текста, то заключите его в тег <SPAN> и примените атрибут к нему.

Пример изменения цвета текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Изменение цвета текста</title> </head> <body> <h5 style="color:#FF0000">Красный текст заголовка</h5>  <p style="color:#0000FF">Синий текст параграфа.</p>  <p>  <em style="color:#008000">Зеленый курсив.</em>  <span style="color:#FF0000">Красный текст.</span>  </p> </body> </html>

Результат в браузере

seodon.ru

You May Also Like

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.