Урок 5: Текст в CSS

В этом уроке мы рассмотрим основные свойства CSS отвечающие за форматирование текста.

text-align
text-decoration
text-indent
text-transform
letter-spacing
word-spacing


Свойство 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


C помощью этого свойства, можно видоизменять текст, а именно менять большие буквы на маленькие или наоборот. Может иметь такие значения:


capitalize - меняет регистр первых букв каждого слова так, чтобы они были заглавными. Например:"создайте сайт сейчас" станет "Создайте Сайт Сейчас".

Частенько это свойство используется при написании рекламных текстов, это больше привлекает внимания!


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


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


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





Свойство LETTER-SPACING


C помощью этого свойства можно изменять расстояние между буквами. Значение лучше указывать в пикселях.


h1 { letter-spacing: 10px;}

p{ letter-spacing :4px; }
Смотреть пример


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






Свойство WORD-SPACING


Позволяет изменять расстояние между словами. Значение также лучше задавать в пикселах.


h1 { word-spacing: 20px;}

p{ word-spacing :10px; }
Смотреть пример


А вообще, при создании того или иного шрифта, разработчиками идеально выбираются интервалы между буквами и словами, и поэтому применять последние два свойства я вообще не советую. Исключением может быть своеобразное дизайнерское решение или что-то типа того...


Вот мы и закончили изучение основных свойств из этого урока. Поверьте, дальше будет гораздо интересней. В следующем уроке мы поговорим о списках. Но не спешите идти дальше, сначала хорошенько закрепите пройденный материал!