20% Высоты символа m).
</p>
<p>
Вместо этого абзацы разделены отступом первой строки, который задан CSS-свойством
text-indent.
</p>
Листинг 2.2. Разделение абзацев отступом первой строки (html, txt)
Рис. 2.2. Разделение абзацев отступом первой строки
p {
text-indent: 2.5em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
p:first-letter {
font-weight: bold;
font-size: 2em;
color: Red;
}
...
<p>
Буквица - ещё один эффект, применяемый для визуального выделения начала
абзаца. В CSS он может быть достигнут путём применения специфического
стиля к первой букве абзаца.
</p>
<p>
Первой букве абзаца соответствует селектор псевдоэлемента p:first-letter.
Для этого псевоэлемента в данном примере назначена высота 2em и красный
полужирный шрифт.
</p>
Листинг 2.3. Разделение абзацев выделением первой буквы (html, txt)
Рис. 2.3. Разделение абзацев выделением первой буквы
Упражнение. Попробуйте переформатировать текст одного из абзацев путём вставки в него пробелов для увеличения отступа и разбивки на строки путём нажатия клавиши Enter. Убедитесь, что форматирование HTML-кода такими средствами никак не влияет на отображение документа браузером, т.е. для разбивки текста на абзацы необходим элемент p, а для их разделения - один из рассматриваемых в данном примере способов.
Как видно из примеров, в теле HTML-документа расположены несколько абзацев, и никакого форматирования. Однако форматирование к абзацам всё же применяется, поскольку к HTML-документу подключена таблица стилей. Это достигается путём включения в "шапку" HTML-документа следующей ссылки:
<link rel="Stylesheet" href="Style.css" />
Подробно эта директива и другие способы подключения таблиц стилей описаны в лекции "Каскадные стили". Пока достаточно понять, что таблица стилей "Style.css" учитывается браузером при форматировании HTML-документа.
В таблице стилей содержится определение стиля элемента p (т.е. абзаца). Об определениях стилей также речь пойдёт позже, однако на текущий момент вполне достаточно понимания того, что свойства, указанные в стиле для элемента p, будут применены ко всем абзацам документа.
Остановимся подробно на этих свойствах:
-
margin-top Верхнее поле, т.е. расстояние от верхней границы элемента (в данном случае, абзаца) до других элементов.
-
margin-bottom Нижнее поле, т.е. расстояние от нижней границы элемента до других элементов.
Единица измерения, использованная в данном примере для задания высоты поля - em, что означает "равна высоте шрифта" (em - латинская буква m, напечатанная шрифтом Cicero - стандартная единица измерения в полиграфии) . Соответственно, 0.5em означает "равно половине высоты шрифта".
Упражнение. Попробуйте уменьшать и увеличивать значения margin-top и margin-bottom, наблюдая за результатом.
Затем уберите совсем объявления полей. В результате поля увеличатся! Это происходит потому, что браузеры используют по умолчанию не нулевые значения полей, а такие, как вы увидели, проделав это упражнение.
Логическое и физическое форматирование. Разбивка на строки
Выделения (strong, em - emphasis, span)
Позволяют акцентировать отдельные фрагменты текста (как правило, слова и фразы) при помощи форматирования. Элемент strong по умолчанию делает вложенный текст полужирным, em - курсивом, но при помощи стилей такое поведение легко переопределяется. Элемент span по умолчанию никак не влияет на вложенный в него текст - к нему всегда нужно применять стиль.
strong {
color: Red;
}
.accent {
background: #BFFFBF;
color: Blue;
font-weight: bold;
}
...
<p>
Элемент strong по умолчанию делает вложенный текст полужирным, em - <em>
курсивом</em>, но при помощи стилей такое поведение <strong>легко переопределяется</strong>.
Элемент span по умолчанию никак не влияет на вложенный в него текст -
к нему всегда нужно <span class="accent">применять стиль</span>.
</p>