Подчеркнутый или зачеркнутый текст “text-decoration”
Здравствуйте, уважаемые читатели сайта Uspei.com. На прошлом уроке мы успели изучить с Вами шрифты в css, а теперь перейдем к декорированию текста. И следующее свойство, которое мы изучим это “text-decoration”. Оно позволяет подчеркивать текст снизу или даже сверху (!), а также зачеркнуть текст. Кроме того, данное свойство можно использовать для того, что бы убрать подчеркивание у ссылок, которое браузер ставит по умолчанию.
Эти четыре его свойства позволяют сделать это. “underline” – подчеркивает текст, “overline” – “надчеркивает” текст, “through” – делает текст перечеркнутым, а значение “none” убирает какое-либо за- над- подчеркивание.
Например, давайте уберем подчеркивание ссылки, которое браузер ставит по умолчанию.
a { text-decoration: none; }
Выравнивание текста по краям “text-align”
Давайте разберем еще одно свойство – это выравнивание текста. Обратите внимание, что браузер по умолчанию выравнивает весь текст по левому краю, что иногда выглядит не очень эстетично.
В CSS есть такое уже знакомое нам свойство и пишется оно так: “text-align”.
Соответственно его значения выравнивают текст по левому краю, по центру, по правому краю и по обеим сторонам.
Красная строка “text-indent”
Еще одно полезное свойство, которое мы рассмотрим – красная строка. Это придает тексту красоту и упорядоченность (если он у вас еще и оптимизирован как надо, то вообще супер). Называется “text-indent”. Для демонстрации именно этот урок я сделал с использованием этого свойства.
Его можно задать в разных единицах, и в “px” и в “em” и в “%”. Но мне кажется удобнее всего в пикселях “px”.
Высота строки “line-height”
Следующее свойство в CSS отвечает за межстрочный интервал “line-height”.
Изначально браузер использует значение “normal”, однако мы можем изменить это расстояние, указав необходимое нам.
Например, давайте зададим принудительное межстрочное расстояние в 20px:
p { line-height: 20px; }
Мы видим, что расстояние немного увеличилось.
Междустрочный интервал “word-spacing”
Да, и это можно делать в CSS))). С помощью свойства “word-spacing”, базовое значение браузера которого также “normal”.
Увеличим расстояние между нашими словами на 12px.
p { word-spacing: 12px; }
Для расстояния между буквами по аналогии используется свойство “letter-spacing”.
Регистр текста “text-transform”
И последнее, что мы изучим на сегодня это какими буквами мы хотим отразить наш текст, как обычно, или все заглавными. Отвечает за это свойство “text-transform” и его значение “uppercase” (верхний регистр).
p { text-transform: uppercase; }