Jun 16 2009 at 11:34

Ссылка как блочный элемент

Invite pending

В соответствии с основным принципом блочной верстки все элементы HTML-страницы деляться на два типа: блочные и линейные. К линейным относятся те, что являются частью текстовой строки или абзаца. Блочные элементы в соответствии со своим названием являются самостоятельными частями страницы или текста и обладают значительно большим набором свойств.

Главным отличием линейных элементов с точки зрения внешнего представления на странице является то, что они размещаются в линию, друг за другом. Тогда как блочные элементы вне зависимости от заданной ширины, всегда переносятся на новую строку, следуя друг под другом.

Типичными линейными являются элементы с тегами: <a>, <abbr>, <acronym>, <address>, <cite>, <em>. К ним также относятся <input>, <label> и универсальный селектор <span>.

При этом элемент <a>(ссылка) является наиболее интересным с точки зрения оформительских свойств, так как содержит целый букет интересных возможностей для дизайнера и верстальщика.

Известно, что через свойство display CSS позволяет переопределять характеристики селекторов, превращая линейные элементы в блочные и наоборот. Например, следующие записи переопределяют внешний вид типовых тегов:

li {display:inline;} // список записан в строку
a {display:block;} // ссылки станут блоками

Первый из приведенных способов является классическим и подробно описан как в зарубежных источниках, так и в Рунете. А вот второй, почему-то используется значительно реже, хотя и имеет ряд достоинств. Особенно для ссылок, при написании кода различных меню и каталогов.

Рассмотрим классический вариант вертикального меню:

<ul>
   <li><a href="#">Первый пункт меню</a></li>
   <li><a href="#">Второй пункт меню</a></li>
   <li><a href="#">Третий пункт меню</a></li>
</ul>

Как видим, форматирование строк меню определяется возможностями блокового элемента <li> и линейного <а>. Но, к сожалению, возможности первого по умолчанию ограниченны только переносом строки и отображением маркера, которые к тому же неодинаковы в различных браузерах. Поэтому свойства <li> приходится либо обнулять и описывать в CSS заново, либо использовать различные хаки для браузеров. Тег же <а>, поскольку он линейный, то и определяет он только цвет надписи и ее шрифт.

А теперь уберем из HTML-кода тег <li>:

<div id="mnu">
   <a href="#">Первый пункт меню</a>
   <a href="#">Второй пункт меню</a>
   <a href="#">Третий пункт меню</a>
</div>

А в CSS для ссылок меню добавим новые свойства:

#mnu a {display:block;
   background:url(cursor.gif) no-repeat;
   padding-left:20px;
   width:150px;}

При этом получаем тот же результат, а HTML-код упростился и уменьшился в размерах. Кроме того, в CSS теперь свойства строки меню описываются только для одного селектора, вместо двух.

Правда появляется один подводный камень. Поскольку ссылка стала блочным элементом, то курсор теперь действует на всей длине строки, т.е. «рука» отображается на пустом месте справа от надписи. Убрать этот деффект можно, если принудительно задать ширину строки. Для всех ссылок меню в CSS можно записать ширину, равную ширине самой длинной строки. И утешиться тем, что ничто хорошее не дается бесплатно.

Здесь необходимо отметить еще одно важное преимущество.

Тег <а> является элементом, к которому могут быть привязаны некоторые события на странице, такие как например, наведение мыши и событие клика. Причем, для IE6 это единственный HTML-тег, поддерживающий события без JavaScript. Таким образом, придавая этому уникальному элементу блоковые свойства, можно создавать на странице блоки, которые по событию могут менять динамически свои внешние характеристики, без JavaScript, на одном только CSS.

Как это может выглядеть практически зависит от вашей фантазии и не входит в задачу данной заметки. Я лишь попытался проанализировать логику одной из сторон блочной верстки и преимущества данной технологии.

Юрий Кратов

Hubs:

Lumber room