Форматирование текста

text-transform

Свойство text-transform изменяет регистр текста. Оно может принимать следующие значения:

capitalize: делает первую букву слова заглавной
uppercase: все слово переводится в верхний регистр
lowercase: все слово переводится в нижний регистр
none: регистр символов слова никак не изменяется

Например:

 <style>
 p.lowercase {text-transform: lowercase;}
 p.uppercase {text-transform: uppercase;}
 p.capitalize { text-transform: capitalize;}
 </style>
 <div>
 <p class="capitalize">Текст использует значение capitalize</p>
 <p class="lowercase">Текст использует значение lowercase</p>
 <p class="uppercase">Текст использует значение uppercase</p>
 </div>

Текст использует значение capitalize

Текст использует значение lowercase

Текст использует значение uppercase

text-decoration

Свойство text-decoration позволяет добавить к тексту некоторые дополнительные эффекты. Это свойство может принимать следующие значения:

underline: подчеркивает текст
overline: надчеркивает текст, проводит верхнюю линию
line-through: зачеркивает текст
none: к тексту не применяется декорирование

При необходимости мы можем комбинировать значения.

Например:

 <style>
 p.under {
 text-decoration: underline;
 }
 p.over {
 text-decoration: overline;
 }
 p.line {
 text-decoration: line-through;
 }
 p.mixed {
 text-decoration: underline line-through;
 }
 a.none {
 text-decoration: none;
 }
 </style>

 <div>
 <p class="under">Это подчеркнутый текст.</p>
 <p class="over">Это надчеркнутый текст</p>
 <p class="line">Это зачеркнутый текст</p>
 <p class="mixed">Это подчеркнутый и зачеркнутый текст</p>
 <p>Не подчеркнутая <a href="index.php" class="none">ссылка<a></p>
 </div>

Это подчеркнутый текст.

Это надчеркнутый текст

Это зачеркнутый текст

Это подчеркнутый и зачеркнутый текст

Не подчеркнутая ссылка

Межсимвольный интервал

Для межсимвольного интервала применяется атрибут letter-spacing, а для интервала между словами - word-spacing.

Например:

<style>
p.smallLetterSpace {
letter-spacing: -1px;
}
p.bigLetterSpace {
letter-spacing: 1px;
}
p.smallWordSpace{
word-spacing: -1px;
}
p.bidWordSpace{
word-spacing: 1px;
}
</style>

	 

<div>
<h3>Обычный текст</h3>
<p>Над ним не было ничего уже, кроме неба...</p>
<h3>letter-spacing: -1px;</h3>
<p class="smallLetterSpace">Над ним не было ничего уже, кроме неба...</p>
<h3>letter-spacing: 1px;</h3>
<p class="bigLetterSpace">Над ним не было ничего уже, кроме неба...</p>
<h3>word-spacing: -1px</h3>
<p class="smallWordSpace">Над ним не было ничего уже, кроме неба...</p>
<h3>word-spacing: 1px</h3>
<p class="bigWordSpace">Над ним не было ничего уже, кроме неба...</p>
</div>