Как с помощью стилей задать цвет линии, созданной с помощью тега
Кроссбраузерно вывести горизонтальную одноцветную линию с помощью тега
.
Решение
Цвет линии, добавленной на веб-страницу через тег
, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color , а браузеры Firefox и Opera — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все параметры воедино для селектора HR , получим универсальное решение для популярных браузеров.
Пример 1. Цвет горизонтальной линии
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет горизонтальной линии
В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).
Рис. 1. Цветная горизонтальная линия в браузере Safari
Тег hr
Тег hr задает разделительную горизонтальную линию. Преимущество тега в том, что для того, чтобы провести одиночную линию, не требуется создавать лишних блоков. Не требует закрывающего тега.
Пример
Давайте посмотрим, как работает тег hr :
Пример
Давайте попробуем поменять цвет линии с помощью CSS свойства border-color :
Пример
Цвет линии также можно сменить и свойством color (при этом, если одновременно заданы свойства color и border-color — второе имеет приоритет):
Пример
Давайте теперь поменяем цвет линии с помощью CSS свойства border . Обратите внимание на то, что при этом линия станет двойной толщины (так как мы задали границу и сверху, и снизу):
Пример
Попробуем поменять цвет линии с помощью CSS свойства border-top , и зададим только верхнюю границу. Теперь двойной линии не будет:
Пример
Давайте сделаем линию в виде точек с помощью CSS свойства border-top , зададим значение dotted вместо solid :
Пример
Давайте увеличим толщину линии с помощью CSS свойства border-width :
Пример
А теперь давайте линии добавим высоту height и границу через border . Граница при этом распадется на верхнюю и нижнюю:
How to Change the Color of an
Element using CSS
You can simply use the CSS background-color property in combination with the height and border to the change the default color an
element.
In the following example we’ve changed the color of hr tag to light grey. You can also increase the thickness of the line by simply increasing the value of the height property.
Example
Change the Color of hr Tag using CSS hr This is a paragraph
This is another paragraph
Related FAQ
Here are some more FAQ related to this topic:
- How to create triangle or caret icons using CSS
- How to add border to an element on mouse hover without affecting the layout in CSS
- How to remove outline around text input boxes in chrome using CSS
Как поменять цвет hr в css
Опять берем наш подопытный тег hr :
Вовнутрь помещаем атрибут style с такими свойствами:
style=»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»
Вовнутрь помещаем id либо класс, пусть это будет класс — example(точка перед данным словом обозначает класс):
На странице, обычно в теге head помещаем тег style
Результат цвет hr через тег style
Как видим — абсолютно та же картина. давайте и здесь её исправим:
Результат : Данный способ применяется в том случае, если данный цвет hr используется на нескольких страницах.
Как изменить цвет hr через файл css
И последний пункт, когда стили для hr будут размещаться в файле file css — этот способ используют в том случае, когда требуется распространить данные эффекты на весь сайт.
Мы берем вот этот класс и размещаем в файле css:
Т.е. написание стилей ничем не отличается, кроме расположения.
Для этого потребуется:
Расположить выше приведенные стили в созданном файле css.