Сейчас мы определим все свойства в CSS, которые отвечают за форматирование текста.


Свойство TEXT-ALIGN

Свойства для выравнивания текста аналогичны атрибуту ALIGN, который используется в html. Принимает четыре значения:

left – выравнивание по левому краю(значение по умолчанию);
right – выравнивание по правому краю;
center – выравнивание по центру;
justify – выравнивание по ширине(по правому и левому краям одновременно).

Тут все просто. Смотрим на пример:

h1 {text-align:center;}
h2 {text-align:left;}
h3 {text-align:right;}
p {text-align:justify;}

Свойство TEXT- DECORATION

Оформляет текст определенным образом. Давайте рассмотрим четыре значения этого свойства:

none – значение по умолчанию. Дополнительного оформления не происходит;
underline - текст подчеркивается снизу;
overline - текст надчеркивается сверху;
line-through – текст перечеркивается;

h1 {
text-align:center;
text-decoration:underline;
}
h2 {
text-align:center;
text-decoration:overline;
}
h3 {
text-align:center;
text-decoration:line-through;
}

Такое свойство зачастую используют при создании ссылок, к примеру, когда вы наводите на ссылку, пропадает подчеркивание. Про ссылки я вам расскажу в следующем уроки.

Свойство TEXT-INDENT

Данное свойство мы будем использовать в абзацах. Лучше всего использовать значение в пикселях.

h1{text-align:center;}
p {
text-indent: 40px;
}

Так же можно задавать и в процентах.

h1{text-align:center;}
p {
text-indent: 20%;
}

Если вы заметили, то все просто, а вот в html сделать это сложнее и дольше.

Свойство TEXT-TRANSFORM

Это свойство позволяет менять маленькие буквы на большие, и наоборот. Имеет такие свойства:

capitalize – меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:»создать свой сайт сейчас» станет «Создать Свой Сайт Сейчас».
Зачастую такое используют для рекламных текстов, так как они привлекают больше внимания.

uppercase - делает все буквы заглавные. Например: «текст в css » станет » ТЕКСТ В CSS»

lowercase - делает все буквы маленькие. Например: «TRANSFORM» cтанет «transform».

none – не производит смены регистра; это значение используется по умолчанию.

Свойство LETTER-SPACING

Это свойство изменяет расстояние между буквами. Советую значение указывать в пикселях.

h1 { letter-spacing: 30px;}
p{ letter-spacing :12px; }

В примере выше для заголовков установлен интервал между буквами в 30 px, а для параграфов в 12px;

Свойство WORD-SPACING

Позволит вам изменять расстояние между словами. Указывайте размер так же в пикселях.

h1 { word-spacing : 30px;}
p{ word-spacing : 20px; }

Но вообще, при создании шрифтов, разработчики сами идеально выбирают расстояние между словами и буквами, так что я бы не советовал применять два последних свойства. Разве что у вас есть свое своеобразное дизайнерское решение …

Вот и подошло к концу это занятие. Дальше будет еще интереснее. Не забывайте практиковаться и экспериментировать.