Урок 6. Оформление текста

Это шестой урок изучения CSS. В прошлом уроке мы уже начали рассматривать свойства связанные с текстом, а в этом уроке вы узнаете еще некоторые свойства текста в CSS.

Перед изучением CSS пройдите предыдущие уроки:

Теория и практика

Продолжим рассматривать свойства CSS, для того чтобы придать привлекательный вид нашему тексту.

text-decoration

Начнем со свойства которое добавляет оформление в виде подчеркивания, перечеркивания, мигания и линии над текстом. Кстати, в данном свойстве можно применить несколько значений данного свойства, перечисляя значения через пробел. Ниже представлены свойства которые можно комбинировать:

line-through — перечеркнутый текст(такой как создает тег <del> в html);

blink — мигающий текст;

overline — черта над текстом;

underline — подчеркнутый текст(такой как создают теги <ins> и <u> в html).

Также есть значения для данного свойства такие как:

none — означает что никаких подчеркиваний применяться не будет;

inherit — наследование от родителя.

Рассмотрим CSS код:

1
2
3

p {
  text-decoration: underline overline;
}

Как это выглядит в браузере:

text-align

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

left — выравнивание содержимого влево;

center — выравнивание содержимого по центру;

right — выравнивание содержимого вправо;

inherit — наследование значения от родителя.

text-indent

Это свойство отвечает за красную строку, т.е. отступы в начале строки. Значение может задаваться в пикселях(px), пунктах(pt) и т.д.:

Рассмотрим CSS код:

1
2
3

p {
  text-indent:20px;
}

Как это выглядит в браузере:

text-transform

Бывает необходимость изменить текст в прописные буквы или в заглавные, но нет времени весь текст переписывать с нажатым CAPS LOCK, тогда вам поможет данное свойство. Данное свойство имеет следующие значения:

lowercase — все буквы и символы будут в нижнем регистре;

uppercase — все буквы и символы будут в верхнем регистре;

capitalize — каждое слово будет с большой буквы;

none — не меняет регистр символов;

inherit — наследование значения от родителя.

Пример в браузере каждого из значений данного свойства:

line-height

И последнее свойство CSS которое мы сегодня рассмотрим, это свойство высоты строки. Но что же такое высота строки? Я наглядно представил на картинке ниже:

Данное свойство может принимать значения в процентах(%), пикселях(px) и т.д. Вот пример в браузере:

Итак, сегодня мы рассмотрели 5 свойств. Некоторые из них очень часто применяются при создании сайта. Это такие свойства как text-decoration, text-align, line-height. А некоторые реже — text-indent, text-transform. Обязательно попробуйте руками прописать данные свойства. Они отложатся у вас в памяти и затем вы автоматически будете вписывать необходимые свойства, когда они вам будут нужны. Но для этого нужна практика. Поэтому не ленитесь!

Больше практикуйтесь!