Студопедия

Главная страница Случайная страница

Разделы сайта

АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатикаИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханикаОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторикаСоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансыХимияЧерчениеЭкологияЭкономикаЭлектроника






Межсимвольное расстояние.






А вот свойство letter-spacing определяет расстояние между символами в тексте и так же как и может word-spacing быть задано следующими значениями:

normal - Нормальное расстояние. (по умолчанию)

px - Расстояние задаётся в пикселях или любых других единицах измерения принятых в CSS.

Пример:

<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transitional//EN" " https://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" " https://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 свойствами можно добиться весьма интересных эффектов.


Глава 3






© 2023 :: MyLektsii.ru :: Мои Лекции
Все материалы представленные на сайте исключительно с целью ознакомления читателями и не преследуют коммерческих целей или нарушение авторских прав.
Копирование текстов разрешено только с указанием индексируемой ссылки на источник.