Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Свойства текста в CSS Списки в CSS

Свойства текста в CSS

Letter-spacing Line-height Text-align Text-decoration
Text-indent Text-shadow Text-transform White-space Word-spacing


Выравнивание текста
К оформлению текста...
Отступ первой строки
Регистр букв
Интервал между буквами и словами
Межстрочный интервал
Пробелы и переносы
Добавление тени


В предыдущей статье мы рассмотрели свойства, отвечающие за оформление шрифта. На этой странице продолжаем работу с текстом: знакомимся с свойствами 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 пробелы и переносы не учитываются, и если не осуществить перенос строки с помощью тега <br>, то добавится полоса прокрутки.

И значение по умолчанию 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>

Результат:


К тексту добавлены две тени!


Шрифты в CSS Свойства текста в CSS Списки в CSS
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru