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



Подчеркнутый или зачеркнутый текст "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".

Смотрите также:  Позиционирование фона в CSS (background-position)

К оглавлению ↑

Высота строки "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 трансформацией

0

До встречи! Успевайте всё и всегда на страницах блога Uspei.com

Плюсануть
Поделиться
Класснуть
Линкануть
Запинить

Буду благодарен, если поделитесь новостью в соцсетях


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *