Как сделать линию в html

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

Internet Explorer Chrome Opera Safari Firefox Android iOS
6.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

Сделать горизонтальную линию на странице.

Решение

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

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

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

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

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Горизонтальные и вертикальные линии с помощью html и css

Всем привет! Сегодня я расскажу Вам о том, как с помощью html сделать горизонтальную линию.

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

Горизонтальная и вертикальная линии с помощью css

Сделать это можно с помощью css. Для этого, я заключаем необходимый участок текста в блок с помощью тега div, а затем в файле style.css или непосредственно в html — коде прописываем для этого блока свойства для верней или нижней границы с помощью border-top и border-bottom. Вот пример:

В данном случае, я задал оформление с помощью css непосредственно из кода html, и сделал верхнюю границу сплошной, а нижнюю пунктирной линией.

Вот как это будет выглядеть на странице:

Горизонтальная линия с помощью css.

У этого способа есть свои преимущества:

  • Большой ассортимент настроек, которые позволяют задать практически любой вид для линии;
  • Можно создавать как горизонтальные так и вертикальные линии. Для того, чтобы сделать вертикальные линии необходимо поменять border-top на border-left, а border-bottom на border-right.

К недостаткам можно отнести относительную громоздкость кода.

Однако, как оказалось, вставить в текст горизонтальную черту можно и с помощью html. При этом, даже не обязательно лезть в css. Для этого используется тег .

Горизонтальная линия с помощью тега html

Первая особенность этого тега состоит в том, что у него нет парного закрывающего тега. Его можно использовать в любом месте html – кода между тегами и

Горизонтальная линия HTML

Горизонтальная линия HTML

Приветствую вас, дорогие друзья!

При верстке страницы, иногда, возникает необходимость выделения заголовка или какого-то блока на странице горизонтальной линией. Например, вот так:

Горизонтальная линия HTML

Навигация по статье:

  • Специальный HTML-тег для задания горизонтальной линии
  • Визуализация горизонтальной линия HTML с помощью атрибутов
  • Стилизация горизонтальной линии HTML с помощью CSS

Такую черту можно сделать несколькими способами. Сегодня мы рассмотрим вариант с добавлением горизонтальной линии HTML-тегом.

Специальный HTML-тег для задания горизонтальной линии

Итак, какой из тегов HTML рисует горизонтальную линию? Как это ни странно, в HTML для этой цели предусмотрен специальный тег . Внешний вид такой линии зависит от заданных параметров.

В примере для не задано никаких параметров визуализации и результат выглядит вот так:

Горизонтальная линия HTML

В данном случае для тега были применены параметры, прописанные в теме WordPress моего сайта. В вашем случае горизонтальная линия HTML может выглядеть по-другому.

Визуализация горизонтальной линия HTML с помощью атрибутов

Для тега можно использовать специальные атрибуты, которые позволят задать необходимые параметры внешнего вида. Вот перечень доступных для использования атрибутов:

  • align — выравнивание по горизонтали. Доступные значения: center, left, right. По умолчанию задано выравнивание по центру.
  • color – цвет. Задается шестнадцатеричным числом или названием цвета.
  • noshade — линия без трехмерных эффектов. Трехмерный эффект работает только в том случае если для линии не был задан цвет.
  • size – толщина. Задается любым целым положительным числом. 0 задает толщину равную 1 пикселю.
  • width – ширина. Можно задавать в пикселях или процентах.

Пример использования данных атрибутов:

Вот что получается:

Горизонтальная линия HTML

Стилизация горизонтальной линии HTML с помощью CSS

Так же для стилизации тега вы можете использовать CSS-стили. Задавать визуальное оформление с помощью стилей целесообразно в том случае если у вас достаточно часто на странице используется тег , так как это позволить существенно сократить размер кода страницы. Да и вообще, на мой взгляд, это удобнее.

Задать стили для тега вы можете двумя способами:

  1. 1. В теле HTML-страницы перед закрытием тега при помощи тега
  2. 2. Прописать стили оформления в файле style.css

Для стилизации горизонтальной линии HTML вы можете использовать следующие CSS-стили:

  • width – задание ширины в пикселях или процентах
  • height – высота в пикселях
  • background-color – цвет линий
  • border – при помощи данного стиля можно задать обводку для линии
  • border-radius – задает скругление углов
  • margin – отступ элемента по верхнему, правому, нижнему и левому краю. Для выравнивания по центу необходимо задать значение auto.
  • float – стиль задающий обтекание элемента. В данном случае можно использовать для выравнивания по левому или по правому краю.

Если вам нужно задать одинаковый стиль для всех тегов на вашем сайте, то необходимо использовать следующий селектор:

Ссылка на основную публикацию