Как говорилось ранее, разделы страницы Web могут визуально разделяться выводом между ними горизонтальных линеек. Это делается с помощью тега <hr/> для проведения линии на странице.

Линейка по умолчанию имеет высоту (толщину) в 2 пикселя и проходит по ширине окна браузера. Можно изменить эти размеры, кодируя для тега <hr/> стили width и height. Такое изменение размеров показано в следующей линейной таблице стилей и выводе браузера.

<hr style="width:75%; height:7px; text-align:center"/> 

Рис. 3.12. Задание стиля горизонтальной линейки

При определении ширины элементов страницы часто предпочтительнее кодировать их в виде процентов. В этом случае ширина всегда выводится в правильной пропорции с другими элементами на странице Web, даже если пользователь изменяет размер окна браузера. Если горизонтальная линейка получает размер меньше ширины окна браузера, то ее можно также позиционировать на горизонтальной линии с помощью text-align:left, text-align:center, или text-align:right. В предыдущем примере линейка занимает 75% ширины страницы и расположена по центру.

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

<style type="text/css"> 
 hr {height:1px; width:50%; text-align:center} 
</style>

С помощью такого задания стиля все теги <hr/> на странице создают линейки толщиной 1 пиксель, 50% от ширины окна браузера (независимо от размера окна) и расположенные горизонтально по центру страницы.