css-форматирование-текста

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

css-форматирование-текстаВ прошлой записи мы мы познакомились с основными семействами шрифтов, которые используются в CSS. Сегодня же мы узнаем, каким образом можно организовать форматирование текста с помощью CSS.

В который раз не могу не выразить восторг простоте CSS — многие вещи достаточно интуитивны. В качестве примера приведу, например, вот это:
font-size:12px
— уверен, вы догадались, что речь идет о размере шрифта, который будет использован в том или ином случае.
В случае использования конструкции в виде font-style:italic — речь идет о наклонном начертании текста. В целом, все это можно свести к таблице:

CSS — конструкцияЧто делает
font-size:12pxУстанавливаем размер шрифта в пикселях или процентах
font-style:italicУказываем форматирование текста наклонным (прописным)
font-variant:small-capsПишем большие буквы маленьким размером
font-weight:boldОтмечаем текст жирным
letter-spacing:5pxУказываем дополнительное расстояние в пикселях между символами
word-spacing:7pxУказываем дополнительное расстояние в пикселях между словами
color:#cc0033Указываем цвет текста
text-indent:40pxУказываем расстояние отступа начала строки в пикселях
text-decoration:underlineВыделяем текст подчеркиванием
text-decoration:overlineВыделяем текст надчеркиванием
text-decoration:line-throughПеречеркиваем текст
text-transform:capitalizeОтображаем каждое слово с большой буквы
text-transform:lowercaseВсе буквы будут маленькими
text-transform:uppercaseВсе буквы будут большими
vertical-align:superТекст будет в верхней половине индекса
vertical-align:subТекст будет в нижней половине индекса

Пример использованный CSS-конструкций представлен ниже:

See the Pen MJPzZV by Lavrynenko (@Lavrynenko) on CodePen.

Ну и конечно же там представлен образец CSS-кода, который вы можете использовать в случае необходимости.

Спасибо за внимание! Есть вопросы — задавайте на почту или оставляйте их в комментариях.