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