Техника Web-дизайна для студента
Свойства форматирования текста
В табл. 7.5 содержатся основные свойства форматирования текста.
Таблица 7.5. Свойства форматирования текста
|
|
||
|
|
||
|
Text-align Vertical-align |
|
Text-indent |
|
Text-decoration |
|
Попе - отказ от применения |
Выравнивание текста относительно элемента, в котором он находится
Положение элемента по вертикали относительно родительского элемента
Отступ первой строки абзаца
Подчеркивание, надчеркивание или перечеркивание текста
Возможны значения: left — по левому краю, right - по правому краю, center - центрирование, justify - по ширине
Возможны значения: middle - базовая линия элемента выравнивается на уровне средней точки родителя,
Top - совмещаются верхние края элементов,
Bottom - совмещаются нижние края элементов
Задается в абсолютных единицах:
Text-indent: 10 рх
Или в процентах относительно ширины элемента
Text-indent: 5 %
Возможны значения:
Underline - подчеркивание;
Overline - надчеркивание;
Line-through - перечеркивание;
|
Text-transform |
|
Обозначение |
|
Примечания |
Трансформация
Текста
|
6 letter-spacing 7 word-spacing 8 line-height |
Дополнительное расстояние между символами, которое добавится к расстоянию, установленному по умолчанию
Расстояние между словами
Расстояние между строками
Возможны значения:
Capitalize - первые буквы каждого слова выводятся заглавными;
Uppercase - весь текст выводится заглавными буквами;
Lowercase - весь текст выводится строчными буквами;
Попе - нет трансформации текста (по умолчанию)
Абсолютное или относительное значение
Возможны положительные и отрицательные значения. При отрицательных значениях возможно наложение слов
При отсутствии единиц измерения, расстояние между строками вычисляется браузером как произведение заданного значения и размера шрифта. Например:
01/ {Ъп^ге: 16 рх; Ппе - Ие1дМ: 1.5}
Задано расстояние между строками 24 рх
Свойство text-decoration со значением попе можно в частности использовать для снятия подчеркивания гипертекста.
В качестве примера рассмотрим текст документа, в котором использованы некоторые свойства форматирования текста (листинг 7.7).
Листинг 7,7, Использование свойств форматирования текста
<HTML>
<HEAD>
<Т1ТЪЕ>форматирование текста</Т1ТЬЕ>
</HEAD>
<BODY>
<Р style="font-size: 14pt; text-indent: 20px; text-align: justify">npMMep возможностей форматирования текста. Текст выравнивается по ширине, задан отступ первой строки.<SPAN style="letter-spacing: Зрх">Этот фрагмент имеет увеличенное расстояние между символами. c/SPANXSPAN style="text - transform:capitalize">nepBHe буквы этого фрагмента выводятся заглавными буквами.</SPAN>
</Р>
</BODY>
</HTML>
Внешний вид документа в окне браузера показан на рис. 7.6.
|
Рис. 7.6. Результат применения свойств форматирования текста |
Следует обратить внимание на особенности применения свойств text-align и vertical-align. Первое из них позволяет выровнять по горизонтали содержимое того элемента, в котором оно задано. В нашем примере это содержимое абзаца, выравниваемое по ширине. Что касается свойства vertical-align, то оно позволяет выровнять по вертикали сам элемент, в котором оно задано, относительно родительского элемента. В качестве примера рассмотрим следующий документ (листинг 7.8).
Листинг 7,8. Пример использования вертикального выравнивания
<HTML>
<HEAD>
<STYLE>
<i —
.pi {font-size:18 pt; background-color: yellow}
</STYLE>
<TITLE>
Вертикальное выравнивание </TITLE>
</HEAD>
<BODY>
<P style="font-size: 32pt; color: red; background-color: Ыие">Абзац
<SPAN class=pl style="vertical-align: middle">CepeflHHa</SPAN> <SPAN class=pl style="vertical-align: top">no Bepxy</SPAN> <SPAN class=pl style="vertical-align: bottom">no низу</ЗРАМ> </P>
< /BODY>
</HTML>
Выравнивание по вертикали задано в трех фрагментах, отмеченных метками <span>. Родительским элементом является абзац, в который входят все три фрагмента.
На рис. 7.7 показан вид документа в окне браузера.
|
Рис. 7.7. Результат вертикального выравнивания отдельных фрагментов внутри абзаца |
