Html цвет текст: Цвет текста (color) в HTML

Leave a Comment / Html / By /

Содержание

УЧЕБНИК HTML для новичков — Цвет текста

Главная >> Уроки HTML



А можно ли сделать текст цветным? Да ради бога! Для этого существует атрибут <color>. Вот с этим колером мы сейчас и поработаем. Вообще, цвета можно задавать двумя разными способами. Первый — можно использовать словесное обозначение цвета: blue, black, yellow, green, white и т.д. А можно — и их цифровое обозначение, только не забывайте перед цифровым эквивалентом ставить «решетку» — «#»! Так, цвет blue (голубой) имеет свое числовое значение #0000ff, цвет red (красный) — значение #FF0000 и так далее. То есть если мы напишем:

<FONT color=»red»>Красный цвет текста</FONT>

или

<FONT color=»#ff0000″>И тут красный!!!</FONT>

Обе эти записи идентичны. Приведу значения некоторых цветов:

Таблица цветов

Название цветаColorКодЦвет
aкваAqua#00FFFF 
Черныйblack#000000 
Синийblue#0000FF 
Фуксияfuchsia#FF00FF 
Серыйgray#808080 
Зеленыйgreen#008000 
Известьlime#00FF00 
Темно-бордовыйmaroon#800000 
Темно-синийnavy#000080 
Оливковыйolive#808000
 
фиолетовыйpurple#800080 
Красныйred#FF0000 
Серебряныйsilver#C0C0C0 
Чирокteal#008080 
Белыйwhite#FFFFFF 
желтыйyellow#FFFF00 

Ну а теперь от слов к практике?

Возьмем то же самое стихотворение, и поставим перед собой задачу:

  1. Заголовок напишем шрифтом Comic Sans MS, дадим крупный размер в 7 пунктов, разместим по центру и зальем красным цветом.
  2. Каждый куплет стихотворения раскрасим в свой цвет: первый — в синий, второй — в зеленый, ну а третий — в желтый. Причем, цвет первого куплета дадим в простом названии
    blue    , второй и третий — в числовом эквиваленте зеленого и желтого цветов.
  3. Первый куплет напишем шрифтом Impact
  4. Размер второго куплета дадим размером в абсолютном размере 4 пункта
  5. Размер третьего куплета дадим в относительном размере +1 пункт
  6. Ну и автора задвинем в тег ADDRESS

Задача ясна? Ну тогда поехали! Открываем наш незаменимый шаблон shablon.html и вставляем туда то, что нам надо:

Листинг 10. Стихотворение

<HTML>
  <HEAD>
<TITLE></TITLE>
  </HEAD>
  <BODY>
    <FONT color=red face=»Comic Sans MS» size=7>
      <CENTER>СТИХОТВОРЕНИЕ</CENTER>
    </font>

    <FONT color=blue>


      Это не сложно <BR>
      Это не важно <BR>
      Просто отважно <BR>
      В небо шагнуть <BR>
    </FONT>

    <FONT color=»#008000″ size=4>


      И осторожно <BR>
      Там, где возможно <BR>
      Темного облака <BR>
      Край отогнуть. <BR>
    </FONT> <BR>

    <FONT color=»#ffff00″ size=+2>


      Стертые лица, <BR>
      Забытые профили <BR>
      И многоточий упрямая нить. <BR>
      Свет разливается <BR>
      И проявляется <BR>
      То, что уже никогда не забыть.
<BR>
    </FONT>

    <ADDRESS>

Ирина Лео</ADDRESS>

  </BODY>
</HTML>

Сохраним наш файл под именем «text4.html» и затем откроем этот файл в окне браузера:


Вот они, цвета радуги!

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

Вот и подошел к концу наш очередной урок. Он был не таким уж и легким, согласитесь! Но зато мы теперь знаем самое необходимое, чтобы красиво оформить любой текст.

А в следующем уроке мы научимся работать с фоном. И это будет последнее, что необходимо для нашей первой странички.

Тренировка!

Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!



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

Скачать материалы:

Скачать 5-ый видеоурок по HTML Размер: 3.75 MB, скачали: 483 раз.
Скачать таблицу цветов Размер: 47.78 kB, скачали: 1005 раз.

  1. Разархивировать скачанный файл.
  2. Открыть папку index.
  3. Запустить файл index.html в браузере.

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

цвет текста, цвет фона и др.

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

Давайте перейдем в наш код. Как видите, я убрал все лишние теги, которые у нас были и ввел атрибут color со значением #0000FF. Надеюсь, вы уже знаете, что такое теги и атрибуты.

 <font color="#0000FF"></font>

Что значит этот шестизначный код? Эти шесть символов означают задание определенного цвета нашему тексту. Введем в качестве текста «Синий цвет»:

 <font color="#0000FF">Синий цвет</font>

Вышеупомянутые шесть знаков задают именно синий цвет. Чтобы узнать, какие символы задают тот или иной цвет, можно посмотреть таблицу от сайта http://addedbytes.com, которая приложена к видеоуроку. Например, чтобы написать красный цвет, вы берете значение #CC0000.

Перейдем обратно в код. Давайте сохраним и проверим нашу страничку. Переходим в браузер. Обновляем. Как видите, появился текст синего цвета.

Давайте зададим тексту заголовка h3 красный цвет. Находим <h3> и вводим теги <font></font>:

 <font color="#CC0000"><h3>Текст заголовка h3</h3></font>

Сохраняем. Проверяем в браузере. Как видим, текст стал красного цвета.

Теперь давайте рассмотрим другие атрибуты тега <font>. Перейдем в код и зададим гарнитуру нашего текста. Она задается атрибутом face. Что такое гарнитура? Гарнитура –  это шрифт нашего текста. Например, Monotype Corsiva.

 <font face="Monotype Corsiva" color="#CC0000"><h3>Текст заголовка h3</h3></font>

Проверяем. Как видим, шрифт заголовка изменился.

Перейдем в код и зададим размер нашего текста. Это делается с помощью атрибута size.

 <font size="6" color="#0000FF">Синий цвет</font>

Сохраним и посмотрим. Наш текст увеличился. Тег <font> мы разобрали.

Допустим, мы хотим, чтобы весь текст, которому не задан определенный цвет с помощью дополнительных тегов и атрибутов, отображался какого-либо цвета. Для этого нам нужно в теге <body> ввести атрибут text. Зададим, например, зеленый цвет.

 <body text="#00CC00">

Сохраняем. Обновляем страницу в браузере. Как видим, текст стал зеленого цвета.

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

Теперь перейдем к последней части видеоурока. Зададим цвет фона нашей странице. Он задается атрибутом bgcolor.

 <body text="#00CC00" bgcolor="#00CCCC">

Сохраним и проверим в браузере. Как видите, цвет фона стал голубым. Давайте лучше поставим желтый.

 <body text="#00CC00" bgcolor="#FFFF00">

Сохраняем. Проверяем. Стало посимпатичнее.

На этом всё. До встречи в следующем видеоуроке, в котором мы познакомимся с огромной массой дополнительных параметров текста.

Радужный текстовый генератор | HTML Создание многоцветных текстовых слов

Как создать радужный текст онлайн. вот инструмент для создания радужного текста HTML

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

Максимально допустимое количество символов: 1000. Существует два типа раскрашивания текста: один для окрашивания каждой буквы, а другой — для окрашивания только слов.

Демо: