Цвет горизонтальной линии

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

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

---

.

Решение

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

---

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

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

Источник

Как сделать цветную горизонтальную линию?

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

С помощью тега

---

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

---

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

По умолчанию линия

---

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

Пример 1. Горизонтальная линия

HTML5 CSS 2.1 IE Cr Op Sa Fx

        
Текстовоя строка
 

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

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

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

• Как добавить картинку на веб-страницу?
• Как добавить иконку сайта в адресную строку браузера?
• Как добавить фоновый рисунок на веб-страницу?
• Как сделать обтекание картинки текстом?
• Как растянуть фон на всю ширину окна?
• Как выровнять фотографию по центру веб-страницы?
• Как разместить элементы списка горизонтально?
• Как убрать подчеркивание у ссылок?
• Как убрать маркеры в маркированном списке?
• Как изменить расстояние между строками текста?
• Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
• Как открыть ссылку в новом окне?

Источник

HTML линия горизонтальная и вертикальная

Данный урок научит вас создавать горизонтальные и вертикальные линии.

• Горизонтальная HTML линия определяется непарным тегом
  

  ---

  .

• HTML линия может быть не только горизонтальной, но и вертикальной.
• Вертикальная линия в HTML может являться стороной блока или ячейки таблицы.
• Линия в HTML бывает любого размера и цвета, имеет или не имеет объемность.

HTML горизонтальная линия и пример ее построения:

• align=»» – выравнивает линию справа или слева.
• width=»50%» – ширина в пикселях или процентах.
• size=»» – задает толщину горизонтальной линии.
• color=»#00ff00″ – устанавливает цвет линии.

HTML линия может быть разной:

Вертикальная HTML линия и способы ее построения

Вертикальная линия в HTML отображается как сторона блока или таблицы.

Пример построения вертикальной линии:

Пример вертикальной линии красного цвета слева.

В данном случае вертикальная HTML линия является стороной отформатированного блока.

Обычный блок с помощью стилевых описаний видоизменен до неузнаваемости. Хотите научиться так манипулировать элементами страницы – учите CSS, а что касается конкретно этого кода, то следует обратить внимание на стилевой атрибут border-left и его значения.

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML блоки и параграфы HTML линии Фон HTML страницы

© 2009 — 2023 | При использовании материала, ссылайтесь на мой сайт!
По всем вопросам обращайтесь: go@ab-w.net | HTML, линия? – Не вопрос!

Источник

HTML тег

HTML тег

---

(horizontal rule) определяет горизонтальную линию, которая вставляет разрыв строки до и после себя и занимает всю доступную ширину. Горизонтальная линия будет полезна для разделения тематического вступления и основного текста, например смена сцен в рассказе или переход к дополнительной информации в рамках раздела справочника.

Примечание: горизонтальная линия используется для визуального и логического разделения контента, но в ней отпадает необходимость, если сразу после нее идет заголовок или тег, начинающий новый раздел, или логический блок ( , ), так как эти элементы по умолчанию подразумевают тематические изменения.

По умолчанию, цвет горизонтальной линии серый, а толщина составляет 1px. Для изменения цвета, толщины и стиля линии можно воспользоваться CSS свойством border, позволяющим изменить сразу все три параметра. Или использовать свойства: border-color, border-width и border-style для изменения только одного из параметров:

Разделительная линия:

---

Изменяем цвет линии:

---

Изменяем толщину линии:

---

Пунктирная линия html:

Атрибуты

HTML тег

---

поддерживает Глобальные атрибуты и События

Стиль по умолчанию

Пример

HTML
 
HTML это язык разметки гипертекста.
 
CSS
 
CSS определяет то, как будут отображаться элементы.
 

Результат данного примера в окне браузера:

СSS стили для горизонтальных линий

Сборник горизонтальных линий с тегом

---

разных видов и стилей.

Сплошные линии

Двойная линия

Многострочная линия

Двухцветная линия

Трехцветная линия

Горизонтальный градиент

Вертикальный градиент

Линия с тенью

Замыленная линия

Линия «Полка»

Пунктирные линии

Пунктирная линия с фоном

Пунктирная линия с градиентом

Точечные линии

Линия из крупных точек

 
') 0 0 100% repeat; background-position: 50%; box-sizing: border-box; color: orange; > 

Разное

Вертикальные линии

Линии под углом

Наклонные линии

Комментарии 2

Авторизуйтесь, чтобы добавить комментарий.

Другие публикации

Подчеркивание текста можно сделать с помощью нескольких свойств CSS — background-image, background-size и.

Градиент в цвет шрифта можно добавить с помощью CSS свойства background-clip: text, которое окрашивает текст в цвет или изображение указанного в background-image.

Для модальных окон есть множество плагинов такие, как fancybox, Twitter Bootstrap и т.д. Но бывают случаи когда нет.

Источник