Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Использование тега hr стилизация

Поддержи проект!!! smile

Что такое тег hr, определение тега hr, синтаксис, примеры использования. Позиция тега hr стилизация

О теге hr

  1. Что такое тег hr
  2. Свойства тега hr по умолчанию
  3. Ставим тег hr по центру
    1. Тег hr по центру - align="center"
    2. Тег hr по центру - inline
    3. Тег hr по центру - inline-block
    4. Тег hr по центру - margin: 0 auto
  4. Позиционируем тег hr справа
  5. Стилизация тега тег hr 1
  6. Стилизация тега hr добавим красок
  7. Стилизация тега hr добавим тени
  8. Стилизация тега hr добавим движение
  1. Что такое тег hr

    Начнем с определения : "Что такое тег hr" :
    Тег hr - это одинарный тег, единственная функция которого предназначена нарисовать горизонтальную линию.

    Тег hr - одинарный тег

    Это означает, что данный тег не требует закрывающего тега.

    Синтаксис "тега hr"

    <hr>

    Результат:


    Атрибуты тега hr

    align

    Определяет выравнивание линии.

    color

    Цвет линии.

    noshade

    Рисует линию без трехмерных эффектов.

    size

    Толщина линии.

    width

    Ширина линии.

  2. Свойства тега hr по умолчанию

    Как вы знаете, что у каждого тега есть свои свойства по умолчанию.

    И когда мы пишем свои стили, то значение свойств тега меняются.

    Css свойства по умолчанию для тега hr:

    если мы посмотрим на свойства тега hr по умолчанию, то увидим вот такие свойства.
    Данные свойства никуда не нужно вставлять - они идут по умолчанию к тегу hr

    hr {

    display: block;

    unicode-bidi: isolate;

    margin-block-start: 0.5em;

    margin-block-end: 0.5em;

    margin-inline-start: auto;

    margin-inline-end: auto;

    overflow: hidden;

    border-style: inset;

    border-width: 1px;

    }

    1. Ставим тег hr по центру

      Несколько примеров позиционирования тега "hr посередине".
      Напоминаю, что атрибут align="center" - считается устаревшим и примять его е рекомендуется.

      Второй - "display: inline"

      и третий пункт - "inline-block" - использование значения "inline", не важно какого, результат будет всегда одинаковый.
      Позиционироваться будет посередине.
      Естественно, что браузер должен поддерживать "inline"

      И последним поставим тег hr посередине с помощью "margin: 0 auto".



    2. Центрируем тег hr посередине с помощью align="center"

      Работа атрибута align="center" для тега hr

      html:
      <hr align="center" width="200" color="red">

      Как видим, тег "hr" не хочет позиционироваться таким способом.


      Почему данное позиционирование не срабатывает на данной страницу!?

      Для того, чтобы найти проблему, первым делом -создаем простую страницу html, туда загружаем наш код и смотрим:
      Почему данное позиционирование не срабатывает на данной страницу!?

      Все работает так, как нужно! Значит, какие-то стили не позволяют срабатывать "align="center""

      Естественно, что я знаю в чем причина, если мы откроем наш файл css, то увидим, что препятствует этому, но это совсем другая история!

      Как можно реанимировать данный атрибут на сайте!?

      align="center" можно заменить позиционированием блока.

      Если вы собираетесь использовать данный код у себя на сайте, то класс(выделено зеленым) не нужно применять - здесь примерно потому, чтобы обратиться не вообще к тегу hr , а к определенному тегу hr , чтобы продемонстрировать, как это будет работать!

      css:
      hr[align="center"].align_center {

      margin: 0 auto;

      }

      Html:
      <hr align="center" width="200" color="red" class="align_center">

      Результат позиционирования по центру тега "hr" + margin: 0 auto;




    3. Позиционируем тег hr по центру с помощью inline + text-align: center;

      Один из вариантов позиционировать посередине/по центру, это обернуть его в блок div и добавить ему display со значением "inline"(всего из несколько разновидностей).

      А уже самому тегу добавляем позиционирование посередине - "text-align: center;"

      Css:

      #hr_center hr {

      display: inline;

      }

      div#hr_center {

      text-align: center;

      }

      html:

      <div id="hr_center1"><hr width="200" color="red"></div>
      Результат :



    4. Позиционируем тег hr по центру с помощью inline-block + text-align: center;

      В доказательство выше приведенных слов, изменим лишь значение "inline" на значение "inline-block" :

      Css:

      #hr_center1 hr {

      display: inline-block;

      }

      div#hr_center1{

      text-align: center;

      }

      html:

      <div id="hr_center1"><hr width="200" color="red"></div>

      Результат позиционирования тега "hr" + text-align: center;

      Как видим результат аналогичный! "тег hr" благополучно разместился посередине.



    5. Ставим тег hr посередине с помощью margin

      Для данного способа позиционирования тега "hr", вокруг тега ничего ставить не будет в отличии от верхних примеров.
      Селектор id помести прямо вовнутрь тега "hr" html:
      <hr width="200" color="red" id="hr_center2">

      Нам понадобится новое название селектора id? чтобы отделить от предыдущих примеров.

      Ставим посередине свойством "margin: 0 auto;"

      Css:

      hr#hr_center2 {

      margin: 0 auto;

      }

      Результат позиционирования тега "hr" с помощью margin


  3. позиционируем тег hr справа

    Не будем расписывать подробно позиционирование справа, мы уже делали такое с блочным элементом div поэтому, смысла не вижу особого ... повторять уже ранее написанное.
    Но в качестве примера, все же вот позиционируем тег hr справа:
    Html :

    <div style="height:30px"><hr align="right" width="200" color="red" id="hr_center3"> </div>

    css:

    hr#hr_center3 {

    float: right;

    margin: 10px 0;

    }

    Результат :

  4. Стилизация тега тег hr

    Когда вы применяете так по умолчанию, то выглядит он не совсем так, как бы хотелось! Поэтому!


    Самое время стилизовать тег тег hr!:
    Я давно уже стилизовал тег тег hr, поскольку довольно часто использую его на сайте:
    Css:

    hr {

    background-image: -webkit-linear-gradient(left, transparent, rgba(0, 0, 0, 0.2), transparent);

    background-image: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.2), transparent);

    border: 0;

    height: 1px;

    margin: 22px 0 22px 0;

    }

    Html:

    <hr>

    Результат:


  5. Стилизация тега hr добавим красок

    Чтобы тег hr выглядел чуть интереснее - можно ж добавить ему красок :
    CSS:

    hr {

    border: 0;

    height: 4px;

    margin: 30px 0;

    background-image: linear-gradient(to right, #BFE2FF 50%, #337AB7 50%, #337AB7 60%, #ff9100 60%, #ff9100 70%, #05b5e6 70%, #05b5e6 80%, #b448b8 80%, #b448b8 90%, #BFE2FF 90%, #BFE2FF 100%);

    }

    Html:
    <hr>
    Результат:

  6. Стилизация тега hr добавим тени

    Как вариант можно добавить немного теней для тега hr :
    Css:

    hr {

    height: 20px;

    margin: 30px auto;

    width: 70%;

    background-image: radial-gradient(farthest-side at 50% -50%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));

    position: relative;

    border: none;

    }

    hr:before {

    height: 1px;

    position: absolute;

    top: -1px;

    left: 0;

    right: 0;

    background-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0));

    }

    Html:
    <hr>
    Результат:

  7. Стилизация тега hr добавим движение

    Как вариант стилизации тега hr можно добавить движенье прямо в теге hr Css:

    hr {

    margin: 30px 0;

    border: 2px solid #BFE2FF;

    position: relative;

    overflow: visible;

    }

    hr:after {

    content: "";

    border: 2px solid #337AB7;

    position: absolute;

    width: 20%;

    top: -2px;

    animation: anim-hr 5s linear infinite;

    }

    @keyframes anim-hr {

    0% {

    left: -20%;

    }

    100% {

    left: 100%;

    }

    }

    Html:
    <hr>
    Результат:

    Чтобы не получалось такого эффекта, будто линия уходит за грань родительского блока, в него добавим:

    style="overflow-x: hidden; padding: 0 0 0 0"

    Смотрим, что получится:



Вас может еще заинтересовать список тем : #HTML | #HTML_TAGS | #TAG_HR |
Последняя дата редактирования : 13.12.2020 14:57
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
тег hr тег hr в html атрибуты тега hr тег hr css перечислите атрибуты тега hr тег hr в html как задать ширину атрибуты тега hr в html как сделать объемную hr линию стилизация hr hr html стилизация

Последние комментарии :
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.
Марат :
03/12/2020 08:47
Давно пользуюсь данным скриптом, который написал еще при царе горохе!За десять лет изменилось то, что и при…
подробнее.
Ольга Попова :
02/12/2020 11:42
Я уж было обрадовалась, а у меня не…
подробнее.