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