Текст и шрифты

Заголовки: <h1> - <h6>

<h1>Заголовок 1 уровня</h1>
<h2>Заголовок 2 уровня</h2>
<h3>Заголовок 3 уровня</h3>
<h4>Заголовок 4 уровня</h4>
<h5>Заголовок 5 уровня</h5>
<h6>Заголовок 6 уровня</h6>

Перенос строки: <br>

Здесь нужно сделать <br> перенос строки

Абзац: <p>

<p>Первая строка</p>
<p>Вторая строка</p>

CSS-свойство: font-...

p {
	font-size: 20px;     # размер шрифта
	font-style: italic;  # начертание шрифта
	font-weight: bold;   # асыщенность шрифта
}

CSS-свойство: text-...

p {
	text-align: center | left | right;     /* горизонтальное выравнивание текста в пределах элемента */
	text-decoration: none | underline;     /* оформление текста */
	text-decoration-color: orange;         /* оформление текста (цвет линии) */
	text-decoration-style: solid | double | dotted | dashed | wavy; /* оформление текста (стиль линии) */
	text-indent: 20px;                     /* красная строка */
	text-transform: uppercase | lowercase; /* преобразованием текста элемента в заглавные или прописные символы */
}

CSS-свойство: text-shadow

• 3px - смещение по горизонтали
• 4px - смещени по вертикали
• 5px - размытие

p {
	text-shadow: 3px 4px 5px #000;
}

Работа с текстом

p {
	word-spacing: 10px   /* расстояние между словами */
	letter-spacing: 4px; /* расстояние между буквами */
	line-height: 1.5;    /* расстояние между строками */
}

Работа со шрифтами

p {
	font-family: Verdana; /* семейство шрифта */
}

Подключение шрифта

@font-face {
	font-family: OpenSans;           /* имя шрифта */
	src: url(../font/OpenSans.ttf);  /* путь к файлу со шрифтом */
}

Применение шрифта

p {
	font-family: OpenSans;
}

• Google Fonts
• Шрифты Serif и Sans-Serif
• Font-Face Ninja

Направление текста

p {
	writing-mode: horizontal-tb; /* стандартное */
	writing-mode: vertical-rl;   /* сверху-вниз, справа-налево */
	writing-mode: vertical-lr;   /* сверху-вниз, слева-напрво */
}