Основы работы с XHTML и CSS


Стиль text-indent


Предыдущие примеры выравнивания параграфа слева показывают их в "блочном стиле", в котором все строки текста прижаты к левому полю. Однако широко распространено использование отступа для первой строки параграфа, чтобы визуально выделить начало нового параграфа. Отступ первой строки на самом деле не требуется, когда параграфы разделены пустыми строками, как в случае страниц Web; тем не менее, такое форматирование может применяться для смягчения внешнего вида страниц.

Для создания отступа первой строки параграфа используется свойство стиля text-indent. Величина отступа задается числом пикселей или как процент от ширины страницы.

Таблица 3.4. Свойство задания отступа и значения

Свойство:Значение
text-indentnpx n%

Следующий код делает отступ первой строки двух параграфов, первого на 25 пикселей и второго на 5% ширины страницы. Вывод в браузере показан на рисунке 3.10.

<p style="text-indent:25px">Этот параграф форматируется с помощью style="text-indent:25px". Первая строка параграфа смещается на 25 пикселей от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю.</p>

<p style="text-indent:5%">Этот параграф форматируется с помощью style="text- indent:5%". Первая строка параграфа смещается на 5 процентов ширины страницы от левого поля. Остальные строки параграфа прижаты к левому полю и переносятся по словам по правому полю. </p>

Листинг 3.24. Задание отступа первых строк параграфов

Отступ первой строки текста в параграфах

Рис. 3.10.  Отступ первой строки текста в параграфах

В этом примере значения в пикселях и процентах задают примерно одинаковую величину отступа первой строки. Однако при использовании измерения в процентах для отступа параграфа помните, что это значение основано на ширине страницы. Будет создаваться отступ разной величины, в зависимости от ширины окна браузера. Чтобы сохранить фиксированную величину отступа, независимо от размера окна, задавайте значение в пикселях, а не в процентах.




Начало  Назад  Вперед



Книжный магазин