Rahmentypen mit CSS auswählen und einsetzen

Wie soll der Rahmen eigentlich aussehen?

Der Rahmen rund um ein Element auf der Webseite kann ein völlig unterschiedliches Aussehen haben, denn CSS bietet viele Optionen an. Allerdings muss man vorsichtig im Umgang sein, denn so manch Stil könnte bei manchen Browsern nicht angezeigt werden. Die Standardeinstellungen wie solid oder double sind aber kein Problem.

Der Rahmentyp zählt mit der Farbe und der Rahmenstärke zu den drei Angaben, die notwendig sind, damit man den Rahmen überhaupt sehen und damit auch verlässlich auf der Webseite nutzen kann.

Rahmentyp für das Aussehen des Rahmens festlegen

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

ergibt:

Ein erster Rahmen

Jetzt ist er doppelt

Gepunktete Linie

Gestrichelte Linie

3D-Effekt (groove)

Erhabener Rahmen

Noch ein 3D-Effekt (inset)

Ein letzter 3D-Effekt (outset)

Wie die Beispiele zeigen, gibt es verschiedenste Varianten, wobei sämtliche Rahmen jetzt zusammengefasst wurden, das heißt, dass für alle vier Seiten die gleichen Spielregeln gelten. Das sind in diesem Fall ein Pixel Breite (= Rahmenstärke) und die gleiche Rahmenfarbe auf allen Seiten. Geändert hat sich der Stil.

Man hätte für jede Seite mit border-top-style, border-right-style, border-bottom-style und border-left-style individuelle Stile angeben können. Ebenfalls hätte man für die 3D-Rahmentypen stärkere Rahmen wählen können - nein, wählen müssen, damit sie zur Geltung kommen. Doch hier ging es rein um die Demonstration.

Und nochmals sei der Hinweis erlaubt, dass nicht jeder Browser die Rahmen richtig oder überhaupt darstellen kann. Will man sicher sein, dass der Rahmen gesehen wird, sollte man konservativ die Basiseinstellungen wählen. Solid wird deshalb mit großem Abstand am meisten genutzt.

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Zwei Einstellungen gibt es noch für den Rahmentyp, nämlich none und hidden. Beide haben zur Konsequenz, dass der Rahmen nicht gesehen wird, weshalb das Weglassen des Rahmenaufrufes die gleiche Wirkung hätte.

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.

Themenseiten

Startseite CSS-Grundlagen

Rahmentypen mit CSS auswählen und einsetzen

Wie soll der Rahmen eigentlich aussehen?

Rahmentyp für das Aussehen des Rahmens festlegen

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich