Главная страница » CSS » 16. Горизонтальная черта

16. Горизонтальная черта

Горизонтальная черта (или горизонтальная линия) используется в веб-дизайне для разделения различных секций на веб-странице. Это простой способ визуально разделить контент и создать чёткую структуру. В CSS можно настроить горизонтальную черту, используя элемент <hr> и различные CSS-свойства.

Элемент `<hr>`

Элемент <hr> в HTML представляет собой горизонтальную черту. По умолчанию он отображается как горизонтальная линия, которая занимает всю ширину родительского элемента.

Пример:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        hr {
            width: 100%; /* Ширина линии */
            border: 0; /* Убираем стандартные границы */
            height: 1px; /* Толщина линии */
            background-color: #000; /* Цвет линии */
        }
    </style>
</head>
<body>
    <p>Текст перед линией</p>
    <hr>
    <p>Текст после линии</p>
</body>
</html>

CSS для настройки горизонтальной черты

Вы можете настроить внешний вид горизонтальной черты с помощью различных CSS-свойств:

border: Определяет стиль, цвет и толщину линии.

				
					hr {
    border: 0; /* Убираем стандартные границы */
    border-top: 2px solid #333; /* Верхняя граница — линия */
}

height: Задает толщину линии. Обычно используется вместе с border.

				
					hr {
    height: 2px; /* Толщина линии */
    background-color: #333; /* Цвет линии */
    border: none; /* Убираем стандартные границы */
}

width: Определяет ширину линии. Может быть задана в пикселях, процентах или других единицах.

				
					hr {
    width: 50%; /* Ширина линии — 50% от ширины родительского элемента */
}

margin и padding: Устанавливают отступы вокруг линии для управления её расположением.

				
					hr {
    margin: 20px 0; /* Отступы сверху и снизу */
    padding: 0; /* Нет внутреннего отступа */
}

background-color: Цвет фона линии.

				
					hr {
    background-color: #4CAF50; /* Цвет фона линии */
    height: 3px; /* Толщина линии */
    border: none; /* Убираем стандартные границы */
}

Примеры использования

Пример 1: Простая линия

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        hr.simple-line {
            border: 0;
            height: 1px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <p>Текст перед линией</p>
    <hr class="simple-line">
    <p>Текст после линии</p>
</body>
</html>

Пример 2: Двойная линия

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        hr.double-line {
            border: 0;
            height: 4px;
            background: linear-gradient(to right, #000 50%, transparent 50%) no-repeat;
            background-size: 2px 100%;
        }
    </style>
</head>
<body>
    <p>Текст перед двойной линией</p>
    <hr class="double-line">
    <p>Текст после двойной линии</p>
</body>
</html>

Пример 3: Прерывистая линия

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        hr.dashed-line {
            border: 0;
            border-top: 2px dashed #888;
            width: 80%; /* Ширина линии — 80% от родительского элемента */
        }
    </style>
</head>
<body>
    <p>Текст перед прерывистой линией</p>
    <hr class="dashed-line">
    <p>Текст после прерывистой линии</p>
</body>
</html>

Распространённые ошибки

Игнорирование кроссбраузерности: Некоторые старые браузеры могут не поддерживать все стили, применяемые к элементу <hr>. Проверьте ваш дизайн в разных браузерах.
Недостаточная контрастность: Убедитесь, что цвет линии достаточно контрастен по отношению к фону, чтобы обеспечить хорошую видимость.
Неоптимальное использование: Используйте горизонтальные линии для разделения контента, но не злоупотребляйте ими, чтобы не создать перегруженный дизайн.

Заключение

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

Тестовое задание

Создайте HTML-документ с несколькими параграфами текста.
Вставьте горизонтальные линии между этими параграфами и примените различные стили к линиям.
Попробуйте использовать разные значения для свойств border, height, width, background-color, и margin для создания различных эффектов.

HTML-документ:

				
					<!DOCTYPE html>
<html>
<head>
    <style>
        hr.custom-line {
            border: 0;
            height: 3px;
            background-color: #333;
            margin: 20px 0;
        }
        hr.dashed-line {
            border: 0;
            border-top: 2px dashed #555;
            width: 60%;
            margin: 20px auto;
        }
        hr.double-line {
            border: 0;
            height: 5px;
            background: linear-gradient(to right, #333 50%, transparent 50%) no-repeat;
            background-size: 3px 100%;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <p>Текст перед горизонтальной линией.</p>
    <hr class="custom-line">
    <p>Текст после первой линии.</p>
    <p>Текст перед прерывистой линией.</p>
    <hr class="dashed-line">
    <p>Текст после прерывистой линии.</p>
    <p>Текст перед двойной линией.</p>
    <hr class="double-line">
    <p>Текст после двойной линии.</p>
</body>
</html>

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