3. Каскадные таблицы стилей


3.4. Форматирование текста

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

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

<р style="letter-spacing: 0.5em">.

Браузер увеличивает не только расстояние между символами слов, но и расстояние между словами.

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

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

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

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

Свойство vertical-align определяет положение элемента по вертикали относительно элемента-родителя и может принимать значения:

  • baseline – выравнивание базовой линии элемента (или низа, если элемент не имеет базовой линии) по базовой линии родителя;
  • middle – выравнивание средней точки элемента (обычно изображения) на уровне базовой линии родителя плюс половина ширины блока содержимого родителя;
  • sub – элемент отображается в виде нижнего индекса;
  • sup – элемент отображается в виде верхнего индекса;
  • text-top – выравнивание верха элемента с верхом шрифта элемента-родителя;
  • text-bottom – выравнивание низа элемента с низом шрифта элемента-родителя;
  • top – выравнивание верха элемента с верхом самого высокого элемента строки;
  • bottom – выравнивание низа элемента с низом самого низкого элемента строки.