CSS правила оформления текста

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

Отступ первой строки блока

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

Для задания отступа в первой строке блока применяется свойство выравнивания text-indent, принимающее следующие значения:

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

Пример использования: p {text-indent:25px;}

Выравнивание текста в блоке

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

Для выравнивания текста в блоке используется свойство CSS text-align, принимающее следующие значения:

left – выравнивание текста по левому краю блока
center - выравнивание текста по центру блока
right - выравнивание текста по правому краю блока
justify - равномерное выравнивание текста
inherit – выравнивание текста ведется по значению родительского элемента.

Способ применения свойства выравнивания: p {text-align: left;}

Визуальное оформление текста

Визуальное оформление текста задается параметром text-decoration.

Параметр CSS text-decoration может принимать следующие значения:

none – без оформления (по умолчанию).
underline – текст, подчеркнутый одной линией
overline - линия, расположенная над текстом
line-through – текст, перечеркнутый линией
blink – мерцающий текст.
inherit – параметр text-decoration принимает значение родительского элемента.

Способ применения свойства: p {text-decoration: line-through;}

Изменение регистра знаков в тексте

Параметр каскадных таблиц стилей text-transform дает возможность в автоматическом режиме изменить регистр знаков в тексте.

Основные параметры, определяющие свойство CSS text-transform:

none – свойство не изменяет вывод текста (по умолчанию).
capitalize – первая буква каждого слова отображается в верхнем регистре
uppercase – весь текст отображаются строчными буквами, то есть в верхнем регистре
lowercase - буквы текста отображаются прописными, то есть в нижнем регистре
inherit - значение родительского элемента.

Способ применения свойства: p {text-transform: lowercase;}

Создание эффекта затемнения текста

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

Свойство CSS text-shadow может принимать значения:

none – значение отсутствует (по умолчанию).
color – определяет цвет затемнения в тексте
первое числовое значение (с положительным знаком) определяет расстояние по горизонтали вправо от текста. Отрицательное значение определяет расстояние влево от текста.
второе числовое значение (с положительным знаком) определяет расстояние по вертикали вниз от текста. Отрицательное значение определяет вверх от текста.
третье числовое значение определяет радиус нерезкости тени текста.
inherit – определяет в качестве числового параметра элемента значение родительского элемента.

Способ применения свойства: h3{text-shadow: blue 3px 3px 2px}

Задание при помощи CSS интервала между символами текста

Каскадные таблицы стилей позволяют при помощи параметра letter-spacing определить интервал между символами текста.

Параметр letter-spacing может принимать значения:

none – определенный стандартом интервал, соответствующий данному виду шрифта.
числовое значение, выраженное при момощи стандартных для CSS единиц, которое определяет интервал между символами.
inherit - определяет в качестве числового параметра элемента значение родительского элемента.

Способ применения свойства: div {letter-spacing: 3px;}

Правила CSS для измения интервала между словами в тексте

Правило CSS word-spacing позволяет эффективно изменять интервалы между словами в тексте.

Значения, которые может принимать параметр word-spacing:

none – определенный стандартом интервал, соответствующий данному виду шрифта.
числовое значение, выраженное при момощи стандартных для CSS единиц, которое определяет интервал между словами текста.
inherit - определяет в качестве числового параметра элемента значение родительского элемента

Способ применения свойства: div{word-spacing: 4px;}

Партнеры