Пятница, 29 марта, 2024

Работа с текстом в CSS. Декорирование, выравнивание и интервалы

Софт и игры
Вячеслав Питель
Вячеслав Питель
Редактор сайта, опыт работы 10 лет, пишу на тему гаджетов, новостей в мире технологий, игр и софта admin@uspei.com, VK, OK, сот. 89132476241

Подчеркнутый или зачеркнутый текст “text-decoration”

Здравствуйте, уважаемые читатели сайта Uspei.com. На прошлом уроке мы успели изучить с Вами шрифты в css, а теперь перейдем к декорированию текста. И следующее свойство, которое мы изучим это “text-decoration”. Оно позволяет подчеркивать текст снизу или даже сверху (!), а также зачеркнуть текст. Кроме того, данное свойство можно использовать для того, что бы убрать подчеркивание у ссылок, которое браузер ставит по умолчанию.

Эти четыре его свойства позволяют сделать это. “underline” – подчеркивает текст, “overline” – “надчеркивает” текст, “through” – делает текст перечеркнутым, а значение “none” убирает какое-либо за- над- подчеркивание.

text-decoration

Например, давайте уберем подчеркивание ссылки, которое браузер ставит по умолчанию.

a {
 text-decoration: none;
 }

text-decoration: none;

Выравнивание текста по краям “text-align”

Давайте разберем еще одно свойство – это выравнивание текста. Обратите внимание, что браузер по умолчанию выравнивает весь текст по левому краю, что иногда выглядит не очень эстетично.

text-align

В CSS есть такое уже знакомое нам свойство и пишется оно так: “text-align”.

text-align

Соответственно его значения выравнивают текст по левому краю, по центру, по правому краю и по обеим сторонам.

Красная строка “text-indent”

Еще одно полезное свойство, которое мы рассмотрим – красная строка. Это придает тексту красоту и упорядоченность (если он у вас еще и оптимизирован как надо, то вообще супер). Называется “text-indent”. Для демонстрации именно этот урок я сделал с использованием этого свойства.

Его можно задать в разных единицах, и в “px” и в “em” и в “%”. Но мне кажется удобнее всего в пикселях “px”.

Высота строки “line-height”

Следующее свойство в CSS отвечает за межстрочный интервал “line-height”.

line-height

line-height

Изначально браузер использует значение “normal”, однако мы можем изменить это расстояние, указав необходимое нам.

Например, давайте зададим принудительное межстрочное расстояние в 20px:

p {
 line-height: 20px;
 }

Мы видим, что расстояние немного увеличилось.

Междустрочный интервал “word-spacing”

Да, и это можно делать в CSS))). С помощью свойства “word-spacing”, базовое значение браузера которого также “normal”.

word-spacing

Увеличим расстояние между нашими словами на 12px.

p {
 word-spacing: 12px;
 }

Для расстояния между буквами по аналогии используется свойство “letter-spacing”.

Регистр текста “text-transform”

И последнее, что мы изучим на сегодня это какими буквами мы хотим отразить наш текст, как обычно, или все заглавными. Отвечает за это свойство “text-transform” и его значение “uppercase” (верхний регистр).

p {
 text-transform: uppercase;
 }

Без трансформации

C трансформацией

Свидетельство о регистрации СМИ в РКН: ЭЛ № ФС77-83818 от 29.08.2022

Оставьте комментарий

Пожалуйста, введите Ваш комментарий
Пожалуйста, введите Ваше имя здесь

Гаджеты

Как выбрать Pod-систему

Если вы решили перейти с сигарет на вейпинг и выбираете свою первую Pod-систему, есть несколько важных аспектов, на которые...

Также на эту тему