Электронный учебник
Учебное пособие
3. Оформление текста свойствами CSS
1.Цвет текста

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

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

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

Пояснения:

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

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

Синтаксис:

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

красный число от 0 до 255 указывающее как много красного будет в итоговом оттенке.

зеленый число от 0 до 255 указывающее как много зеленого будет в итоговом оттенке.

голубой число от 0 до 255 указывающее как много голубого будет в итоговом оттенке.

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

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

Синтаксис:

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

красный шестнадцатеричное число от 0 до ff указывающее как много красного будет в итоговом оттенке.

зеленый шестнадцатеричное число от 0 до ff указывающее как много зеленого будет в итоговом оттенке.

голубой шестнадцатеричное число от 0 до ff указывающее как много голубого будет в итоговом оттенке.

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

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

Пример:

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

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

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

С помощью 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;}

3.Свойство 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;}

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

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

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

Пример:

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

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

Пример:

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

5.Остальные CSS свойства оформления текста
Практическое задание 1

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

В данном абзаце отступ между буквами равен 17 пикс., а отступ между словами 5 пикс. Данный абзац оранжевого цвета.

Текст данного элемента подчеркнут, отступ между буквами в нем равен 15 пикселей. Данный абзац серого цвета.

Текст данного элемента выровнен по центру, отступ между словами в нем равен 10 пикселей. Данный элемент имеет цвет #ff3366.

Текст данного элемента выравнен по правому краю, отступ между буквами в нем равен 6 пикселей. Текст написан маленькими буквами красного цвета.

Текст данного элемента выравнен по центру, подчеркнут, отступ между буквами в нем равен 7 пикселей. Текст написан большими буквами зеленого цвета.