Заголовок 1 Заголовок 2 Заголовок 3

Таблица

В свойстве font-family обычно указываются значения нескольких шрифтов (через запятые), чтобы была возможность выбрать из них тот шрифт, который установлен на компьютере клиента. Кроме названия может указываться гарнитура шрифтов: serif, sans-serif, monospace.

Еще одно свойство @font-face – указывает список семейств или на­званий шрифтов, а также электронный адрес, по которому будут загру­жаться шрифты, если их нет на компьютере пользователя. Пример:

body {

@font-face: Myfont;

src: url(“http://www.atlant.ru/Myfont.eot”);

}

Порядок свойств в font следующий: font-style|font-variant| font-weight|font-size|font-family. Можно использовать сокращенную запись свойств font, затем перечислить свойства шрифта в указанном порядке:

p {font: italic normal bold 30px arial, sans-serif;}

Свойства стилей текста Таблица 4.7.

Свойство	Характеристика свойства
text-decoration	none (по умолчанию); underline (подчеркивание); line-through (зачеркивание); overline (надчеркивание)
text-transform	Регистр: none, capitalize(Первая Буква Слова Преобразуется В Заглавную); uppercase(все в заглавн); lowercase (в строчные)
text-align	Горизонтальное выравнивание текста: left (по умолчанию); right (по правому краю); center (центрирование); justify (по ширине)
vertical-align	Вертикальное выравнивание: baseline, middle, sub – подстрочный; super – надстрочный; text-top – выравнивает верх элемента по верху шрифта родительского элемента; text-bottom – выравнивает низ по низу шрифта родительского элемента
text-indent	{Отступ}|{Отступ}%; устанавливает величину отступа в первой строке параграфа
line-height	Вертикальное расстояние между строками текста: normal|{Y}|{Y}%; задано абсолютной величиной или процентом.
word-spacing	Расстояние между словами: normal|{Величина}; значение задано либо абсолютной величиной, либо предопределенным значением normal
letter-spacing	Расстояние между символами в тексте: normal|{Величина}
word-wrap	normal|break-word; normal (запрещает переносить строки по словам), break-word (разрешает переносить строки по словам)
white-space	Пробелы между словами: normal; nowrap (пробелы не учитываются); pre (текст с учетом пробелов и переносов); pre-line (пробелы и переносы не учитываются); pre-wrap (в тексте сохраняются все пробелы и переносы); inherit (наследует значение родителя)

Свойство text-indent – определяет величину отступа первой строки абзаца в единицах длины или процентах. По умолчанию 0. Пример:

<html>

<head>

<style type="text/css">

p { text-indent: 3em ;}

div { text-align: center;}

</style>

</head>

<body>

<p>Создание отступа с помощью параметра text-indent.</p>

<div>Выравнивание текста с помощью свойства text-align.</div>

</body></html>

В следующем примере рассматривается свойство vertical-align для создания нижних и верхних индексов:

<html><head>

<title> Использование стилей для управления индексами </title>

<style type="text/css">

.sup {vertical-align: super; /* Сдвигаем текст вверх */

font-size: 70% ; /* Уменьшаем размер шрифта */

}

.sub {

vertical-align: sub; /* Сдвигаем текст вниз */

font-size: 70%; }

<p style="line-height: 1.5">

</style>

</head>

<body>

<div>

f(х) = a<span class="sub">0</span> + a<span class="sub">1</span> x + ... + a

<span class="sub">n-1</span> x<span class="sup">n-l</span> + a

<span class="sub">n</span> x<span class="sup">n</span>

</div>

<p>Полуторный интервал</p><br>

Установка полуторного межстрочного интервала.

</body> </html>

Результат:

Следующее свойство text-decoration определяет оформление текстового элемента в виде подчеркивания (underline), надчеркивания (overline) или перечеркивания текста (line_through). По умолчанию оформление текста не производится (none). Пример:

<html>

<head>

<style type="text/css">

a {

text-decoration: none /* Отменяем подчеркивание ссылки */

}

</style>

</head>

<body>

<a href=link.html>Ссылка без подчеркивания</а>

</body></html>

Свойство letter-spacing определяет расстояние между текстовыми символами. Значениями свойства могут быть интервал или normal – стандартный интервал. Свойство word-spacing указывает расстояние между словами. Значениями свойства могут быть расстояние или normal – стандартный интервал:

<html><head>

<style type="text/css">

h1{ word-spacing: 1 em }

</style>

</head>

<body>

<р>Интервал, установленный по умолчанию</р>

<р styles ="letter-spacing: 0.3em">Очень большой интервал</р>

<р style = "letter-spacing: 0.2em"> Большой интервал </p>

<h1>Изменение пробелов с помощью свойства word-spacing</h1>

</body></html>

Свойство text-transform управляет преобразованием регистра букв:

<html><head>

<title> Использование свойства text-transform </title>

<style type="text/css">

.upper { text-transform: uppercase }

.cap{ text-transform: capitalize }

</style>

</head>

<body>

<div class="upper"> Все буквы преобразуются в прописные </div>

<div class="cap"> Первая буква каждого слова преобразуется в прописную </div>

</body> </html>