CSS. Работа с текстом (Урок 3)

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

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

css

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

css Декорирование текста

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

a {
text-decoration: none;
}

css

 

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

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

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

css

 

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

css

 

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

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

Красная строка «text-indent»

Еще одно полезное свойство? которое мы рассмотрим  — красная строка. Это придает тексту красоту и упорядоченность. Называется «text-indent». Для демонстрации именно этот урок я сделал с использованием этого свойства))).

css

 

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

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

Высота строки «line-height»

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

css

css3_7

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

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

p {
line-height: 20px;
}

css

 

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

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

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

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

css

 

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

p {
word-spacing: 12px;
}

css

 

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

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

Регистр текста «text-transform»

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

p {
text-transform: uppercase;
}

css

css

 

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

Удачи вам! До скорых встреч на страницах блога VyacheslavDanilov.ru


Вам также понравится...

Смотри и удивляйся:
Десерт

*посмотреть еще ролик можно обновив страницу в браузере

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

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