www html, html уроки, html теги, css, верстка
статьи html уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > FAQ > Цвет > Как с помощью стилей задать цвет линии, созданной с...

Справочник по CSS (ЦСС) и ШТМЛ

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

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

Пример

Валидный HTML
Невалидный CSS

<!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; /* Убираем границу для браузера Файер фох */
 color: red; /* Цвет линии для браузера Internet Эксплорер */
 background-color: red; /* Цвет линии для браузера Файер фох и Опера */
 height: 2px; /* Толщина линии */
}
</style>
</head>
<body>
<hr>
<hr>
</body>
</html>

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

Рис. 1

Рис. 1. Цветная горизонтальная линия в браузере Опера

Учтите, что валидатор CSS (ЦСС) выдаст предупреждение о том, что совпадают значения параметров color и background-color, поэтому стиль в данном случае не пройдет валидацию.

Поиск по сайту



FAQ

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект