Межсимвольное расстояние.
А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:
normal - Нормальное расстояние. (по умолчанию)
px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Расстояние между символами</title>
</head>
<body>
<p style="letter-spacing: 5px">Расстояние между буковками равно пяти пикселям</p>
<p style="letter-spacing: -3px">А здесь буквы, из за отрицательного значения, будут наплывать друг на друга</p>
</body>
</html>
Интерлиньяж
Интерлиньяж - это расстояние между строками текста.
Расстояние между строками текста можно задать используя свойство line-height, сделать это можно следующими способами:
normal - Норма (по умолчанию).
% - Проценты. за сто процентов берется высота шрифта
0.5 - Множитель. Может быть использовано любое число больше ноля. Так, например множитель 0.5 будет равняться половинному межстрочному расстоянию, а 2 - двойному.
px - Пиксели и любые другие единицы измерения, принятые в CSS.
Пример:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Интерлиньяж</title>
</head>
<body>
<div style="line-height: 150%">
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div style="line-height: 0.5">
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
<hr>
<div style="line-height: 25px">
строка первая <br> строка вторая <br> строка третья <br> строка четвертая <br> строка пятая
</div>
</body>
</html>
Полезные советы:
· При декорировании текста, свойство - text-decoration, будьте благоразумны используя подчеркивание текста это может ввести в заблуждение посетителя страницы, он может подумать, что данный текст является ссылкой.
· А Вам точно нужно использовать значение nowrap свойства white-space, запрет переноса строки? Появление горизонтальной полосы прокрутки мало кого вдохновляет..
· Используя псевдокласс hover в сочетании с различными элементами и их возможными CSS свойствами можно добиться весьма интересных эффектов.
Дата добавления: 2016-02-02; просмотров: 880;