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

Последнее обновление: 21.04.2016

text-transform

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

  • capitalize: делает первую букву слова заглавной

  • uppercase: все слово переводится в верхний регистр

  • lowercase: все слово переводится в нижний регистр

  • none: регистр символов слова никак не изменяется

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
		
        <style>
			p.lowercase {text-transform: lowercase;}
			p.uppercase {text-transform: uppercase;}
			p.capitalize { text-transform: capitalize;}
        </style>
    </head>
    <body>
	<div>
		<p class="capitalize">Текст использует значение capitalize</p>
		<p class="lowercase">Текст использует значение lowercase</p>
		<p class="uppercase">Текст использует значение uppercase</p>
	</div>
    </body>
</html>
text-transform в CSS 3

Свойство text-decoration

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

  • underline: подчеркивает текст

  • overline: надчеркивает текст, проводит верхнюю линию

  • line-through: зачеркивает текст

  • none: к тексту не применяется декорирование

Например:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
		
        <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>
    </head>
    <body>
	<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>
    </body>
</html>
text-decoration в CSS 3

При необходимости мы можем комбинировать значения. Так, в предпоследнем случае применялся стиль:

p.mixed { text-decoration: underline line-through; }

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Шрифты в CSS3</title>
		
        <style>
			p.smallLetterSpace {
				letter-spacing: -1px;
			}
			p.bigLetterSpace {
				letter-spacing: 1px;
			}
			p.smallWordSpace{
				word-spacing: -1px;
			}
			p.bigWordSpace{
				word-spacing: 1px;
			}
        </style>
    </head>
    <body>
	<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>
    </body>
</html>
letter-spacing и word-spacing в CSS 3

text-shadow

С помощью свойства text-shadow можно создать тени для текста. Для этого свойства необходимо задать четыре значения: горизонтальное смещение тени относительно текста, вертикальное смещение тени относительно текста, степень размытости тени и цвет отбрасываемой тени. Например:

h1{
	text-shadow: 5px 4px 3px #999;
}
тень текста в CSS 3

В данном случае горизонтальное смещение тени относительно букв составляет 5 пикселей, а вертикальное смещение вниз - 4 пикселя. Степень размытости - 3 пикселя, и для тени используется цвет #999.

Если нам надо было бы создать горизонтальное смещение влево, а не вправо, как по умолчанию, то в этом случае надо было бы использовать отрицательное значение. Аналогично для создания вертикального смещения вверх также надо использовать отрицательное значение. Например:

h1{
	text-shadow: -5px -4px 3px #999;
}
text-shadow в CSS 3

НазадСодержаниеВперед

Помощь сайту
Юмани:
410011174743222
Перевод на карту
Номер карты:
4048415020898850