Značka hr

Značka hr nastavuje oddeľovaciu horizontálnu čiaru. Výhodou značky je, že na vytvorenie jedej čiary nie je potrebné vytvárať ďalšie bloky. Nevyžaduje uzatváraciu značku.

Príklad

Pozrime sa, ako funguje značka hr:

html<hr>

Результат:

Príklad

Skúsme zmeniť farbu čiary pomocou CSS vlastnosti border-color:

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

Результат:

Príklad

Farbu čiary je možné zmeniť aj vlastnosťou color (pričom, ak sú súčasne nastavené vlastnosti color a border-color - druhá má prioritu):

html<hr style="color: red">

Результат:

Príklad

Teraz zmeňme farbu čiary pomocou CSS vlastnosti border. Všimnite si, že čiera sa tým stane dvojnásobne hrubšou (pretože sme nastavili ohraničenie hore aj dole):

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

Результат:

Príklad

Skúsme zmeniť farbu čiary pomocou CSS vlastnosti border-top, a nastavme len horné ohraničenie. Teraz nebude dvojitej čiary:

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

Результат:

Príklad

Vytvorme čiaru vo forme bodiek pomocou CSS vlastnosti border-top, nastavme hodnotu dotted namiesto solid:

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

Результат:

Príklad

Zväčšime hrúbku čiary pomocou CSS vlastnosti border-width:

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

Результат:

Príklad

A teraz pridajme čiary výšku height a ohraničenie pomocou border. Ohraničenie sa tým rozdelí na horné a dolné:

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

Результат:

Pozrite tiež