Первая строка параграфа. Межстрочное расстояние

Ужин при свечах CSS основы

Первая строка параграфа

При оформлении параграфов в технологии CSS автор может воспользоваться “красной” строкой, которую предоставляет ему атрибут text-indent.

Речь идет о горизонтальном отступе в первой строке параграфа относительно его левого края:

<p style=”text-indent:20pt;”>Этот параграф мы начнем со строки с горизонтальным отступом в двадцать типографских пунктов от левого края параграфа. </p>

Этот параграф мы начнем со строки с горизонтальным отступом в двадцать типографских пунктов от левого края параграфа.

<p style=”text-indent:-10pt;”>А в этом параграфе мы применим отрицательный горизонтальный отступ в первой строке параграфа. </p>

А в этом параграфе мы применим отрицательный горизонтальный отступ в первой строке параграфа.

Отрицательные значения атрибутов – это нормальная практика CSS. Там где логически применение отрицательного значения оправдано, например, смещение вложенного блока текста относительно охватывающего элемента разметки, там можно указывать отрицательные атрибуты смещения.

Кроме text-indent в CSS для управления первой строкой параграфа зарезервирован модификатор стиля first-line. Он позволяет не только задать горизонтальное смещение, но и определить другие параметры параграфа:

P:first-line {color:red}

Другой параметр, который влияет на отображение первой строки параграфа – первая буква первой строки. Ее отображением управляет модификатор first-letter:

P:first-letter {font-size:20pt;}

К большому сожалению оба этих модификатора реализованы не во всех версиях браузеров, поэтому для верности применяют элементы разметки FONT и TABLE.

Межстрочное расстояние

В CSS межстрочное расстояние определяется параметром line-height. Он задает расстояние не между строками, а между базовыми линиями строк. Проще говоря, если, например, взять букву “X” и напечатать ее последовательно друг под другом, то line-height будет равно расстоянию между двумя одинаковыми точками букв. Например, между точками пересечения палочек “Х”:

Посмотрим, как этот параметр влияет на взаимное расположение строк:

Читать также:  Css — каскадные таблицы стилей

<p style=”line-height:12pt;font-size:12pt;color:darkred;”>
Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 12 pt.</p>

Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 12 pt.

<p style=”line-height:24pt;font-size:12pt;color:darkred;”>
Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 24 pt.</p>

Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 24 pt.

<p style=”line-height:6pt;font-size:12pt;color:darkred;”>
Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 6 pt.</p>

Этот параграф мы набрали кеглем 12 pt.
Line-height задано в 6 pt.

Первый пример набран со значением line-height равным размеру кегля. Во втором примере значение line-height вдвое превышает размер кегля. В третьем примере значение line-height в два раза меньше размера кегля – строки стали “налезать” друг на друга.

В связи с использованием line-height следует обратить внимание на применение in-line картинок на HTML-страницах. Под in-line картинкой здесь мы понимаем картинку, которая встроена в тело документа при помощи элемента IMG, но не с новой строки и не как элемент таблицы:

<p style=
“color:white;background-color:darkred;font-size:20px;”>
В эту строку мы встраиваем картинку – , которая изображает концентрические круги.
</p>

В эту строку мы встраиваем картинку – , которая изображает концентрические круги.

Картинка имеет размеры 24х24 пикселя и выравнена по верхнему краю строки. Ее размер больше размера кегля (20px), поэтому межстрочное расстояние увеличено браузером автоматически.

<p style=
“color:white;background-color:darkred;font-size:24px;”>
В эту строку, которая имеет размер кегля 24рх, мы встраиваем картинку – , изображающую концентрические круги.
</p>

В эту строку, которая имеет размер кегля 24рх, мы встраиваем картинку – , изображающую концентрические круги.

Таким образом, можно точно позиционировать текст и графику в строке.

далее…

Оцените статью
Новостной портал
Добавить комментарий