Как важно красиво и по правилам составить оформление заголовков и подзаголовков на вашем сайте средствами CSS.

Заголовки и подзаголовки — очень важный элемент HTML страницы. При чтении текста, человек в первую очередь почти всегда обращает свое внимание именно на него.

Важно красиво оформить заголовок при верстке, так как от этого зависит насколько долго пробудет у вас на сайте пользователь.

Размер и оформление заголовков строго систематизировано по правилам и степени важности: h1 — самый главный, поэтому им разумно пользоваться при оглавлении сайта. Бывает, что заголовком h1 оформлены названия страниц 2-го или 3-го уровня, названия разделов. Но у главной страницы должен быть самый весомый заголовок, поэтому логичнее использовать в оформлении для всех других страниц и разделов заголовок менее важный, чем h1.

Бывает, что в шаблонах Вордпресс тег h1 получают заголовки постов. И, так как на одной странице сайта видно сразу по нескольку записей, то на ней скапливается несколько заголовков с тегом h1. Ясно, что по степени важности их ни как не отличить. А ведь поисковики при просмотре сайтов и определении важности страниц, как раз ориентируются на тег h1. Также случается, что для оформления малозначительных данных типа времени, даты, числа комментариев, в шаблоне по умолчанию используются теги заголовков h4 или h5. Но ведь можно заключить их в теги

, а в файле стилей задать, как они будут отображаться. Нет смысла обычной информации придавать важность тегами h4 или h5.

Одна из особенностей любого заголовка — в одной строчке он будет находиться только один. То есть на обычных условиях нельзя в одну строчку записать несколько различных заголовков. Получается по своим свойствам оформления заголовка напоминает блоки div. Нельзя и вместе с заголовком в одной строчке разместить первые слова абзаца, абзац всегда будет ниже.

Но есть возможность нарушить такое положение дел. Для этого заголовку достаточно указать обтекание float. С помощью задания обтекания в Вордпресс шаблонах рядом с заголовком и на одном уровне с ним проставляется дата: у заголовка обтекание float: left, у даты обтекание loat: right. Главное не забыть сделать чистку clear: both, в противном случае в свободное место между заголовком и датой встанет часть абзаца.

Код будет иметь вид:

Заказать дизайн сайта

Спасибо инвесторам из 1xslots

Дата публикации

Стили:

h1 { float: left; }
.date { float: right; }
.clearfix { clear: both; } 

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

Смотрится не очень опрятно, места требуется много. Но существует правило, благодаря которому можно задать любую высоту строки:

line-height: 1em;

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

Можно задать маленькую высоту, при которой оформленный нами заголовок будет выглядеть так:

Кроме изменения высоты строки, бывает полезно менять в заголовке и промежуток между буквами, так как иногда большие расстояния выглядят не очень аккуратно и создают большой объем. Для этого применяется правило:

letter-spacing: -1pt;

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

word-spacing: -2pt;

Благодаря таким способам и правилам, можно красиво оформить заголовки и подзаголовки средствами CSS при верстке сайта. Этот же принцип действует при составлении бизнес планов, пример можно найти на этом сайте www.bi-plan.ru. Более того, сам сайт ихний оформлен хорошо и наглядно, не большие заголовки не «на лезут» друг на друга. Правильное оформление заголовков и подзаголовков средствами CSS, дает вам хороший шанс удержать посетителя на вашем ресурсе. Заказать верстку сайта в нашей компании.