В HTML существует 16 предопределенных цветов, у каждого из которых есть имя:
silver | gray | maroon | green | navy | purple | olive | teal |
---|---|---|---|---|---|---|---|
white | black | red | lime | blue | magenta | yellow | cyan |
В HTML 4 используется технология RGB, которая позволяет на веб-странице использовать до 166=16777216 цветов
RGB - это Red (красный), Green (зеленый), Blue (синий). Образно говоря, каждый цвет образуется в результате свечения с той или иной интенсивностью трех лампочек: красной, зеленой и синей.
Цвета отличные от 16 предопределенных можно составить указав их шестнадцатеричный код RGB.
Примечание. Было бы желательно Вам повторить двоичную, восьмеричную, десятичную и шестнадцатеричную системы счисления.
В шестнадцатеричной системе имеем 16 цифр: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f.
Для составления кода цвета нужны символ # и 6 шестнадцатеричных цифр: #X1X2X3 X4X5X6, где Xi одно из 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f для i от 1 до 6. X1X2 – для красного цвета, X3X4 – для зеленого цвета, X5X6 – для синего цвета. Например:
#ffffff | #000000 | #ff0000 | #00ff00 | #0000ff | #ffff00 | #ff00ff | #00ffff |
---|---|---|---|---|---|---|---|
#ab44ff | #f8ee99 | #c5a24d | #703916 | #22ff44 | #44ff16 | #66ff99 | #bbffdd |
Для определения цвета букв страницы по-умолчанию (default font color) нужно набрать:
1. В теге <BODY>, перед символом >
TEXT=
2. "#rrggbb" или "color"
где #rrggbb – шестнадцатеричный код цвета, или color – имя одного из 16 предопределенных цветов. Обратите внимание на наличие скобок.
Для определения цвета фона страницы (background color) нужно набрать:
1. В теге <BODY>, перед символом >
BGCOLOR=
2. "#rrggbb" или "color"
где #rrggbb – шестнадцатеричный код цвета, или color – имя одного из 16 предопределенных цветов. Обратите внимание на наличие скобок.
Для изменения цвета шрифта фрагмента текста на странице нужно набрать:
1. Перед текстом, цвет которого нужно изменить, наберите:
<FONT COLOR=
2. "#rrggbb" или "color"
где #rrggbb – шестнадцатеричный код цвета, или color – имя одного из 16 предопределенных цветов. Обратите внимание на наличие скобок.
3. >
4. Текст
5. </FONT>
Введите следующий код в html-файл, сохраните его и откройте файл в браузере для просмотра результата:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>
Моя веб-страница: Работа с цветом
</TITLE>
</HEAD>
<BODY TEXT="#124412" BGCOLOR="yellow">
<P>Цвет этого текста определен в теге BODY.</P>
<P><FONT COLOR="red">Буквы красного цвета</FONT></P>
<P>
<B>
<FONT COLOR="#111188">Жирные темно-синие буквы</FONT>
</B>
</P>
</BODY>
</HTML>
Другой пример:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<meta charset='utf-8'/>
<TITLE>
Моя веб-страница
</TITLE>
</HEAD>
<BODY>
<FONT color="#000000"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#ffffff">
<H1 ALIGN="left" style="background-color:#000;">Пример строки</H1>
</FONT>
<FONT color="#ff0000"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#BB0000"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#770000"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#00ff00"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#00BB00"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#007700"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#0000ff"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#0000bb"><H1 ALIGN="left">Пример строки</H1></FONT>
<FONT color="#000077"><H1 ALIGN="left">Пример строки</H1></FONT>
<br><B>Строка первая</B>
<br><i>Строка вторая</i>
<br><u>Строка третья</u>
</BODY>
</HTML>