Форматирование текста Web-страницы

Свойства данной категории влияют на отображение символов, слов и абзацев. Они определяют расстояние между словами и буквами в словах, задают отступы и высоту строк в абзацах.

Свойство letter-spacing влияет на расстояние между символами при отображении текста. Его значение, задаваемое в единицах длины, определяет пробел, добавляемый к установленному по умолчанию пробелу между символами. На рис. 10.6 показано отображение текста с установками по умолчанию и с увеличенным на 0.5ет пробелом между символами:

Например,

<Р>{letter-spacing: 0.5em} /*все слова в абзацах будут с увеличенным на 0.5 дюйм пробелом между символами*/

<Р style="letter-spacing: 0.5em">

Содержимое абзаца

</р>} /*все слова в данном абзаце будут с увеличенным на 0.5 дюйм пробелом между символами*/

Каскадные таблицы стилей позволяют преобразовывать текст. Если значение свойства text-transform равно capitalize, то все слова отображаются с прописной буквы. Значения uppercase и lowercase этого свойства приводят, соответственно, к преобразованию всех букв в прописные или строчные, независимо от их задания в тексте документа HTML.

Свойство text-decoration задает подчеркивание, надчеркивание или перечеркивание текста. Соответствующие значения этого свойства следующие: underline, overline и line-through.

Выравнивание текста в блоке содержимого элемента определяется значением свойства text-align. Текст выравнивается по левому краю при значении left, по правому краю — при значении right и по центру — при значении center.

Отступ первой строки элемента задается значением свойства text-indent, которое определяет величину отступа в абсолютных или относительных единицах длины.

Расстояние между базовыми линиями двух соседних строк (высота строки) задается установкой значения свойства line-height. Числовое значение этого свойства определяет высоту строки, вычисляемую умножением размера шрифта текущего элемента на заданное число.

7. Отображение связей через псевдоклассы элемента А:

¾ A:link { color: red } /* непосещенная связь */

¾ A:visited { color: blue } /* посещенная связь */

¾ A:active { color: green } /* активная связь */

¾ A:hover { color: lime } /* связь, на которой расположен курсор мыши */