Стили текста.
Свойство |
Описание значения |
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 }
.capital { text-transform: capitalize }
</style>
</head>
<body>
<div class=”upper”> Все буквы преобразуются в прописные </div>
<div class=”capital”> Первая буква каждого слова преобразуется в прописную </div>
</body> </html>