Znacznik hr

Znacznik hr tworzy poziomą linię podziału. Zaletą znacznika jest to, że aby narysować pojedynczą linię, nie trzeba tworzyć dodatkowych bloków. Nie wymaga tagu zamykającego.

Przykład

Zobaczmy, jak działa znacznik hr:

html<hr>

Результат:

Przykład

Spróbujmy zmienić kolor linii za pomocą właściwości CSS border-color:

html<hr style="border-color: red;">

Результат:

Przykład

Kolor linii można również zmienić właściwością color (przy czym, jeśli jednocześnie ustawione są właściwości color i border-color - drugie ma priorytet):

html<hr style="color: red">

Результат:

Przykład

Zmieńmy teraz kolor linii za pomocą właściwości CSS border. Zwróć uwagę, że w tym przypadku linia stanie się podwójnej grubości (ponieważ ustawiliśmy obramowanie zarówno u góry, jak i u dołu):

html<hr style="border: 1px solid red;">

Результат:

Przykład

Spróbujmy zmienić kolor linii za pomocą CSS właściwości border-top, i ustawmy tylko górne obramowanie. Teraz nie będzie podwójnej linii:

html<hr style="border-top: 1px solid red;">

Результат:

Przykład

Zróbmy linię w postaci kropek za pomocą właściwości CSS border-top, ustawmy wartość dotted zamiast solid:

html<hr style="border-top: 1px dotted red;">

Результат:

Przykład

Zwiększmy grubość linii za pomocą właściwości CSS border-width:

html<hr style="border-width: 10px; border-color: red;">

Результат:

Przykład

A teraz dodajmy linii wysokość height i obramowanie za pomocą border. Obramowanie rozdzieli się przy tym na górne i dolne:

html<hr style="height: 10px; border: 1px solid red;">

Результат:

Zobacz też