 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Свойства текста
|
|
| Свойство | Описание значения |
| 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 – выравнивает низ по низу шрифта родительского элемента, top – выравнивает вершину по самому высокому элементу линии, 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 – текст показывается с учетом пробелов и переносов, как в коде HTML; pre-line – пробелы и переносы не учитываются; pre-wrap – в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, текст автоматически переносится на следующую строку; inherit – наследует значение родителя. |
Рассмотрим пример. Свойство text-indent - определяет величину отступа первой строки блока текста в единицах длины или процентах. По умолчанию отступ первой строки равен 0. Свойство text-align - выравнивает текст в блоке содержимого элемента.
<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>
Результат:
f(х) = a0 + a1 x +... + a n-1 xn-l + a n xn
Полуторный интервал
Установка полуторного межстрочного интервала.
Свойство 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 – стандартный интервал для текущего шрифта; величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию.
<html>
<head>
<title> Изменение межбуквенного интервала в тексте</title>
</head>
<body>
<р>Интервал, установленный по умолчанию</р>
<р styles ="letter-spacing: 0.3em">Очень большой интервал</р>
<р style = "letter-spacing: 0.2em"> Большой интервал </p>
<р style = "letter-spacing: 0рх">Плотный интервал</р>
<р style = "letter-spacing: -1рх">Очень плотный интервал</р>
</body>
</html>
Пример word-spacing - указывает расстояние между словами. По умолчанию используется обычный интервал, определяемый текущим шрифтом. Значениями свойства могут быть: normal – стандартный интервал для текущего шрифта; величина, на которую увеличивается расстояние между словами в дополнение к заданному по умолчанию.
<html>
<head>
<style type="text/css">
p { word-spacing: 1 em }
</style>
</head>
<body>
<р>Изменение пробелов с помощью свойства word-spacing</р>
</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>
Дата публикования: 2014-11-18; Прочитано: 373 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
