Создание HTML-тегов HTML с помощью CSS

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

Или - еще лучше - используйте элемент HTML для горизонтального правила.

Элемент горизонтального правила

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

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

Ширина и высота согласованы во всех браузерах

Единственными стилями, которые совместимы между веб-браузерами, являются ширина и стили. Они определяют, насколько велика будет линия. Если вы не определяете ширину и высоту, ширина по умолчанию составляет 100 процентов, а высота по умолчанию - 2 пикселя.

В этом примере ширина составляет 50 процентов от родительского элемента (обратите внимание, что приведенные ниже примеры включают встроенные стили. В производственной настройке эти стили будут фактически записаны во внешней таблице стилей для удобства управления на всех ваших страницах):

стиль = "ширина: 50%;">

И в этом примере высота равна 2em:

стиль = "высота: 2em;">

Изменение границ может быть сложным

В современных браузерах браузер строит линию, настраивая границу. Поэтому, если вы удалите границу со стилем, линия исчезнет на странице. Как вы можете видеть (ну, вы ничего не увидите, поскольку строки будут невидимыми) в этом примере:

style = "border: none;">

Настройка размера, цвета и стиля рамки приведет к тому, что линия будет выглядеть по-разному и будет иметь тот же эффект во всех современных браузерах. Например, на этой демонстрации граница красная, пунктирная и 1px широкая:

style = "border: 1px dashed # 000;">

Но если вы измените границу и высоту, стили выглядят несколько иначе в очень устаревших браузерах, чем в современных браузерах. Как вы можете видеть в этом примере, если вы просмотрите его в IE7 и ниже (браузер, который устарел и больше не поддерживается Microsoft), есть скошенная внутренняя строка, которая не отображается в других браузерах (включая IE8 и выше) :

style = "height: 1.5em; width: 25em; border: 1px solid # 000;">

Эти антикварные браузеры действительно не очень беспокоят веб-дизайн сегодня, так как они в значительной степени заменены более современными вариантами.

Сделайте декоративную линию с фоновым изображением

Вместо цвета вы можете определить фоновое изображение для своего горизонтального правила, чтобы оно выглядело точно так, как вы хотите, но все равно отображает семантически в вашей разметке. В этом примере мы использовали изображение, состоящее из трех волнистых линий. Установив его как фоновое изображение без повтора, он создает перерыв в содержимом, которое выглядит почти так, как вы видите в книгах:

style = "height: 20px; background: #fff url (aa010307.gif) no-repeat scroll center; border: none;">

Преобразование элементов управления персоналом

С CSS3 вы также можете сделать свои строки более интересными. Элемент HR традиционно является горизонтальный line, но с свойством CSS transform вы можете изменить, как они выглядят. Любимым преобразованием элемента HR является изменение вращения.

Вы можете вращать свой элемент HR так, чтобы он был слегка диагональным:

hr {-moz-transform: вращать (10deg);-webkit-transform: rotate (10deg);-o-transform: вращать (10deg);-ms-transform: вращать (10deg);transform: rotate (10deg);}

Или вы можете повернуть его так, чтобы он был полностью вертикальным:

hr {-moz-transform: rotate (90deg);-webkit-transform: вращать (90deg);-o-transform: вращать (90deg);-ms-transform: вращать (90deg);transform: вращать (90deg);}

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

Другой способ получить линии на ваших страницах

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