Как изменить цвет hr в html

Как задать цвет hr. Сколько способов добавить цвет линии hr. Вообще, изменить цвет линии hr можно несколькими способами!

О цвете для hr

1. Как задать цвет для hr через атрибут color
2. Как изменить цвет для hr через атрибут style
3. Как изменить цвет hr через тег style
4. Как изменить цвет hr через файл css

Как задать цвет для hr через атрибут color

Я буквально сегодня написал о теге hr довольно приличный талмуд.

Где, в том числе, говорилось об устаревшим атрибуте color, который все ещё можно использовать, но как говорится в спецификации html - не желательно использовать!

Для того, чтобы продемонстрировать изменение цвета hr, нам понадобится этот тег:

<hr>

Во внутрь тега помещаем атрибут "color"

<hr color ="red">

Результат изменения цвета hr через атрибут color

---

Если мы посмотрим в коде браузера, то он автоматически прописывает для нашего "hr" свойства.

С ниже приведенными свойствами делать ничего не нужно - это для общего развития. Вы написали атрибут color ="red" и получаем, как наш атрибут выглядит через css по умолчанию в браузере:

hr {

border-top-style: solid;

border-right-style: solid;

border-bottom-style: solid;

border-left-style: solid;

border-top-color: rgb(255, 0, 0);

border-right-color: rgb(255, 0, 0);

border-bottom-color: rgb(255, 0, 0);

border-left-color: rgb(255, 0, 0);

background-color: rgb(255, 0, 0);

display: block;

unicode-bidi: isolate;

margin-block-start: 0.5em;

margin-block-end: 0.5em;

margin-inline-start: auto;

margin-inline-end: auto;

overflow: hidden;

border-width: 1px;

}




Как изменить цвет для hr через атрибут style

Следующим способом изменить цвет в hr через атрибут style(attribute style) + border

Опять берем наш подопытный тег hr :

<hr>

Вовнутрь помещаем атрибут style с такими свойствами:

style="1px solid red"

Весь код:

<hr style="border:1px solid red">

Результат изменения цвета "hr" через атрибут style

---

Возможно, что: Возможно, что вы видите двойную линию - это нормально! Такое бывает, когда разное нагромождение стилей. Вообще по умолчанию, должна быть одна толстая сплошная. Рекомендую в спорных вопросах тестировать спорные html + css на отдельной простой html старице


Конечно же... я знаю в чем причина! Давайте данный эффект удалим!

Вместо :

border:1px solid red

Поставим :

border-bottom: 1px solid red;

Либо "top" - это не принципиально. "border-bottom" - бордюр снизу, либо "border-top" - бордюр сверху.

border-top: 1px solid red;

Результат изменения цвета "hr" через атрибут style

---

Данный вариант используется точечно, если на странице больше нет повторений.




Как изменить цвет hr через тег style

Следующим пунктом мы рассмотрим вариант изменения цвета hr через тег style. Это в принципе тоже самое , лишь с тем отличием, что свойства цвета будем прописывать в теге style

Опять берем наш "hr"

<hr>

Вовнутрь помещаем id либо класс, пусть это будет класс - example(точка перед данным словом обозначает класс):

<hr class="example">

На странице, обычно в теге head помещаем тег style

<style>.example { border : 1px solid blue;}</style>

Результат цвет hr через тег style

---

Как видим - абсолютно та же картина... давайте и здесь её исправим:

<style>.example_1 { border-bottom: 1px solid blue;}</style>

<hr class="example_1 ">

Результат :

---

Данный способ применяется в том случае, если данный цвет hr используется на нескольких страницах.




Как изменить цвет hr через файл css

И последний пункт, когда стили для hr будут размещаться в файле file css - этот способ используют в том случае, когда требуется распространить данные эффекты на весь сайт.

Мы берем вот этот класс и размещаем в файле css:

.example_1 { border-bottom: 1px solid blue;}

Т.е. написание стилей ничем не отличается, кроме расположения.

Для этого потребуется:

Как сделать css файл документ

Прикрепить css к html

Расположить выше приведенные стили в созданном файле css.