Горизонтальные линии, или на типографский манер горизонтальные линейки, хорошо использовать для отделения одного блока текста от другого. Небольшой по размеру текст, сверху и снизу которого располагаются горизонтальные линии привлекает больше, чем обычно, внимание читателя.
Если нужна простая, без затей линия, проще воспользоваться тегом HR.
По умолчанию, линия отрисовывается трехмерная, что не всегда вяжется с дизайном сайта. Поэтому, если требуется сделать сплошную линию, надо добавить параметр noshade тега HR.
В качестве горизонтальных линий можно использовать любой подходящий
рисунок. Надо лишь растянуть его до нужной ширины. Ниже, в качестве
рисунка использовалась нарисованная буква Н
Обратите внимание, что при таком растягивании рисунка в нем однозначно появляются искажения. Следовательно, чем абстрактней рисунок, тем лучше, чтобы никто ничего не понял, что на нем изображено.
Но что же делать, если нужна не сплошная линия, а, например, пунктирная?
Для этого следует воспользоваться таблицей. Создаем таблицу состоящую
из одной ячейки и вставляем в нее фоновый рисунок в виде пунктирной
линии. Хитрость состоит в том, чтобы в ячейке кроме фона был еще
один рисунок, иначе в Netscape мы просто ничего не увидим. В качестве
такого рисунка традиционно используется прозрачный GIF размером
1 на 1 пиксел.
 |
Еще один прием создания линий основывается на использовании стилей. Вместо таблицы, описанной в предыдущем примере, можно использовать тег DIV:
<div class="dot"></div>
описав в начале документа, либо в отдельной таблице стилей, класс
dot следующим образом:
.dot { width: 100%; background: URL(dot.gif)
repeat-x; }
Можно в описание класса заложить еще и вертикальные отступы, что тоже очень удобно: margin-top: 10px; margin-bottom: 10px;
Пример 5. Создание горизонтальных линий с помощью стилейТак получаются линии из рисунков, а вот чтобы обойтись без них, можно использовать параметры border-top — задает линию сверху блочного тега или border-bottom — снизу от блока. Это универсальные свойства, они определяет одновременно толщину, стиль и цвет линии, которые описываются через пробел (пример 6).
Пример 6. Создание линии с помощью стилейПервый параметр определяет толщину линии в пикселах, второй —
стиль линии, возможные значения и их вид приведены на рис. 1, последний
параметр задает цвет линии, в данном случае — темно-красный.
Рис.1. Стили линий
Первые два стиля — dotted и dashed стали поддерживаться браузерами Netscape и Internet Explorer только со старших версий.
Параметр padding-bottom, используемый в примере, добавлен для создания отступа между линией и текстом. Без него текст «налипает» на линию, что ухудшает его вид и читабельность.
Примечание.