Лого www.SiteHere.ru

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

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

Здравствуй, уважаемый читатель.

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

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

Урок 1. Что такое CSS?
Урок 2. Базовые селекторы
Урок 3. Групповые селекторы и селекторы потомков
Урок 4. Псевдоселекторы ссылок
Урок 5. Шрифты

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

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

text-decoration

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

text-decoration: line-through | blink | overline | underline

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

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

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

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

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

text-decoration: none | inherit

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

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

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

1
2
3
p {
  text-decoration: underline overline;
}

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

Подчеркивание в браузере

text-align

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

text-align: left | center | right | inherit

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

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

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

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

text-indent

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

text-align: ??px

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

1
2
3
p {
  text-indent:20px;
}

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

Красная строка в браузере

text-transform

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

text-transform: lowercase | uppercase | capitalize | none | inherit

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

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

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

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

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

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

Разные регистры символов в браузере

line-height

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

Высота строки наглядно

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

Пример в браузере высоты линии

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

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

Урок 6. Оформление текста 5.00/5 (100.00%) 3 голос(ов)

Понравилась статья - расскажи друзьям! :)

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

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