A hr tag

A hr tag vízszintes elválasztó vonalat határoz meg. A tag előnye, hogy egyetlen vonal létrehozásához nem szükséges extra blokkokat létrehozni. Nem igényel záró taget.

Példa

Nézzük meg, hogyan működik a hr tag:

html<hr>

Результат:

Példa

Próbáljuk meg megváltoztatni a vonal színét a CSS border-color tulajdonságával:

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

Результат:

Példa

A vonal színe megváltoztatható a color tulajdonsággal is (ebben az esetben, ha egyszerre van megadva a color és a border-color tulajdonság - a másodiknak van prioritása):

html<hr style="color: red">

Результат:

Példa

Most változtassuk meg a vonal színét a CSS border tulajdonságával. Figyeljük meg, hogy ekkor a vonal dupla vastagságúvá válik (mivel felső és alsó szegélyt is határoztunk meg):

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

Результат:

Példa

Próbáljuk meg megváltoztatni a vonal színét a CSS border-top tulajdonságával, és csak a felső szegélyt határozzuk meg. Most már nem lesz dupla vonal:

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

Результат:

Példa

Készítsük el a vonalat pontok formájában a CSS border-top tulajdonságával, adjuk meg a dotted értéket a solid helyett:

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

Результат:

Példa

Növeljük meg a vonal vastagságát a CSS border-width tulajdonságával:

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

Результат:

Példa

Most adjunk a vonalhoz magasságot height és szegélyt a border segítségével. Ebben az esetben a szegély felső és alsó részre bomlik:

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

Результат:

Lásd még