Как изменить цвет hr в html
Как задать цвет hr. Сколько способов добавить цвет линии hr. Вообще, изменить цвет линии hr можно несколькими способами!
О цвете для hr
- Как задать цвет для hr через атрибут color
- Как изменить цвет для hr через атрибут style
- Как изменить цвет hr через тег style
- Как изменить цвет hr через файл css
Как задать цвет для hr через атрибут color
Я буквально сегодня написал о теге hr довольно приличный талмуд.
Где, в том числе, говорилось об устаревшим атрибуте color, который все ещё можно использовать, но как говорится в спецификации html - не желательно использовать!
Для того, чтобы продемонстрировать изменение цвета hr, нам понадобится этот тег:
<hr>
Во внутрь тега помещаем атрибут "color"
Результат изменения цвета hr через атрибут color
Если мы посмотрим в коде браузера, то он автоматически прописывает для нашего "hr" свойства.
С ниже приведенными свойствами делать ничего не нужно - это для общего развития. Вы написали атрибут
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
Конечно же... я знаю в чем причина! Давайте данный эффект удалим!
Вместо :
Поставим :
Либо "top" - это не принципиально. "border-bottom" - бордюр снизу, либо "border-top" - бордюр сверху.
Результат изменения цвета "hr" через атрибут style
Данный вариант используется точечно, если на странице больше нет повторений.
Как изменить цвет hr через тег style
Следующим пунктом мы рассмотрим вариант изменения цвета hr через тег style. Это в принципе тоже самое , лишь с тем отличием, что свойства цвета будем прописывать в теге style
Опять берем наш "hr"
Вовнутрь помещаем id либо класс, пусть это будет класс - example(точка перед данным словом обозначает класс):
На странице, обычно в теге head помещаем тег style
Результат цвет hr через тег style
Как видим - абсолютно та же картина... давайте и здесь её исправим:
<style>.example_1 { border-bottom: 1px solid blue;}</style>
<hr class="example_1 ">
Данный способ применяется в том случае, если данный цвет hr используется на нескольких страницах.
Как изменить цвет hr через файл css
И последний пункт, когда стили для hr будут размещаться в файле file css - этот способ используют в том случае, когда требуется распространить данные эффекты на весь сайт.
Мы берем вот этот класс и размещаем в файле css:
Т.е. написание стилей ничем не отличается, кроме расположения.
Для этого потребуется:
Расположить выше приведенные стили в созданном файле css.
Свои комменты в ожидании переделки!
Когда сделаю не знаю!
Времени нет...
Иначе сообщение будет удалено, вас в бан - все просто!
Но если, сил нет как хочется высказать всё, что вы думаете об этом, пожалуйста - комменты от Vk - форма ниже: