CSS Rahmenstärke einstellen

Verschiedene Rahmenstärke auswählen

Eine der Möglichkeiten bei der Gestaltung der Rahmen mit CSS besteht darin, festzulegen, wie dick der Rahmen sein soll. Je dicker er eingestellt ist, umso massiver erscheint er auch, weshalb man es nicht übertreiben sollte - es sei denn, es gehört zum bewussten Marketing der Webseite.

Man kann also nicht nur bestimmen, dass es einen Rahmen gibt und wo, sondern auch die Rahmenstärke präzise vorgeben, sodass ein sehr dezenter Rahmen als Designelement gewählt werden kann oder ein markanter Rahmen, den man nicht übersehen kann - was dann wohl auch die Absicht ist.

Rahmenstärke mit CSS definieren

In CSS stehen zwei Optionen für die Rahmendicke zur Verfügung. Die eine Option sind generelle Angaben, die von thin (dünn) über medium (mitteldick) bis thick (sehr dick). Die zweite Option sind Angaben mit Pixelwerte oder Prozentangaben.

ergibt:

Durchgehender Rahmen

Rahmen nur unten

Rahmen oben

Die Falle bei der Definition von Rahmen mit CSS ist die Kenntnis der Befehle. Es ist wohl richtig, dass man mit border-top-width die Dicke des Rahmens definieren kann, aber man wird ihn erst sehen können, wenn man die Angabe zum Style vorgenommen hat, also zum Aussehen des Rahmens. Würde im Beispiel nur border-top-width angeführt sein, würde der Rahmen unsichtbar bleiben, obwohl der Befehl als solches stimmt.

Die Definitionen der Rahmen kann man zusammenfassen, wobei es vier Richtungen und drei Angaben gibt. Die Angaben sind die Stärke (Dicke), Farbe und der Stil, die Richtungen sind oben, rechts, unten, links in dieser Reihenfolge. Das erste Beispiel sagt also, dass alle vier Seiten Linien mit einem Pixel Stärke in der angegebenen Farbe mit durchzogener Linie (solid) haben sollen.

Das zweite Beispiel ist ähnlich, aber hier wurde border-bottom gewählt, um die Angaben einzutragen. In diesem Fall wurde ein dicker Rahmen gewählt. Das dritte Beispiel hat einen Rahmen über dem Text bekommen.

Lesen Sie auch

Mit CSS lassen sich die Texte sehr schön formatieren und man kann die gesamte Seite mit den Abständen und den Textfluss aufbauen, aber es geht noch mehr. Eine wichtige Thematik ist die Absatzformatierung, bei der vertikale und horizontale Ausrichtung ebenso möglich ist wie auch der Zeilenumbruch und damit bewusst kürzere Zeilenlängen oder die Zeilenhöhe.

Das nächste Thema bei den Formatierungen mit CSS betrifft den Rahmen. Der Rahmen ist häufig ein optisches Werkzeug, um Inhalt hervorzuheben oder zu strukturieren und man kann in CSS viele Formatierungen wählen wie der Typ der Linie, die Farbe oder auch die Rahmenstärke.

Ebenfalls interessant sind die Gestaltungsmöglichkeiten bei den Listen. Sie können bei den Abständen individuell eingestellt werden und man kann bei der ungeordneten Liste sogar ein eigenes Bild als Aufzählungszeichen wählen.

Diesen Artikel teilen

Kategorien

Grundlagen
HTML-Grundlagen
CSS-Grundlagen
Javascript-Grundlagen
PHP-Grundlagen
MySQL-Grundlagen
SEO-Grundlagen

Infos, Tipps, Vermarktung
Webdesign-Lexikon
Online-Werbung
PHP-Codeschnipsel