Horizontal Ruler

Лінія розділу функціональних модулів контенту використовується у дизайні будь-якого веб-ресурсу. За замовчуванням лінія <hr> відображається світло-сірого кольору з ефектом об'єму. Довжина лінії - вся ширина сторінкового контенту (без сайд-барів).

Якщо такий вигляд лінії не підходить до дизайну сайту, можна змінити колір і розмір лінії через атрибути тегу

align - визначає вирівнювання лінії.

color - колір лінії.

noshade - малює лінію без ефекту тіні.

size - товщина лінії.

width - ширина лінії.

Якщо вирівнювання лінії не визначено, але вказана ширина, то за замовченням вона розміщується по центру.

Приклади:

1. Лінія товщиною 2пікс чорного кольору

<hr color="black" size="2" />

2. Лінія товщиною 5пікс, червоного кольору, довжиною 50% від загальної ширини контенту. Розміщення - по центру

<hr color="red" size="5" width="50%" />

3. Лінія товщиною 10пікс, червоного кольору, довжиною 200пікс від загальної ширини контенту. Розміщення зліва

<hr align="left" color="red" size="10" width="200" />

4. Лінія товщиною 10пікс, червоного кольору, довжиною 200пікс від загальної ширини контенту. Розміщення праворуч.

<hr align="right" color="red" size="10" width="200" />

Також можна змінити колір і розмір лінії через стилі. Однак, бажано перевірити, як така лінія виглядатиме в різних браузерах. Код стилів досить простий.

<style>
hr {
border: none; /* Прибрати кордон (тінь) лінії */
background-color: red; /* Задати колір лінії */
height: 2px; /* Задати товщину лінії */
transform: rotate(45deg); /* Задати нахил лінії */
}
</style>

Якщо на платформі BLOGGER вам треба змінити товщину і колір розділювальних ліній тільки в одній публікації, достатньо вставити цей код стилю наприкінці вашої публікації. Стиль ліній зміниться по всій сторінці, включаючи футер сайту, але на інших сторінках матиме попередній вигляд

Якщо вам треба змінити стиль розділювальних ліній по всьому сайту, то код стилю треба вставити в HTML шаблон сайту перед кодом

]]></b:skin>

тільки без тегів <style></style>.