Как поменять цвет hr в css
Перейти к содержимому

Как поменять цвет hr в css

  • автор:

Как поменять цвет hr в css

Время чтения: меньше 5 мин

Открыть/закрыть навигацию по статье
Контрибьюторы:

Обновлено 8 сентября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Та самая горизонтальная черта, которая разделяет смысловые блоки на странице.

Пример

Скопировать ссылку «Пример» Скопировано

Разделим два абзаца горизонтальной чертой и немного стилизуем её.

 

Слово «динозавр» означает.

Среди палеонтологов.

p>Слово «динозавр» означает. p> hr> p>Среди палеонтологов. p>
 hr  width: 50px; margin: 30px auto; border: 1px solid black;> hr  width: 50px; margin: 30px auto; border: 1px solid black; >      

Как понять

Скопировать ссылку «Как понять» Скопировано

Тег


помогает отделить независимые друг от друга блоки — например, подразделы в статье. Это блочный элемент, поэтому он встаёт в отдельном ряду, визуально разделяя информацию на странице.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Одиночный тег, который не нужно закрывать — просто ставим


в том месте, где нужен разделитель.

На практике

Скопировать ссылку «На практике» Скопировано

Лена Райан советует

Скопировать ссылку «Лена Райан советует» Скопировано

�� Конечно же, перед заголовком не стоит ставить


— заголовок сам по себе является тематическим и визуальным разделителем.

�� Внешний вид тега


по умолчанию обусловлен именно наличием рамки, поэтому для изменения, например, цвета линии достаточно изменить border — color .

Светлана Коробцева советует

Скопировать ссылку «Светлана Коробцева советует» Скопировано

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


. Пользуйтесь этим тегом в том случае, когда без разделителя информация теряет смысл или в ней становится трудно разобраться.

В демо ниже все линии декоративные и потому свёрстаны как псевдоэлемент : : after , а разделяющий визуально одинаковые, но разные по смыслу абзацы


представлен в виде звёздочек.

 Типографика

Астеризм

Астеризм это типографский символ.

Одиночная звёздочка.

span class="tag">Типографикаspan> h1 class="title">Астеризмh1> p class="paragraph">Астеризм это типографский символ. p> hr> p class="paragraph">Одиночная звёздочка. p>
 .tag, .title  position: relative;> .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black;> .tag::after  height: 1px;> .title::after  height: 2px;> hr  border: none; text-align: center;> hr::before  content: "***";> .tag, .title  position: relative; > .tag::after, .title::after  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; background-color: black; > .tag::after  height: 1px; > .title::after  height: 2px; > hr  border: none; text-align: center; > hr::before  content: "***"; >      

html атрибут color

Атрибут color задає колір лінії, створеної за допомогою тега


. Одночасно, використання цього атрибута забороняє тривимірні ефекти, немов би був доданий атрибут noshade .

f9ee3d9363420dc09fb421ee2fa1167c.png

Для завдання кольору лінії застосовується два способи: перший використовує позначення кольорів в шістнадцятковому коді, а другий — за назвою деяких кольорів. Переважно використовується метод, заснований на шістнадцятковій системі числення, як найбільш універсальний.

Тег hr

Тег hr (horizontal rule) создает горизонтальный разделитель между блоками текста.

Текст


Следующий текст

Пошаговый план! Как быстро научиться создавать сайты!
iOS Safari

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

Стили которые браузер применяет к элементу по-умолчанию. В списке ниже приведены стили, которые влияют на внешний вид элемента и изменяются при помощи CSS.

Читайте также

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

    ненумерованный списокИспользование SVG элементов
Обсуждение ( 0 )

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

Как изменить цвет элемента


с помощью CSS

Вы можете просто использовать CSS-свойство background-color в сочетании с height и border , чтобы изменить цвет по умолчанию для элемента .

В следующем примере мы изменили цвет тега hr на светло-серый. Вы также можете увеличить толщину линии, просто увеличив значение свойства height .

    Change the Color of hr Tag using CSS hr 

Это просто параграф


Это еще один параграф

flexbe banner 480x320 skillbox banner 480x320 beget banner 480x320

Читайте также

Похожие примеры:
  • Как создать треугольник или каретку с помощью CSS
  • Как применить границу к элементу при наведении курсора мыши, не влияя на макет в CSS
  • Как удалить контур вокруг полей ввода текста в Chrome с помощью CSS

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *