Sever Web-Art

Различные IT услуги

CSS, Заметки

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

По умолчанию, цвет линии, тега <hr>, при добавлении на web-страницу, отображается серым цветом, да еще и с эффектом объема.

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

Что бы подружить наш <hr>, со всеми браузерами, будем использовать несколько стилевых атрибутов. Мы ж, не дурнее их, правда?!

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

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

Читайте также  Прячем ссылку в форме

Например, так:

<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>

Вот, что получилось, в видимом варианте(цвет линии задан как красный, а толщина линии равна двум пикселам): kak-izmenit-cvet-linii-hr

  1. Werdn

    А как вообще убрать рамку у
    в IE?
    я пишу так:

    hr {
    
    	margin: 2em auto;
    
    	width: 400px;
    
    	height: 20px;
    
    	background: transparent url(images/divider.png) no-repeat scroll center top;
    
    	border: none;  /*В FireFox, Opera, Konqueror, Safari рамка убирается*/
    
    	border-collapse: 0;
    
    	outline: none;
    
    }
    • Если уж линия тебе понадобилась, хоть и не могу понять зачем, если она будет невидима.. То, самый простой вариант, это задать ей тот же цвет, что и фон страницы. 🙂

  2. KseniA

    а еще можно написать:

    display: none;

Добавить комментарий

Тема разработана Anders Norén