Теперь рассмотрим какие бывают свойства 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 - текст подчеркивается снизу;
line-through - текст перечеркивается;
overline - текст подчеркивается сверху;
h1 {
text-align:left;
text-decoration:underline;
}
h2 {
text-align:center;
text-decoration:overline;
}
h3 {
text-align:justufy;
text-decoration:line-through;
}
Это свойство в основном применяется при оформлении ссылок, например, чтобы при наведении на нее исчезало подчеркивание.
Свойство TEXT-INDENT
Это свойство необходимо для создания отступов первой строчки, то есть создания абзацев. Задается значение в пикселях:
h1{text-align:justify;}
p {
text-indent: 30px;
}
Или в процентах:
h2{text-align:center;}
p {
text-indent: 5%;
}
Как видите, ничего сложного.
Свойство TEXT-TRANSFORM
Позволяет менять вид текста, а точнее большие буквы на маленькие или наоборот. Существует 4 значения:
capitalize - делает каждую первую букву слова заглавной. Например:"как выиграть миллион" станет "Как Выиграть Миллион".
Используется иногда для привлечения внимания.
uppercase - меняет все буквы на заглавные. Например: "свойства в css " станет " СВОЙСТВА В CSS "
lowercase - меняет все буквы на маленькие. Например: "TEXT" станет "text".
none - все остается без изменений;
Свойство LETTER-SPACING
Данное свойство позволяет менять расстояние между буквами. Значения указываются обычно в пикселях:
h1 { letter-spacing: 8px;}
p{ letter-spacing: 3px; }
В данном случае для заголовков мы установили интервал между буквами в 8px, а для параграфов в 3px;
Свойство WORD-SPACING
С помощью этого свойства меняется расстояние между словами:
h2 { word-spacing: 17px;}
p{ word-spacing: 7px; }
Применять данные свойства без особой необходимости не желательно, так как разработчики при создании шрифтов уже выбрали оптимальные расстояния между буквами и словами. Хотя могут быть исключения.
Следующая - Списки в CSS
Предыдущая - Шрифты в CSS