Trennlinien mittels CSS gestalten

Scripting-Tipps - CSS


Trennlinien werden im Internet häufig eingesetzt. Sei es als zusätzliches Style-Element, oder um gewisse Bereiche auf einer Webseite voneinander abzutrennen. Diese Trennlinien müssen nicht immer standardmäßig grau sein. Mit Hilfe von CSS lassen sich die Trennlinien sehr einfach und vielfältig gestalten.

Welche Möglichkeiten es gibt, erfahren Sie im folgenden Abschnitt.


Beispiel:

<hr style="width:500px; color:blue; background-color:red; height:10px; margin-right:0; text-align:right; border:5px dotted darkgreen;">


Erläuterung:
Mit diesen CSS-Attributen würden Sie eine "Trennlinie" mit den folgenden Eigenschaften erzeugen:
Breite: 500 Pixel
Höhe: 10 Pixel
Ausrichtung: Rechtsbündig
Trennlinien-Farbe: Blau
Füllfarbe: Rot
Rahmenfarbe: Grün
Rahmenart: Gepunktet
Rahmendicke: 5 Pixel

Wie Sie sehen, haben Sie mit Hilfe von CSS völlig freie Hand, was das Gestalten Ihrer Trennlinie angeht. Maßgeblich für die Gestaltung der Trennlinie, sind die CSS-Eigenschaften zur Ausrichtung, zum Außenrand und Abstand zu anderen Elementen, zum Rahmen und zur Positionierung und Anzeige von Elementen. Schauen Sie doch in unser CSS-Tutorial für weitere Informationen.



Weitere Artikel: