С помощью CSS Вы можете оформлять текст HTML элементов.

Цвет текста

С помощью CSS свойства color Вы можете изменять цвет текста HTML элементов.

Цвет может быть задан следующими способами:

1. С помощью названия цвета (например 'red' задаст красный цвет);
2. С помощью RGB значения (например 'rgb(255,255,255)' задаст белый цвет);
3. С помощью шестнадцатеричного значения (например '#00ff00' задаст зеленый цвет).

Пояснения:

Первый способ в основном используется для задания основных цветов, названия которых хорошо известны. Например red определит красный, blue - синий, white - белый.

Второй способ может использоваться для задания любых цветов и оттенков.

Синтаксис:

rgb(красный,зеленый,голубой)

Например rgb(255,0,0) задаст красный цвет, а rgb(0,255,0) зеленый. Смешивая красный с зеленым rgb(255,255,0) мы получим желтый.

Третий способ по функциональности эквивалентен второму, но более компактен. На практике в основном используют именно этот способ.

Синтаксис:

#красныйзеленыйголубой

Например #ff0000 задаст красный цвет, а #00ff00 зеленый. Смешивая красный с зеленым #ffff00 мы получим желтый.

Теперь попробуем перекрасить абзацы в зеленый цвет всеми перечисленными выше способами:

p {color:green;}
p {color:rgb(0,255,0);}
p {color:#00ff00;}

Обратите внимание: удобно выбирать необходимые оттенки цвета можно с помощью подборщика цветов.

Выравнивание текста

С помощью CSS свойства text-align Вы можете выровнять текст элемента по горизонтали.

Текст может быть выровнен:

• По центру (значение center);
• По левому краю (left);
• По правому краю (right);
• По ширине (justify).

Обратите внимание: по ширине (justify) текст выравнивается путем растягивания всех строчек до одинаковой длины. Этот метод выравнивания часто используется в газетах и журналах.

p.ta1 {text-align:center;}
p.ta2 {text-align:left;}
p.ta3 {text-align:right;}
p.ta4 {text-align:justify;}

Свойство text-decoration

С помощью CSS свойства text-decoration Вы можете сделать текст HTML элемента:

• Подчеркнутым (значение underline)
• Перечеркнутым (line-through)
• Отобразить над текстом элемента линию (overline)

p.td1 {text-decoration:underline;}
p.td2 {text-decoration:line-through;}
p.td3 {text-decoration:overline;}

Свойство text-decoration со значением none "очищает" текст от всех вышеперечисленных эффектов. Это может использоваться для создания не подчеркнутых ссылок.

a:link {text-decoration:none;}
a:visited {text-decoration:none;}

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

Отступ между словами и буквами в тексте

С помощью CSS свойства letter-spacing Вы можете увеличивать или уменьшать отступ между буквами в тексте HTML элементов.

p.ls1 {letter-spacing:10px;}

С помощью свойства word-spacing Вы можете увеличивать или уменьшать отступ между словами в тексте HTML элементов.

p.ws1 {word-spacing:15px;}

Остальные CSS свойства оформления текста

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

Сделайте сами

Обратите внимание: для выполнения этого задания Вам необходимо будет посетить CSS справочник так как не все свойства оформления текста были разобраны в данной главе.

Задание 1 оформите элементы согласно их описанию:

1. В данном абзаце отступ между буквами равен 17 пикс., а отступ между словами 5 пикс. 
Данный абзац оранжевого цвета.
2. Текст данного элемента подчеркнут, отступ между буквами в нем равен 15 пикселей. 
Данный абзац серого цвета.
3. Текст данного элемента выровнен по центру, отступ между словами в нем равен 10 
пикселей. Данный элемент имеет цвет #ff3366.
4. Текст данного элемента выравнен по правому краю, отступ между буквами в нем равен 6 
пикселей. Текст написан маленькими буквами красного цвета.
5. Текст данного элемента выравнен по центру, подчеркнут, отступ между буквами в нем 
равен 7 пикселей. Текст написан большими буквами зеленого цвета.