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

🕛 23.01.2009, 00:33

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

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

HTML 4.01CSS 2.1IE 6IE 7Op 9.5Sa 3.1Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251"> <title>Цвет горизонтальной линии</title> <style type="text/css"> HR { border: none; /* Убираем границу для браузера Firefox */ color: red; /* Цвет линии для браузера Internet Explorer */ background-color: red; /* Цвет линии для браузера Firefox и Opera */ height: 2px; /* Толщина линии */ } </style> </head> <body> <hr> <hr> </body>
</html>

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