Текст (text)

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

Свойства:

text-align - определяет выравнивание текста по горизонтали.

Примеры:

text-align: left;  //  Выравнивание по левому краю

text-align: right;  //  Выравнивание по правому краю

text-align: center;  //  Выравнивание по центру

text-align: justify;  //  Выравнивание по всей ширине блокаЗначение по умолчанию - left

vertical-align - определяет выравнивание текста по вертикали.

Примеры:

vertical-align: middle;  //  Выравнивание по центру высоты

vertical-align: bottom;  //  Выравнивание по нижней части контейнера

vertical-align: top;  //  Выравнивание по верхней части контейнера

Значение по умолчанию - top

letter-spacing - определяет межбуквенное расстояние.

Значения устанавливаются любыми величинами имеющимися в CSS.

Пример:

letter-spacing: 3px;  //  Межбуквенное расстояние 3 пикселя

line-height - определяет высоту строки.

Значения устанавливаются пикселями, процентами и множителем.

Примеры:

line-height: 16px;  //  Высота строки 16 пикселей

line-height: 70%;  //  Высота строки 70% от размера шрифта

line-height: 1.5;  //  Высота строки ровно полтора размера шрифта

line-height: normal;  //  Высота строки стандартная

Значение по умолчанию - normal

text-decoration - Определяет подчеркивание, перечеркивание, линию над текстом и мигание.

Примеры:

text-decoration: blink;  //  Мигающий текст

text-decoration: line-through;  //  Перечеркнутый текст

text-decoration: underline;  //  Подчеркнутый текст

text-decoration: overline;  //  Линия над текстом

text-decoration: none;  //  Отменяет все вышеописанные свойства

Значение по умолчанию - none

text-indent - определяет отступ первой строки в абзаце.

Значения устанавливаются в пикселях или процентах.

Пример:

text-indent: 25px;  //  Отступ первой строки 25 пикселей

text-transform - позволяет совершать различные манипуляции с регистром.

Примеры:

text-transform: capitalize;  //  Каждое слово начинается с заглавной буквы

text-transform: lowercase;  //  Все символы будут строчными

text-transform: uppercase;  //  Все символы будут прописными

text-transform: none;  //  Ничего не изменяет

Значение по умолчанию - none

white-space - способы отображения переносов строк и пробелов в самом коде.

Примеры:

white-space: nowrap;  //  Текст выводится в одну строку, игнорируя переносы

white-space: pre;  //  Текст выводится точно так же, как и написан в коде

white-space: normal;  //  Текст выводится как обычно по умолчанию

Значение по умолчанию - normal

word-spacing - определяет расстояние между словами.

Можно указывать любыми величинами имеющимися в CSS.

Примеры:

word-spacing: 10px;  //  Расстояние между словами 10 пикселей

word-spacing: normal;  //  Расстояние между словами стандартное

Значение по умолчанию - normal