Горизонтальные линии
Опубликовано: 2021-09-01Есть много способов сделать ваши HTML-страницы более привлекательными и хорошо структурированными. В частности, горизонтальная линия может сыграть особую роль в том, чтобы сделать содержимое вашего сайта сбалансированным, четким и удобным для просмотра. Всякий раз, когда мы решаем внести какие-то большие изменения на наши веб-сайты, такие мелочи, как линии, могут иметь значение. Такие мелочи делают посыл вашего сайта более полным. Кроме того, они могут изменить визуальную привлекательность вашего веб-ресурса и то, как ваша аудитория воспринимает ваши данные.
Но вы также можете создавать настраиваемые линии, чтобы они соответствовали вашей веб-странице и позволяли вам лучше управлять пространством, которым вы управляете на своей странице. С учетом сказанного давайте подробнее рассмотрим, как настроить горизонтальные линии на ваших HTML-страницах.Горизонтальная линия — это элемент HTML, который используется в качестве украшения вашей веб-страницы. Тем не менее, он также может пригодиться для множества других целей, таких как:
- Разделитель, который визуально разделяет разные части вашего контента и ставит акцент там, где заканчивается одна идея и начинается другая.
- Подсветка, которая выделяет некоторые значимые разделы веб-страницы.
- Горизонтальная линия считается одним из самых популярных и простых способов достижения самых разных целей на веб-сайте. Хотя на первый взгляд это может показаться простым, это многофункциональный элемент, который вы можете настроить в соответствии со своими конкретными требованиями. С помощью простых модификаций HTML-кода вашей веб-страницы вы можете настроить следующие характеристики горизонтальной линии:
Длина;
Ширина;
Цвет;
Выравнивание.
Также стоит отметить, что горизонтальная линия относится к блочным элементам. Это означает, что он размещается на отдельной строке веб-страницы, а текст, который вы добавляете рядом со строкой, будет размещен под ней.
Горизонтальные линии очень полезны для разделения вашей страницы на разные разделы, чтобы добавить простую горизонтальную линию, просто введите <hr>, и вы получите следующее:
Как создать горизонтальную линию
Вы можете установить линию, используя простой тег <hr>. Это сокращение от «Горизонтальное правило» и устанавливает классические внешние параметры. Отличие его от многих других в том, что он не нуждается в концевом теге и может существовать сам по себе. Вы можете изменить внешние характеристики элемента, используя дополнительные значения в теге:
Похоже на это. Например, если нам нужна длина 100 пикселей, мы должны установить такой тег: hr width = "100.
Выравнивание.
Выровнять линию можно по левому или правому краю, а также по центру. Эта функция действительна только в том случае, если вы уже указали параметр ширины, поскольку строка на всю страницу не может быть выровнена. Для выравнивания установите в теге «align» дополнительный атрибут и добавьте к нему направление: center — для центра, left — для левого и right — для правого выравнивания. Готовый тег в этом случае будет выглядеть так: если нам нужно установить выравнивание по центру для горизонтальной линии длиной 150 пикселей, то готовый тег будет выглядеть так: hr align="center"width=" 150". Обратите внимание, что «выравнивание», мера выравнивания, помещается в позицию 1, хотя атрибут зависит от ширины меры длины.Ширина.
При желании вы также можете указать ширину, создав полужирное или тонкое подчеркивание. Этот критерий ни от чего не зависит и может использоваться самостоятельно без указания длины или выравнивания. Для этого используем атрибут size в теге и числовое значение, равное желаемой ширине в пикселях. Число указывается в кавычках после атрибута размера и символа "=".
Таким образом, если нам нужно создать линию шириной 15 пикселей, нам нужно создать следующий тег: hr size="15".
Цвет.
Он также устанавливается как независимый индикатор. Для его изменения используйте атрибут цвета в сочетании с названием цвета в виде кода или на английском языке. Цвет указывается в кавычках после символа "=".
Таким образом, тег для стандартной белой линии можно записать двумя способами: hr color="#FFFFFF" или hr color="white"
Черный цвет можно создать с помощью кода #000000.
Как сделать цветную горизонтальную линию?
Горизонтальные линии хороши для отделения одного блока текста от другого. Мелкий текст с горизонтальными линиями вверху и внизу привлекает к читателю больше внимания, чем обычный текст.
С помощью тега <hr> можно нарисовать горизонтальную линию, внешний вид которой зависит от используемых атрибутов, а также от браузера. Тег относится к блочным элементам, поэтому строка всегда начинается с новой строки, а после этого все элементы отображаются на следующей строке. Благодаря множеству атрибутов тега < hr > строкой, созданной с помощью этого тега, легко манипулировать. В сочетании с мощью стилей добавление строки в документ становится проще простого.
По умолчанию линия отображается серым цветом и с эффектом объема. Этот тип линии не всегда подходит под дизайн сайта, поэтому понятно желание разработчиков изменить цвет и другие параметры линии через стили. Однако браузеры неоднозначно относятся к этому вопросу, из-за чего вам придется использовать сразу несколько свойств стиля. В частности, более старые версии Internet Explorer используют свойство color для цвета линии, тогда как другие браузеры используют цвет фона. Но это еще не все, в этом случае обязательно укажите толщину линии (свойство высоты), отличное от нуля, и удалите границу вокруг линии, установив для свойства границы значение none. Сложив вместе все свойства селектора hr, мы получим универсальное решение для популярных браузеров.
< ! DOCTYPE html > < html > < head > < meta charset = "utf-8" > < title> Цвет горизонтальной линии </ title > < style > hr { border: none; /* Убираем границу */ background-color: red; /* Цвет линии */ цвет: красный; / * Цвет линии для IE6-7 * / height: 2px; / * Толщина строки * / } < /style > < /head > < body > < hr > < p > Текстовая строка </p > < hr > < /body > </html >Примеры:
Этот:
<ч цвет="#c7c34c" размер="2" ширина="50%" >дает это:
Цвет: цвет линии:
<ч цвет="#c7c34c" размер="2" ширина="50%" >Размер: высота строки, выраженная в пикселях:
< размер часа = "x" >Ширина: ширина линии, выраженная либо в процентах (%), либо в пикселях (в моем примере это 50% исходного размера):
< ширина часа = "x%"> или < ширина часа = "x" >Более продвинутый:
Этот:
< час ширина = "400" цвет = "# 000000" размер = "4" >дает:
В этом случае мы использовали стиль:
Ширина границы 3 пикселя (3 пикселя)
Это пунктир
Базовый цвет черный : #000000
Точки синего цвета: #0099CC
Последний пример, чтобы объяснить больше, если это все еще необходимо;):
Этот
< час ширина = "400" цвет = "#FFFFFF" размер = "6" >дает:
В этом случае чуть выше:
Ширина границы 2 пикселя (2 пикселя)
это пунктир
Основной цвет белый: #FFFFFF
Серебристые штрихи: #C0C0C0
Возможные стили:
-пунктирный
-пунктирная
-твердый
-двойной
-канавка
-начало
-вставка
-гребень
Это все, что я могу сказать о горизонтальных линиях!