Горизонтальная линия в html: как сделать и настроить

Горизонтальная линия в html — простейший элемент, который создается с помощью одного одинарного тега. И все же я решил написать о нем отдельную заметку.

Но я думаю, что она будет очень короткой, потому что писать особо не о чем. В html горизонтальная линия создается с помощью одинарного тега hr. Вот так она выглядит по умолчанию:


Основная цель этой горизонтальной линии, как я понимаю, это разделение разных частей текста. Например, разные части статьи можно разделить с ее помощью. В принципе, у этой линии есть какие-то атрибуты, но для более правильной настройки я вам рекомендую изменять ее параметры через css. Это очень легко — используем для этого селектор hr.

Горизонтальной линии в css можно задать все то же, что и обычным элементам. Например, высоту (по умолчанию 1 пиксель, через css можно прописать любую, хоть 900 пикселей) и цвет линии. Можно указать сплошной, а можно и градиент.

Также я подозреваю, что вы можете легко задать картинку какой-нибудь декоративной линии как background-image, и таким образом использовать ее в качестве разделителя. В общем, все возможности по оформлению горизонтальных линий лежат в css, хотя их на самом деле очень немного.

Вообще, hr — это простейший html-элемент. Простая линия. Ну что тут еще сказать? smile

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Комментариев: 1
  1. Владимир

    Привет. Название кнопки «читать все» поменять надо на «читать всё» или «далее»

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: