Изменяем цвет текста
Кодирование цвета
Цветов огромное количество, но из них выделены только три, которые считаются основными: красный, зелёный и синий. При смешении двух основных цветов результат осветляется: из смешения красного и зелёного получается жёлтый, из смешения зелёного и синего — голубой . Если смешиваются все три цвета, образуется белый. Такая модель цвета носит название RGB по первым буквам английских слов red, green и blue.
Каждый цвет может иметь различную интенсивность. Интенсивность цвета кодируют шестнадцатиричным числом. Цифры в шестнадцатиричной системе исчисления располагаются так: 0 1 2 3 4 5 6 7 8 9 a b c d e f. Минимальное значение 0, а максимальное — f.
Интенсивность каждого цвета записывается не одной, а двумя цифрами: минимальное значение обозначается 00, а максимальное — ff. Цвета записывают в последовательности RGB, то есть красный, зелёный, синий. Например, зелёный цвет 00ff00, красный — ff0000, синий — 0000ff, белый — ffffff.
В
программе Photoshop с помощью пиктограммы 
на
панели инструментов можно вызвать окно
Color Picker (указатель цвета), показанное на
рис.1. Внизу окна после знака # показан
шестнадцатиричный код цвета.
|
Рис. 1. Окно указателя цвета в Photoshop |
Задание 1
С помощью окна указателя цвета в Photoshop подставьте приведённые выше коды (00ff00, ff0000, 0000ff, ffffff)и убедитесь, что они соответствуют названным цветам.
Какой получается цвет при смешении красного и зелёного? Красного и синего? Какой код образует серый цвет? Чёрный?
Цвет текста
Но вернёмся к нашей страничке font.html и окрасим слова «Типы шрифта для веб-дизайна» в красный цвет. Для этого внутри открывающего тега <h2> нужно добавить атрибут style и CSS-свойство color: <h2 style="color:#ff0000;">Типы шрифта для веб-дизайна</h2>
Здесь мы встретились с двумя новыми понятиями: атрибут тега и CSS-свойство.
Атрибуты позволяют менять первоначальные характеристики тега на странице. Например, атрибут style задаёт CSS-свойство, атрибут src в теге img задаёт путь к файлу с картинкой и так далее. Атрибут записывается внутри открывающего тега вслед за его названием. Синтаксис атрибута следующий:
имя атрибута;
знак равенства;
значение атрибута в кавычках.
CSS-свойство определяет внешний вид элемента на экране. Например, color задаёт цвет текста, background-color — цвет фона. Синтаксис CSS-свойства следующий:
имя свойства, например, color;
двоеточие :;
значение свойства, например, #ff5700.
Заметьте, что атрибут style можно применить в любом теге.
Задание 2
На странице list.html покрасьте списки в следующие цвета:
заголовок «Группа веб-дизайна» — в коричневый цвет (660000), список имён — в красный (ff0000);
заголовок «Месяцы года» — в тёмно-зелёный цвет (006600),
зимние месяцы — в синий (0000ff),
весенние — в зелёный (00ff00),
летние — в темно-зелёный (006600),
осенние — в рыжий (ff6600).
Что должно получиться
Группа веб-дизайна
Олег
Володя
Ашот
Месяцы года
январь
февраль
март
апрель
май
июнь
июль
август
сентябрь
октябрь
ноябрь
декабрь
Задание 3
На своей странице font.html покрасьте
заголовок «Типы шрифта для веб-дизайна» в красный цвет (ff0000),
названия абзацев serif и sans-serif — в тёмно-зелёный цвет (006600),
текст абзацев — в зелёный цвет (00ff00).
Что должно получиться
Типы шрифта для веб-дизайна
serif На концах линий, составляющих буквы, есть маленькие чёрточки, засечки. Этот тип шрифта хорошо подходит для представления на экране текстов большого размера.
sans-serif Буквы данного семейства шрифтов не имеют засечек. И хотя символы sans-serif менее отчётливы, они хорошо подходят для текстов, набранных шрифтом меньшего размера.
Цвет фона
Цвет фона задаётся CSS-свойством background-color. Если применить его к тегу body, то цвет фона изменит вся страница: <body style="background-color:#000000;">
Задание 4
Задайте странице font.html фон цвета ffffcc.
В дальнейшем мы познакомимся и с другими CSS-свойствами. Рассмотреные на занятии теги, атрибуты и свойства CSS сведены в таблицу, приведённую ниже.
Теги |
|
<ul> |
ненумерованный список |
<li> |
пункт списка |
<ol> |
нумерованный список |
Атрибуты тегов |
|
style |
оформление тега |
Свойства CSS |
|
color |
цвет текста |
background-color |
цвет фона |