Оформление текста CSS (2 часть)
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали немного об оформлении текста в CSS. В данной статье разберем, как выравнивать текст в CSS, как задать красную строку, а также такие свойства как line-height, word-spacing, letter-spacing, text-transform. Выравнивание текста в CSS осуществляется с помощью свойства text-align. Сразу скажу, что данное свойство встречается абсолютно везде. Существует 4 значения этого свойства:
left — выравнивание по левому краю, значение по умолчанию, которое использует браузер,
center — выравнивание по центру,
right — выравнивание по правому краю,
justify — выравнивание по ширине. Это означает, что браузер будет выравнивать текст как по левому, так и по правому краю, за счет увеличения расстояния между словами.
Давайте создадим html-страницу с inline-стилями для каждого элемента:
<html> <head> <meta charset="utf-8"/> </head> <body> <h1 style="text-align:center;">Заголовок первого уровня, выравненный по центру</h1> <p style="text-align:left;">Абзац, выравненный по левому краю</p> <p style="text-align:right;">Абзац, выравненный по правому краю</p> <p style="text-align:justify"><noindex>Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo. Lorem ipsum dolor sit amet consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</noindex></p> </body> </html>
Скопируйте данный код и посмотрите, как он работает. Обратите внимание на работу свойства text-align со значением justify.
Красная строка или отступ создаётся с помощью свойства text-indent. Значение данного свойства можно задавать в различных величинах. Давайте добавим данное свойство для нашего самого большого абзаца (который выравнен по ширине):
<p style="text-align:justify;text-indent:20px;">
После обновления страницы вы увидите, что появился отступ у абзаца.
Давайте теперь разберемся, как задавать межстрочный интервал. Делается это с помощью свойства line-height. Давайте добавим к нашему абзацу межстрочный интервал в 40px и посмотрим, что получится:
<p style="text-align:justify;text-indent:20px;line-height:40px;">
После обновления страницы, вы увидите, что межстрочный интервал увеличился. По умолчанию данное свойство стоит со значением normal. Данный интервал можно задавать в виде множителя. Если у нас размер шрифта стоит 15px, а множитель стоит равный трем, то у нас межстрочное расстояние будет 45px. В CSS это будет выглядеть так:
p {
font-size:15px;
line-height:3;
}
На практике обычно используются множители у данного свойства, вместо фиксированного значения.
Также можно изменять интервал между словами. Делается это с помощью свойства word-spacing (word с англ. «слово»). Давайте на примере покажу работу данного свойства:
<p style="text-align:justify;text-indent:20px;word-spacing:10px;">
После обновления страницы вы увидите, что расстояние между словами стало 10px.
Также можно изменять расстояние между буквами. Делается это с помощью свойства letter-spacing (letter с англ. «буква»). Простой пример:
<p style="text-align:justify;text-indent:20px;letter-spacing:10px;">
После обновления страницы вы увидите, что расстояние между буквами стало 10px.
Иногда необходимо бывает изменить регистр букв. Делается это с помощью свойства text-transform. У данного свойства есть следующие значение:
uppercase — делает все буквы текста заглавными. Обычно делается для заголовков.
lowercase — делает все буквы текста строчными.
capitalize — делает каждую первую букву слова заглавной.
Вы можете сказать, что можно и напрямую в HTML писать как нужно текст (где-то большие, где-то маленькие). Однако, это нарушает идеологию, что html — это разметка, CSS — это оформление.
Домашнее задание: создайте 3 заголовка 2 уровня. Каждому из них, с помощью inline-стилей, задайте различное значение свойства text-transform.
В данной статье вы изучили такие свойства оформления текста, как text-align, text-indent, line-height, word-spacing, letter-spacing, text-transform.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
