Чтобы добавить горизонтальные линии в виде разделителей на ваши веб-сайты, один из вариантов включает добавление файлов изображений этих линий на вашу страницу, но для этого потребуется, чтобы ваш браузер извлек и загрузил эти файлы, что может отрицательно повлиять на производительность сайта . Вы также можете использовать CSS- свойство border, чтобы добавить границы, которые действуют как линии сверху или снизу элемента, эффективно создавая разделительную линию.
Или — еще лучше — используйте элемент HTML для горизонтального правила.
Горизонтальный элемент правила
Внешний вид горизонтальных линий правил по умолчанию не идеален. Чтобы они выглядели лучше, добавьте CSS, чтобы настроить внешний вид этих элементов в соответствии с тем, как должен выглядеть ваш сайт.
Базовый тег HR отображает способ, которым браузер хочет его отобразить Современные браузеры, как правило, отображают не стилевые HR-теги шириной 100 процентов, высотой 2 пикселя и трехмерной рамкой черного цвета для создания линии.
Ширина и высота постоянны во всех браузерах
Единственными стилями, которые согласуются во всех браузерах, являются ширина и стили. Они определяют, насколько большой будет линия. Если вы не определяете ширину и высоту, ширина по умолчанию составляет 100 процентов, а высота по умолчанию составляет 2 пикселя.
В этом примере ширина составляет 50 процентов от родительского элемента (обратите внимание, что все приведенные ниже примеры включают встроенные стили. В производственных настройках эти стили будут фактически записаны во внешней таблице стилей для простоты управления на всех ваших страницах):
стиль = "ширина: 50%;">
И в этом примере высота 2em:
стиль = "высота: 2em;">
Изменение границ может быть сложной задачей
В современных браузерах браузер строит линию, регулируя границу. Поэтому, если вы удалите границу со свойством style, линия исчезнет на странице. Как вы можете видеть (ну, вы ничего не увидите, поскольку строки будут невидимыми) в этом примере:
style = "border: none;">
Регулировка размера, цвета и стиля рамки делает ее по-разному и имеет одинаковый эффект во всех современных браузерах. Например, в этой демонстрации граница будет красной, пунктирной и шириной 1 пиксель:
style = "border: 1px dashed # 000;">
Сделайте декоративную линию с фоновым изображением
Вместо цвета определите фоновое изображение для вашего горизонтального правила так, чтобы оно выглядело именно так, как вы хотите, но по-прежнему семантически отображается в вашей разметке. В этом примере мы использовали изображение из трех волнистых линий. Установив его как фоновое изображение без повтора, он создает разрыв в контенте, который выглядит почти так, как вы видите в книгах:
style = "height: 20px; background: #fff url (aa010307.gif) центр прокрутки без повтора; border: none;">
Преобразование HR элементов
С помощью CSS3 вы также можете сделать свои строки более интересными. Элемент HR традиционно является горизонтальной линией, но с помощью свойства CSS-преобразования вы можете изменить их внешний вид. Любимое преобразование элемента HR — это изменение поворота.
Поверните элемент HR, чтобы он был слегка диагональным:
hr {
-moz-transform: rotate (10 градусов);
-webkit-transform: повернуть (10 градусов);
-о-преобразование: вращение (10 градусов);
-ms-преобразование: поворот (10 градусов);
преобразование: вращение (10 градусов);
}
Или вы можете повернуть его так, чтобы он был полностью вертикальным:
hr {
-moz-transform: rotate (90deg);
-webkit-transform: повернуть (90 градусов);
-о-преобразование: вращение (90 градусов);
-ms-преобразование: поворот (90 градусов);
преобразование: вращение (90 градусов);
}
Этот метод вращает HR в зависимости от его текущего местоположения в документе, поэтому вам может потребоваться отрегулировать позиционирование, чтобы получить его там, где вы хотите. Не рекомендуется использовать это для добавления вертикальных линий в дизайн, но это интересный эффект.
Еще один способ получить линии на ваших страницах
Одна вещь, которую делают некоторые люди вместо использования элемента HR, — это полагаться на границы других элементов. Но иногда HR намного удобнее и проще в использовании, чем попытка установить границы. Проблемы блочной модели некоторых браузеров могут усложнить настройку границ.