Теперь рассмотрим какие бывают свойства 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
