Программирование

Стилизация тега HR (горизонтальное правило)

Чтобы добавить горизонтальные линии в виде разделителей на ваши веб-сайты, один из вариантов включает добавление файлов изображений этих линий на вашу страницу, но для этого потребуется, чтобы ваш браузер извлек и загрузил эти файлы, что может отрицательно повлиять на производительность сайта . Вы также можете использовать 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 градусов);
}
Похожие посты
Программирование

Что такое канал RSS? (И где его взять)

Программирование

7 причин, почему изображения не загружаются на ваш сайт

Программирование

Запустите агент SQL Server: настройте SQL Server 2012

Программирование

15 лучших бесплатных обоев дня Святого Патрика