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

В этом видеоуроке вы научитесь:

  • Изменять цвет текста
  • Изменять цвет фона

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 <font face="Monotype Corsiva" color="#CC0000"><h2>Текст заголовка H2</h2></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">

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

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

Подпишись на info-line:

Получать новые уроки на e-mail:

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

  1. Рахим 8 февраля 2012 в 14:05 #

    а я могу потом на свой сайт зделать 3 д анимацию

    • Олег Зубцов 8 февраля 2012 в 21:06 #

      А кто запрещает?) Это можно сделать в gif-формате или используя технологию flash.

  2. Рахим 9 февраля 2012 в 4:41 #

    а где можно скачать видеокурс по фотошопу ? скажи пожалуйста

    • Олег Зубцов 9 февраля 2012 в 13:04 #

      Видеокурс по фотошопу я еще не записывал, но он состоит в списке будущих курсов 🙂

  3. Рахим 9 февраля 2012 в 13:54 #

    ясно а вы где учились курсу по фотошопу?

  4. Рахим 9 февраля 2012 в 14:02 #

    яснно а скачиваю видеокурс по фотошопу от А до Я...

  5. Alex 1 июля 2012 в 7:16 #

    Здравствуйте, у меня не меняется стиль шривта. может где то в настройках изменить?

Оставить ответ