Далее на странице...
В предыдущей статье мы рассмотрели свойства, отвечающие за оформление шрифта. На этой странице продолжаем работу с текстом: знакомимся с свойствами CSS, отвечающими за форматирование и оформление текста.
Выравнивание текста
Свойство text-align позволяет выравнивать текст по горизонтали в пределах элемента.
По умолчанию текст размещается в левой части элемента - значение left. Он также может располагаться в правой части, выравниваться по центру или по ширине элемента, если свойство text-align принимает соответственно значения right, center и justify.
Свойство применимо ко всем элементам.
<div class="border_green">
<p style="text-align:left;"> Текст расположен слева. </p>
<p style="text-align:center;"> Выравнивание по центру. </p>
<p style="text-align:right;"> Текст расположен в правой части абзаца. </p>
</div>
Текст расположен слева.
Выравнивание по центру.
Текст расположен в правой части абзаца.
Оформление и выделение текста
Свойство text-decoration позволяет определенным образом выделить текст:
подчеркнуть текст - значение underline, перечеркнуть текст - значение line-through,
провести линию над текстом - значение overline и установить мигающий текст - значение blink .
Присвоение свойству text-decoration значения none отменяет все оформление, включая подчеркивание ссылок, устанавливаемое браузером по умолчанию.
Свойство применимо ко всем элементам.
Отступ первой строки
Свойство text-indent позволяет установить величину отступа первой строки в элементе.
Величина отступа измеряется в единицах принятых в CSS (подробнее здесь...) или задается в %.
Свойство применимо к блочным элементам (подробнее здесь...).
<p> Первая строка этого абзаца не выделена отступом. По умолчанию величина отступа первой строки равна 0. </p>
<p style="text-indent:25px;"> Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа! </p>
Первая строка этого абзаца не выделена отступом. По умолчанию величина отступа первой строки равна 0.
Отступ первой строки этого абзаца составляет 25 пикселей. Как видите, следующая строка не имеет отступа!
Регистр букв
Свойство text-transform задает регистр букв для текста элемента.
Все буквы текста в элементе будут заглавными, если свойству text-transform присвоено значение uppercase, строчными при значении lowercase или каждое слово в тексте будет начинаться с заглавной буквы при значении capitalize.
При значении none (значение по умолчанию) текст не меняет регистра.
Свойство применимо ко всем элементам.
<p style="text-transform:uppercase;"> Все буквы текста в верхнем регистре. </p>
<p style="text-transform:capitalize;"> Лишь первая буква каждого слова в верхнем регистре. </p>
Все буквы текста в верхнем регистре.
Лишь первая буква каждого слова в верхнем регистре.
Интервал между буквами и словами
Свойства letter-spacing и word-spacing задают соответственно интервал между буквами и интервал между словами в тексте элемента.
Интервал задается в единицах длины, принятых в CSS (подробнее здесь...).
По умолчанию эти расстояния зависят от используемого шрифта.
Свойства применимы ко всем элементам.
<p style="letter-spacing:5px;"> Интервал между буквами равен 5 пикселям. </p>
<p style="word-spacing:10px;"> Расстояние между словами составляет 10 пикселей. </p>
Интервал между буквами равен 5 пикселям.
Расстояние между словами составляет 10 пикселей.
Межстрочный интервал
Межстрочный интервал устанавливается с помощью свойства line-height.
Интервал задается в единицах длины, принятых в CSS (подробнее здесь...); в % относительно высоты текущего шрифта, которая принимается за 100%; или указывается любое положительное число - множитель. В этом случае интервал будет равен произведению множителя на размер текущего шрифта.
При значении normal (значение по умолчанию) межстрочный интервал зависит от шрифта и определяется браузером.
<p style="line-height:2;"> Установим межстрочный интервал, выбрав в качестве значения число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта. </p>
Установим межстрочный интервал, выбрав в качестве значения свойства число 2. То есть множитель равен 2. В итоге интервал в два раза больше размера текущего шрифта.
Пробелы и переносы
По умолчанию несколько пробелов в исходном коде браузеры отображают как один, а перенос текста на следующую строку происходит автоматически.
Свойство white-space позволяет учесть все пробелы, установленные в исходном коде, а также контролирует перенос текстовой строки.
При значении pre свойства white-space браузер учтет все пробелы и переносы в исходном коде. Но автоматический перенос строк не работает.
При значении nowrap пробелы и переносы не учитываются, и если не осуществить перенос строки с помощью тега , то добавится полоса прокрутки.
И значение по умолчанию normal, как уже упоминалось, не учитывает несколько пробелов, и при этом имеет место автоматический перенос сток.
Свойство применимо к блочным элементам (подробнее здесь...).
Добавление тени
Оформление текста тенью придает ему эффект трехмерности и позволяет таким образом заметно выделить его, привлекая тем самым внимание.
Добавление к тексту тени происходит при помощи свойства text-shadow.
Обязательными параметрами тени являются сдвиги по оси X и по оси Y, которые задаются в единицах измерения, принятых в CSS (подробнее здесь...). Далее можно указать радиус размытия тени (также в единицах измерения, принятых в CSS), и, при необходимости, цвет тени, который можно задать двумя способами (подробнее здесь...).
По умолчанию радиус размытия тени равен 0, а цвет тени совпадает с цветом текста.
Добавление нескольких теней приветствуется с точки зрения улучшения визуального эффекта при их сочетании.
Но в использовании тени есть и недостаток, заключающийся в том, что браузер Internet Explorer понимает добавление тени только с 10.0 версии.
<p style="color:#CCFF33; font-size:40px; text-shadow: #FF3366 3px 3px 5px, teal 3px 3px 10px; "> К тексту добавлены две тени! </p>
К тексту добавлены две тени!
