Создание сайтов с нуля - урок 18 - Текст и шрифты, 2 часть

Горизонтальное выравнивание текста: text-align и text-align-last

Выравнивание текста по горизонтали задается с помощью свойства text-align. Его мы уже использовали в уроке с таблицами. Значения свойства:

• left - выравнивание по левому краю;
• right - по правому краю;
• center - по центру;
• justify - по ширине.

В свою очередь при задании тексту свойства text-align со значением justify, появляется дополнительная возможность управлять выравниванием последней строки текста в абзаце при помощи свойства text-align-last.

Например:

• left- строка выравнивается по левому краю.
• right - строка выравнивается по правому краю.
• center - строка выравнивается по центру.
• justify - строка выравнивается по ширине. Если в последней строке только одно слово, то оно будет выравнено по левому краю.

Вертикальное выравнивание: vertical-align

Выравниванием текста по вертикали можно управлять с помощью свойства vertical-align. Его действие хорошо заметно в ячейках таблицы. Внутри текстовой строки «работа» этого свойства заметна, если в ней есть фрагменты разного размера.

У данного свойства много значений, но самые часто используемые:

• top - выравнивание по верхнему краю строки;
• middle - по середине;
• bottom - по нижнему краю;
• baseline - по базовой линии (значение по умолчанию);
• super - верхний индекс;
• sub - нижний индекс.

Свойство text-decoration: подчёркивание, надчеркивание и зачеркивание

Дополнительное оформление текста можно задать с помощью свойства text-decoration. Его значения:

• underline - подчеркивание;
• line-through - зачеркивание;
• overline - черта сверху;
• none - убирает все эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел.

Свойство text-transform

С помощью свойства text-transform можно управлять регистром символов: делать буквы строчными или прописными:

• lowercase - все строчные;
• uppercase - все прописные;
• capitalize - каждое слово начинается с прописной;
• none - отменяет изменение регистра.

Свойство text-indent

Устанавливает величину отступа первой строки текста в блоке. Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока.

Свойство letter-spacing

Изменяет расстояние между символами. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др.

Отдельно хочу отметить использования тега span – универсального линейного элемента, который как раз и предназначен для абсолютно разноплановой работы с текстом. Тег span сам по себе абсолютно ничего не делает и не влияет на визуальное отображение текста, а вот задав ему класс можно очень легко воздействовать на его содержимое при помощи стилей CSS.