Серёжа СыроежкинСерёжа СыроежкинКопирайтер

Hr HTML

теги: html, css, типографика

Как правило, разделители на сайте используются для визуального отделения цитат и других смысловых блоков от основного контента страницы. Горизонтальные разделители для сайта могут быть проставлены с помощью тега hr. Выглядит горизонтальный разделитель следующим образом:


Тег hr может принимать следующие атрибуты:

  • align - устанавливает выравнивание разделителя (right, center или left);
  • color - задает цвет линии;
  • size - определяет толщину линии;
  • width - задает ширину линии;
  • noshade - отменяет трехмерный эффект линии.

Применим теперь указанные атрибуты к горизонтальному разделителю:

<center>
 <div class="nubex" style="background-color: #ee6206; padding: 5px; width: 500px;">
  <hr align="center" color="#fff" size="1" width="480px" />
   <p align="center" style="color: #fff;">Был бы двор, придворные найдутся.</p>
  <hr align="center" color="#fff" size="1" width="480px" />
 </div>
</center>

Результат приведенного примера:


Был бы двор, придворные найдутся.


Стилизация разделителей с помощью CSS

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

<!DOCTYPE html>
<html>
 <head>
  <title>Стилизуем горизонтальные разделители с помощью CSS</title>
  <meta charset="utf-8">
  <style>
   hr {
	color: #ee6206; /* Устанавливаем цвет линии */
	background-color: #ee6206; /* Для кроссбраузерности (Opera и Mozilla Firefox) */
	height: 3px; /* Задаем толщину */
	border: none; /* Отменяем отображение границы (в браузере Firefox) */
   }
  </style>
 </head>
 <body>
  <hr />
  <center>
    <p>Был бы двор, придворные найдутся.</p>
  </center>
  <hr />
 </body>
</html>

В конструкторе сайтов "Нубекс" есть несколько различных стилизованных разделителей, встраиваемых в контент сайта. Для получения более подробной информации читайте статью: Разделители для сайта.

Комментарии 1