Das hr-Tag
Das Tag hr erzeugt eine horizontale
Trennlinie. Der Vorteil des Tags ist, dass für eine
einfache Linie keine zusätzlichen Blöcke erstellt werden
müssen. Benötigt keinen schließenden
Tag.
Beispiel
Sehen wir uns an, wie das Tag hr funktioniert:
<hr>
:
Beispiel
Lassen Sie uns versuchen, die Farbe der Linie mit der
CSS-Eigenschaft border-color zu ändern:
<hr style="border-color: red;">
:
Beispiel
Die Linienfarbe kann auch mit der Eigenschaft
color
geändert werden
(wenn jedoch sowohl die Eigenschaft
color als auch border-color
gesetzt sind, hat letztere Priorität):
<hr style="color: red">
:
Beispiel
Lassen Sie uns nun die Linienfarbe mit der
CSS-Eigenschaft border ändern.
Beachten Sie, dass die Linie dabei
doppelt so dick wird (da wir oben und unten
einen Rand gesetzt haben):
<hr style="border: 1px solid red;">
:
Beispiel
Versuchen wir, die Linienfarbe mit der CSS-
Eigenschaft border-top zu ändern
und setzen nur den oberen Rand. Jetzt wird es
keine doppelte Linie geben:
<hr style="border-top: 1px solid red;">
:
Beispiel
Lassen Sie uns die Linie mit der
CSS-Eigenschaft border-top
gepunktet darstellen, setzen wir den Wert dotted anstelle von solid:
<hr style="border-top: 1px dotted red;">
:
Beispiel
Lassen Sie uns die Dicke der Linie mit der
CSS-Eigenschaft border-width erhöhen:
<hr style="border-width: 10px; border-color: red;">
:
Beispiel
Fügen wir der Linie nun eine Höhe height
und einen Rand über border hinzu.
Der Rand wird dabei in einen oberen und unteren Teil aufgeteilt:
<hr style="height: 10px; border: 1px solid red;">
:
Siehe auch
-
das Tag
br,
das einen Zeilenumbruch erzeugt
