В прошлой записи мы мы познакомились с основными семействами шрифтов, которые используются в 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-кода, который вы можете использовать в случае необходимости.
Спасибо за внимание! Есть вопросы — задавайте на почту или оставляйте их в комментариях.