De hr-tag

De tag hr definieert een horizontale scheidingslijn. Het voordeel van de tag is dat er geen overbodige blokken nodig zijn om een enkele lijn te trekken. Vereist geen sluitende tag.

Voorbeeld

Laten we kijken hoe de tag hr werkt:

html<hr>

Результат:

Voorbeeld

Laten we proberen de kleur van de lijn te veranderen met behulp van de CSS-eigenschap border-color:

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

Результат:

Voorbeeld

De kleur van de lijn kan ook worden gewijzigd met de eigenschap color (als zowel de eigenschappen color als border-color zijn ingesteld, heeft de tweede voorrang):

html<hr style="color: red">

Результат:

Voorbeeld

Laten we nu de kleur van de lijn veranderen met behulp van de CSS-eigenschap border. Let op dat de lijn hierdoor dubbel zo dik wordt (omdat we een rand zowel boven als onder hebben ingesteld):

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

Результат:

Voorbeeld

Laten we proberen de kleur van de lijn te veranderen met behulp van de CSS eigenschap border-top, en alleen de bovenrand instellen. Nu zal er geen dubbele lijn zijn:

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

Результат:

Voorbeeld

Laten we van de lijn een stippellijn maken met behulp van de CSS-eigenschap border-top, en de waarde dotted instellen in plaats van solid:

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

Результат:

Voorbeeld

Laten we de dikte van de lijn vergroten met behulp van de CSS-eigenschap border-width:

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

Результат:

Voorbeeld

Laten we nu een hoogte height toevoegen aan de lijn en een rand via border. De rand splitst zich hierdoor in een bovenste en een onderste:

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

Результат:

Zie ook