Изменение цвета элемента hr в HTML через CSS: методы

Быстрый ответ

Самый простой способ изменить цвет элемента <hr> – это применить CSS со свойством border-color. Цвет можно задать hex-кодом (#ff0000), RGB-значениями (rgb(255,0,0)) или названием цвета (red). Например:

hr {
  border: none;
  border-top: 2px solid red; /* Линия теперь будет красного цвета */
}

Этот код превратит обычный разделитель в красную линию шириной в 2 пикселя.

Одинаковый цвет в разных браузерах

Чтобы цвет элемента <hr> одинаково отображался в различных браузерах, следует учесть их особенности.

Учет различий между браузерами

Браузеры по-разному интерпретируют стили элемента <hr>. Чтобы добиться однообразия, можно применить следующий код:

hr {
  border: none;
  height: 1px;
  background: tomato; /* Очаровательный цвет спелого томата */
}

В Chrome/Safari цвет задаётся с использованием border-color, в Firefox/Opera — через background-color, а для IE7+ — с помощью color:

hr {
  color: blue; /* Вот так требует IE */
  border: none;
  background-color: blue; /* Firefox и Opera выбирают синий */
}

Регулирование размера и положения

После выбора цвета стоит обратить внимание на размер и положение разделителя.

Подробнее об этом расскажет наш спикер на видео

Настройка толщины и отступов

Можно изменить border-top и margin, чтобы отрегулировать толщину и отступы:

hr {
  border-top: 4px solid gold; /* Золотая линия — это находка! */
  margin: 10px 0; /* Однаковые отступы сверху и снизу */
}

Соответствие и адаптация

Разберёмся, как элемент <hr> может взаимодействовать c стилем родительского элемента.

Наследование цвета

С border-color: inherit; цвет элемента <hr> будет соответствовать цветовой схеме родительского элемента, как умение хамелеона приспосабливаться к окружению:

hr {
  border: 0;
  border-top: 1px solid inherit; /* Стиль успешно наследуется от родительского элемента */
}

Подробнее о наследовании border-color можно прочитать в материале от SitePoint.

Визуализация

Посмотрим, как это работает на примере:

🌌 До: -------------- (Звёздное небо с созвездиями)

Применяем волшебство CSS:

hr {
    border-color: #ff6347; /* 🎨 Волшебство красок! */
}

Итоговое внешнее оформление:

🌌 После: ======🎨====== (Звёздное небо и цветной Млечный Путь)

И вуаля, <hr> сияет всеми цветами радуги!

Подгонка hr под ваши задачи

Поняв основы, время раскрыть весь потенциал элемента <hr>.

Отказ от стандартных стилей

Чтобы начать с чистого листа, сначала уберите все стандартные стили границ:

hr {
  border: none;  /* Убрали стандартные стили */
}

Использование невидимых разделителей

Если вы хотите сделать разделитель нежным и едва заметным, используйте светлые оттенки:

hr {
  border-top: 1px solid antiquewhite; /* Тень прошлого в каждой лазурной линии */
}

Игра с прозрачностью

Полупрозрачный <hr> придаст лёгкости:

hr {
  border-top: 2px solid rgba(0, 0, 0, 0.2); /* Тонкая тень для тонкого дела */
}

Следуйте трендам

Используйте градиент для создания современного дизайна <hr>:

hr {
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
  /* Жизнь слишком ярка, чтобы быть однотонной */
}

Анимированные переходы добавят сайту своеобразия.

Полезные материалы

1. MDN Web Docs – <hr>: Тематический разрыв – Всё, что нужно знать о <hr>, от Mozilla.
2. W3Schools – Стилизация <hr> с помощью CSS – Руководство по стилизации <hr>.
3. A List Apart – Настройка размера текста в CSS – Все детали о настройке текстовых размеров в CSS.

Примечание: Некоторые ссылки могут вести на неактуальные источники (ошибки 404 или удалённый контент).