CSS. Работа с текстом

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

Как вы могли заметить, каждый сайт, дабы выделиться среди серой массы себе подобных, оформлен по-разному. По-мимо, различных цветов, картинок и фона разработчик использует и красивые шрифты для оформления текстовой части контента сайта.
В CSS имеются различные инструменты для работы с текстом, рассмотрим некоторые из них.

Font-family

Данное свойство задаёт шрифт всего текстового контента, либо отдельной его части. В зависимости где будет указано и изменено.
Пример кода:

.h1{
    font-family: fantasy
   }

Используя данное свойство для текста, мы изменим шрифт в заголовке h1 на fantasy.

Также можно изменить и величину текста с помощью свойства font-size. А жирность с помощью font-weight. В CSS также , как и в HTML можно указать стиль текста, например, будет ли шрифт курсивом или нет.

Text-decoration

Данное свойство определяет подчёркнутость текста. Это свойства чаще всего используется для оформления ссылки, но и для текста тоже может пригодиться например как:
text-decoration:overline — прямая линия над текстом;
text-decoration:underline — прямая линия под текстом;
text-decoration:line-through — прямая линия перечёркивающая текст.

Также можно убрать линию под ссылкой с помощью text-decoration:none.

Text-transform

Text-transform позволяет изменить регистр букв. он может иметь значения -capitalize, uppercase, lowercase или none. Данные значения переводят все первые буквы каждого следующего слова в верхний регистр, все буквы в верхний регистр, все буквы в нижний регистр и убирает все эффекты соответственно.

Ну и ,наконец, из базовых отступы. Отступы от края, центровка текста и прочее, достигается путём изменения свойств:
1) letter-spacing и word-spacing — расстояние от буквы до буквы и от слова до слова.
2) line-height — определяет высоту строки элемента
3) text-align — выравнивание текста слева, справа, по центру.
4) text-indent — создание отступа от первой строки параграфа.

p {
    letter-spacing: 1em;
    word-spacing: 2em;
    line-height: 1;
    text-align: left;
}