Как с помощью стилей задать цвет линии, созданной с помощью тега
Кроссбраузерно вывести горизонтальную одноцветную линию с помощью тега
.
Решение
Цвет линии, добавленной на веб-страницу через тег
, по умолчанию отображается серого цвета и с эффектом объема. Такой вид линии не всегда подходит к дизайну сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно подходят к этому вопросу, из-за чего придется использовать сразу несколько стилевых атрибутов. В частности, браузер Internet Explorer для цвета линии применяет свойство color , а браузеры Firefox и Opera — background-color . Но это еще не все, при этом обязательно следует указать толщину линии (свойство height ) отличной от нуля и убрать рамку вокруг линии, задавая значение none у свойства border . Собирая все параметры воедино для селектора HR , получим универсальное решение для популярных браузеров.
Пример 1. Цвет горизонтальной линии
HTML5 CSS 2.1 IE Cr Op Sa Fx
Цвет горизонтальной линии
В данном примере цвет линии задан как красный, а толщина линии равна двум пикселам (рис. 1).
Рис. 1. Цветная горизонтальная линия в браузере Safari
Как изменить цвет линии в html
Опять берем наш подопытный тег 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.
Как изменить цвет элемента
с помощью CSS
Вы можете просто использовать CSS-свойство background-color в сочетании с height и border , чтобы изменить цвет по умолчанию для элемента .
В следующем примере мы изменили цвет тега hr на светло-серый. Вы также можете увеличить толщину линии, просто увеличив значение свойства height .
Change the Color of hr Tag using CSS hr Это просто параграф
Это еще один параграф
Читайте также
Похожие примеры:
- Как создать треугольник или каретку с помощью CSS
- Как применить границу к элементу при наведении курсора мыши, не влияя на макет в CSS
- Как удалить контур вокруг полей ввода текста в Chrome с помощью CSS
Как изменить цвет линии hr
По умолчанию, цвет линии, тега , при добавлении на web-страницу, отображается серым цветом, да еще и с эффектом объема.
Такой цвет и вид линии, нам не всегда подходит по дизу сайта, поэтому будем, менять его через стили.
Что бы подружить наш , со всеми браузерами, будем использовать несколько стилевых атрибутов. Мы ж, не дурнее их, правда?!
К примеру, браузер Internet Explorer для цвета линии применяет свойство color, а вот Opera и Firefox — background-color. Но это пол-беды, нужно обязательно указать толщину линии (параметр height) больше нуля и убрать рамочку вокруг линии, задавав значение none у атрибута border.
Собирем все параметры вместе, для селектора hr и получим универсальное решение для популярных браузеров.
Читайте также Как вставить значек ICQ на сайт
Например, так:
Вот, что получилось, в видимом варианте(цвет линии задан как красный, а толщина линии равна двум пикселам): kak-izmenit-cvet-linii-hr
Север
Позвольте представиться, я Александр Северский, изредка фрилансер (предпочитаю постоянных клиентов).