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

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

Рисует горизонтальную линию, которая по своему виду зависит от используемых параметров, а также браузера. Тег

---

относится к блочным элементам, линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.

Синтаксис

Атрибуты

align Определяет выравнивание линии. color Цвет линии. noshade Рисует линию без трехмерных эффектов. size Толщина линии. width Ширина линии.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
 

Результат данного примера показан на рис. 1.

Рис. 1. Вид горизонтальной линии в браузере

Статьи по теме

---

: The Thematic Break (Horizontal Rule) element

Historically, this has been presented as a horizontal rule or line. While it may still be displayed as a horizontal rule in visual browsers, this element is now defined in semantic terms, rather than presentational terms, so if you wish to draw a horizontal line, you should do so using appropriate CSS.

Content categories	Flow content.
Permitted content	None, it is an empty element.
Tag omission	It must have start tag, but must not have an end tag.
Permitted parents	Any element that accepts flow content.
Implicit ARIA role	separator (en-US)
Permitted ARIA roles	presentation (en-US) or none (en-US)
DOM interface	HTMLHRElement (en-US)

Attributes

This element’s attributes include the global attributes.

Задаёт правило выравнивания.По умолчанию значение выставлено как left

Задаёт цвет линии

Sets the rule to have no shading.

Устанавливает высоту в px

Задаёт длину линии в px либо в %

Example

HTML

p> Это первый параграф текста Это первый параграф текста Это первый параграф текста Это первый параграф текста p> hr /> p> Это второй параграф текста Это второй параграф текста Это второй параграф текста Это второй параграф текста p> 

Result

Specifications

Specification
HTML Standard # the-hr-element

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

This page was last modified on 19 нояб. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

• Product help
• Report an issue

Our communities

Developers

• Web Technologies
• Learn Web Development
• MDN Plus
• Hacks Blog

• Website Privacy Notice
• Cookies
• Legal
• Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

Как с помощью стилей задать цвет линии, созданной с помощью тега

Кроссбраузерно вывести горизонтальную одноцветную линию с помощью тега

---

.

Решение

Цвет линии, добавленной на веб-страницу через тег

---

, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color , а браузеры Firefox и Opera — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все параметры воедино для селектора HR , получим универсальное решение для популярных браузеров.

Пример 1. Цвет горизонтальной линии

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).

Изменение цвета элемента hr

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

25 ответов

Я думаю, вы должны использовать border-color вместо color , Если ваше намерение состоит в том, чтобы изменить цвет линии, произведенной

---

— тег.

хотя в комментариях было указано, что если вы измените размер своей линии, граница все равно будет такой же широкой, как вы указали в стилях, и линия будет заполнена цветом по умолчанию (что не является желаемым эффектом большую часть времени). Так что, похоже, в этом случае вам также нужно будет указать background-color (как @Ibu предложил в своем ответ.)

HTML 5 Boilerplate в таблице стилей по умолчанию указывает следующее правило:

статьи под названием «12 малоизвестных фактов CSS», опубликованный недавно SitePoint, упоминает, что

---

можете установить его border-color его родители color если указать hr .

border-color работает в Chrome и сафари
background-color работает в Firefox и Opera
color работает в IE7+

Я думаю, что это может быть полезно. это был простой селектор CSS.

это позволяет изменять высоту при необходимости. Удача. Источник:как стиль HR с CSS

протестировано в ff, opera, ie, chrome и safari

это сохранит горизонтальное правило толщиной 1px, а также изменит его цвет

только верхняя граница с цветом достаточно, чтобы сделать линию в другом цвете.

Я считаю, что это наиболее эффективный подход:

или, если вы предпочитаете делать это на всех hr-элементах, напишите это на CSS:

фон-это тот, который вы должны попытаться изменить

вы также можете работать с цветом границ. я не уверен, что я думаю, что есть проблемы с crossbrowser с этим. вы должны протестировать его в разных браузерах

Если вы используете класс css, то он будет взят всеми тегами «hr», но если вы хотите для конкретного » hr » использовать приведенный ниже код i.e, встроенный css

если он не работает в chrome попробуйте ниже кода:

Я тестирую IE, Firefox и Chrome в мае 2015 года, и это лучше всего работает с текущими версиями. Он центрирует HR и делает его 70% широким:

вы должны установить ширину границы в 0; он хорошо работает в Firefox и Chrome.

это просто и мой любимый.

некоторые браузеры использовать color атрибут и некоторые используют . Чтобы быть в безопасности:

прочитав все ответы здесь и увидев описанную сложность, я приступил к небольшому отвлечению для экспериментов с HR. И, вывод состоит в том, что вы можете выбросить большую часть monkeypatched CSS, который вы написали, прочитайте этот маленький букварь и просто используйте эти две строки чистого CSS:

что это все вам нужно стиль вашего HRs.

• работает кросс-браузер, кросс-устройство, кросс-ОС, кросс-английский канал, кросс-века.
• нет

поскольку у меня нет репутации для комментариев, я дам здесь несколько идей.

если вы хотите переменную высоту css, снимите все границы и дайте цвет фона.

если вы хотите просто стиль, который вы знаете, что будет работать (пример: заменить границу в элементе:: before для большинства почтовых клиентов или

в обоих случаях, если вы установите ширину, она всегда будет иметь размер.

нет необходимости устанавливать display:block; для этот.

чтобы быть в полной безопасности, вы можете смешивать оба, потому что некоторые браузеры могут запутаться с height:0px; :

С помощью этого метода вы можете быть уверены, что он будет иметь как минимум 2 пикселя в высоту.

это линия больше, но безопасность-это безопасность.

это метод, который вы должны использовать, чтобы быть совместимы практически со всем.

помните: Gmail обнаруживает только встроенный css, и некоторые почтовые клиенты могут не поддерживать фоны или границы. Если один терпит неудачу, у вас все равно будет линия 1px. Лучше, чем ничего.

в худших случаях вы можете попробовать добавить color:blue; .

в худшем из худших случаев вы можете попробовать использовать тег и положить ваши драгоценные

---

тег внутри него. Он унаследует цвет тега.

С помощью этого метода, вы будет хотят сделать так:

---

.

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

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

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

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

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

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

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

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

Изменение цвета элемента hr

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

ОТВЕТЫ

Ответ 1

Я думаю, что вы должны использовать border-color вместо color , если вы хотите изменить цвет линии, созданной

---

.

Хотя в комментариях отмечалось, что если вы измените размер вашей линии, граница все равно будет такой же широкой, как вы указали в стилях, и линия будет заполнена цветом по умолчанию (что не является желаемым эффектом для большинства время). Похоже, что в этом случае вам также необходимо указать background-color (как предложил @Ibu в своем ответе).

Проект HTML 5 Boilerplate в таблице стилей по умолчанию определяет следующее правило:

В статье под названием «12 малоизвестных фактов CSS», опубликованной недавно SitePoint, упоминается, что

---

может установить для border-color его родительский color если вы укажете hr .

Ответ 2

• border-color работает в Chrome и Safari.
• background-color работает в Firefox и Opera.
• color работает в IE7+.

Ответ 3

Я думаю, что это может быть полезно. это был простой селектор CSS.

Ответ 4

Делая это таким образом, вы можете изменить высоту, если это необходимо. Удачи. Источник: Как стилизовать HR с помощью CSS

Ответ 5

Протестировано в Firefox, Opera, Internet Explorer, Chrome и Safari.

Ответ 6

Достаточно только рамки с цветом, чтобы сделать линию другим цветом.

Ответ 7

Это сохранит горизонтальное правило толщиной 1px, а также изменит его цвет

Ответ 8

Ответ 9

Я считаю, что это самый эффективный подход:

Или, если вы предпочитаете делать это на всех элементах hr, напишите это на CSS:

Ответ 10

Прочитав все ответы здесь и увидев описанную сложность, я решил немного поэкспериментировать с HR. И напрашивается вывод, что вы можете выбросить большую часть написанного вами обезьяньего CSS, прочитать этот небольшой учебник и просто использовать эти две строки чистого CSS:

Это ВСЕ, что вам нужно для стиля ваших HR.

• Работает кросс-браузер, кросс-устройство, кросс-ос, кросс-англ-канал, кросс-эйдж.
• Нет «я думаю, что это сработает. «, «вам нужно помнить о Safari/IE. » и т.д.
• без лишних CSS — без учета height , width , background-color , color и т.д.

Просто пуленепробиваемые красочные HR. Это та простая ТМ .

Бонус: чтобы дать HR некоторую высоту H , просто установите border-width как H/2 .

Ответ 11

если u использует класс css, тогда он будет взят всеми тегами «hr», но если u хочет для определенного «hr» использовать приведенный ниже код i.e, inline css

если он не работает в chrome, попробуйте под кодом:

Ответ 12

фон — это тот, который вы должны попытаться изменить

Вы также можете работать с цветом границ. Я не уверен, что я думаю, что с этим связаны проблемы с кроссбраузерами. вы должны протестировать его в браузерах differrent.

Ответ 13

Вы должны установить border-width в 0; Он отлично работает в Firefox и Chrome.

Ответ 14

Я тестирую IE, Firefox и Chrome May 2015, и это лучше всего работает с текущими версиями. Он центрирует HR и составляет 70%:

Ответ 15

Это простой и мой любимый.

Ответ 16

Некоторые браузеры используют атрибут color , а некоторые используют атрибут background-color . Чтобы быть в безопасности:

Ответ 17

Поскольку у меня нет репутации для комментариев, я приведу здесь несколько идей.

если вам нужна высота переменной css, снимите все границы и дайте цвет фона.

если вы хотите просто стиль, который, как вы знаете, будет работать (например: для замены рамки в элементе:: before для большинства почтовых клиентов или

В обоих случаях, если вы установите ширину, она всегда будет иметь размер.

Не нужно устанавливать display:block; для этого.

Чтобы быть абсолютно безопасным, вы можете смешивать оба варианта, потому что некоторые браузеры могут запутаться с height:0px; :

С помощью этого метода вы можете быть уверены, что он будет иметь высоту не менее 2 пикселей.

Это еще одна строка, но безопасность — это безопасность.

Это метод, который вы должны использовать для совместимости почти со всеми.

Помните: Gmail обнаруживает только встроенный css, а некоторые почтовые клиенты могут не поддерживать фон или границы. Если вы терпите неудачу, у вас все равно будет линия 1px. Лучше, чем ничего.

В худших случаях вы можете попробовать добавить color:blue; .

В худшем из худших случаев вы можете попробовать использовать тег и поместить в него свой драгоценный тег

---

. Он наследует цвет тега .

С помощью этого метода вы WILL хотите сделать вот так:

---

.

Ответ 18

Вы можете использовать CSS для создания строки с другим цветом, например:

этот код отобразит вертикальную серо-серию.

Ответ 19

Ну, я новичок в HTML, CSS и на Java, но я пробовал свой путь, который работал у меня во всех браузерах. Я использовал JS вместо CSS, который не работает с некоторыми браузерами.

Прежде всего, я дал элементу HR и использовал его в Java Script.
Вот код.

Ответ 20

Код работает для более старого IE

Пробовали для многих цветов

Ответ 21

Вы можете указать тег

---

и перейти в ваш файл css и добавить:

Ответ 22

Использование цветов шрифта для изменения горизонтальных правил делает их более гибкими и простыми в использовании.

Свойство color не наследуется по умолчанию, поэтому для добавления цвета наследование необходимо добавить следующее:

Ответ 23

Вы можете сделать это:

Ответ 24

Как правило, вы не можете просто установить цвет горизонтальной линии с помощью CSS, как и все остальное. Прежде всего, Internet Explorer нужен цвет в вашем CSS, чтобы это выглядело так:

Но Opera и Mozilla нужно, чтобы цвет в вашем CSS читался так:

«Цвет фона: # 123455»

Итак, вам нужно будет добавить обе опции в ваш CSS.

Затем вам нужно будет указать горизонтальную линию с некоторыми размерами, или она будет по умолчанию соответствовать стандартной высоте, ширине и цвету, установленным вашим браузером. Вот пример кода того, как должен выглядеть ваш CSS, чтобы получить синюю горизонтальную линию.

Или вы можете просто добавить стиль к своей HTML-странице непосредственно при вставке горизонтальной линии, например так:

Похожие публикации:

1. Как вставить комментарий в файл css
2. Как выглядит css код
3. Как сделать чтобы картинка не выходила за блок css
4. Как сделать чтобы фон подстраивался под размер экрана css

Как изменить цвет элемента

---

с помощью CSS

Вы можете просто использовать CSS-свойство background-color в сочетании с height и border , чтобы изменить цвет по умолчанию для элемента .

В следующем примере мы изменили цвет тега hr на светло-серый. Вы также можете увеличить толщину линии, просто увеличив значение свойства height .

     hr 
Это просто параграф
 
Это еще один параграф
  

Читайте также

Похожие примеры:

• Как создать треугольник или каретку с помощью CSS
• Как применить границу к элементу при наведении курсора мыши, не влияя на макет в CSS
• Как удалить контур вокруг полей ввода текста в Chrome с помощью CSS