Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
Введение в Веб программирование.doc
Скачиваний:
81
Добавлен:
07.11.2018
Размер:
4.42 Mб
Скачать

Свойства текста.

Свойство

Описание значения

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 | pre-line | pre-wrap | inherit normal –как обычно, nowrap – пробелы не учитываются, переносы игнорируются, текст отображается одной строкой; pre – текст показывается с учетом всех пробелов и переносов, как они были в коде HTML; pre-line – пробелы и переносы не учитываются, текст автоматически переносится на следующую строку, если он не помещается в заданную область; pre-wrap – в тексте сохраняются все пробелы и переносы, однако если строка по ширине не помещается в заданную область, текст автоматически переносится на следующую строку; inherit – Наследует значение родителя.

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

<html>

<head>

<style type="text/css">

p { text-indent: 3em }

</style>

</head>

<body>

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

</body>

</html>

Пример text-align - выравнивает текст в блоке содержимого элемента.

<html>

<head>

<style type="text/css">

p { text-align: justify }

</style>

</head>

<body>

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

</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%

}

</style>

</head>

<body>

<div>

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

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

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

</div>

</body>

</html>

Пример line-height - задает высоту строки.

<html>

<body>

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

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

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

</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 – стандартный интервал для текущего шрифта; величина, на которую увеличивается межсимвольное расстояние в дополнение к заданному по умолчанию.

<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>