Заголовки и абзацы Заголовок (h1..H6 - header 1...6)
Заголовки имеют большое значение. Для пользователя они создают ориентиры в документе и проясняют его структуру, а поисковые серверы используют заголовки, чтобы индексировать структуру и содержание веб-страниц.
Элемент h1 определяет наиболее крупный заголовок; h6 - наименее крупный. Заголовки h1 должны использоваться как главные заголовки, сопровождаемые заголовками h2, затем менее важными заголовками h3, и так далее. Обычно авторы применяют h1 для названия документа, h2 для названий разделов и т.д.
<h1>
Это заголовок 1</h1>
<h2>
Это заголовок 2</h2>
<h3>
Это заголовок 3</h3>
<h4>
Это заголовок 4</h4>
<h5>
Это заголовок 5</h5>
<h6>
Это заголовок 6</h6>
Листинг 2.1. Заголовки уровней 1-6 (html, txt)
Рис. 2.1. Заголовки уровней 1-6
Обратите внимание, что каждый заголовок располагается на новой строке и имеет вертикальный отступ от соседних элементов. Первое свидетельствует о том, что заголовок - элемент блочный, т.е. всегда вызывает разрыв строки до и после себя. Второе означает, что предопределённые значения отступов для этого элемента отличны от нуля (как их можно регулировать, далее будет рассматриваться).
Абзац (p - paragraph)
Служит для смысловой разбивки текста. Браузеры, отображая содержимое этого элемента (также блочного), обычно вставляют перед ним вертикальный отступ, немного больший по высоте, чем одна строка - таким образом абзацы отделяются друг от друга по умолчанию. При помощи стилей можно достичь и более привычного, "книжного" вида - горизонтального отступа первой строки каждого абзаца. Возможны и другие варианты.
p {
text-indent: 2.5em;
margin-top: 0.2em;
margin-bottom: 0.2em;
}
...
<p>
По умолчанию браузер визуально отделяет абзацы друг от друга вертикальным
отступом, что эквивалентно установке свойств margin-top и margin-bottom
в некоторое отличное от нуля значение.
</p>
<p>
В данном примере этим свойствам задано небольшое значение (0.2em, т.е.
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, наблюдая за результатом.
Затем уберите совсем объявления полей. В результате поля увеличатся! Это происходит потому, что браузеры используют по умолчанию не нулевые значения полей, а такие, как вы увидели, проделав это упражнение.