Как важно красиво и по правилам составить оформление заголовков и подзаголовков на вашем сайте средствами 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, дает вам хороший шанс удержать посетителя на вашем ресурсе. Заказать верстку сайта в нашей компании.