Форматирование текста. Часть 2

Прописные буквы

Преобразовать текст в прописные буквы возможно при помощи свойства text-transform.

• text-transform: uppercase; - преобразования в прописные буквы;
• text-transform: lowercase; - преобразования в строчные буквы;
• text-transform: capitalize; - преобразования первых букв в прописные буквы;
• text-transform: none; - запрет изменений регистра в тексте.

Капитель

Свойство font-variant, позволяет прописать все буквы станут капителью (малыми прописными).

font-variant: small-caps;

Декорирование текста

Декорированием считается добавление различных дополнительных элементов. С его помощью можно добавить линии подчеркивания, надчеркивания, зачеркнуть текст или сделать его мигающим. Свойство text-decoration может принимать следующие значения:

• text-decoration: underline; - подчеркивание текста;
• text-decoration: overline; - надчеркивание текста;
• text-decoration: line-through; - зачеркивание текста;
• text-decoration: blink; - мигание текста;
• text-decoration: none; - отмена декорирования.

Можно применять сразу несколько значений декорирования:

text-decoration: underline, overline; - подчеркивание и надчеркивание текста.

Интервалы между символами и словами

Уменьшение или увеличение межсимвольного интервала (трекинга) осуществляется с помощью свойства letter-spacing.

Чтобы уменьшить межсимвольный интервал, свойству присваиваются отрицательные значения:

letter-spacing: -9px;

Положительные значения свойства делают промежуток между символами больше:

letter-spacing: .7em;

Для изменения интервала между словами, используется свойство word-spacing. Оно увеличивает / уменьшает промежуток между словами, не затрагивая интервалы между буквами внутри слов:

word-spacing: 2px;

Для обоих свойств можно использовать любые единицы измерений, применимые к тексту: пикселы, em, проценты (с положительными или отрицательными значениями).

Тень

В CSS3 появилась возможность добавлять тень для текста.

Свойство text-shadow требует задания четырех параметров: горизонтального смещения (насколько левее (отрицательное значение) или правее (положительное значение) текста должна отображаться тень), вертикальное смещение (насколько выше (отрицательное значение) или ниже (положительное значение) текста должна появиться тень), степень размытости тени (значение 0px (без размытости) приводит к отбрасыванию четкой тени, и чем больше будет значение, тем более размытой будет тень) и цвет отбрасываемой тени.

text-shadow: 3px, 4px, 2px, #45A7D2;