CSS Rahmen: Befehle und Optionen

Wir definieren über CSS Befehle ebenfalls den Rahmen von HTML Objekten. Dazu weisen wir diesem mindestens eine Rahmenstärke zu. Um Farbe und Stil des Rahmens zu modifizieren, verwenden wir weitere Befehle. Dazu können wir ebenfalls die Mischschreibweise von CSS nutzen.

Ein Beispiel für einen gemischten Rahmen-Befehl:border:2px dotted red;  (2 Pixel stark, gepunktet, rot)

So reicht eine Anweisung, um Stärke, Farbe und Stil anzugeben. Somit sparen wir uns einige Zeilen CSS Code und halten den Quellcode schlank. Auch ist es mit CSS möglich, bei Rahmen nur bestimmte Seiten anzusprechen. Das funktioniert zum Beispiel so: „border-top:3px solid green;“

Dies versieht den Rahmen am Kopf eines Objektes mit den definierten Eigenschaften zur Darstellung. In diesem Fall handelt es sich um einen durchgezogenen, 3 Pixel starken, grünen Rahmen. Per CSS Anweisung können bei Rahmen Innenabstand und Außenabstand festgelegt werden, damit Inhalte, beziehungsweise benachbarte Elemente, sich nicht zu nahe kommen.

Den Rahmen Abrunden können wir mir dem Befehl border-radius.

BefehlBedeutungMögliche Werte

border-width

Rahmenstärke / Dicke

Integer Wert in Pixel (px), mm, cm oder em

border-color

Rahmenfarbe

Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, …

border-style

Rahmenstil

einfach (solid), gepunktet (dotted), gestrichelt (dashed), …

border

Kombination / vereinfachte Schreibweise

border: width style color;

border-top/right/bottom/left

Kombination / vereinfachte Schreibweise für nur oben, rechts, unten, links

border-top: width style color;

border-collapseTabellenrahmenseparate (jede Zelle hat einen eigenen Rahmen), collapse (Zellerahmen sind verbunden)
border-spacingTabellenrahmen AbständeInteger Wert in Pixel (px), mm, cm oder em

outline-width

Konturstärke / Dicke

Integer Wert in Pixel (px), mm, cm oder em

outline-color

Konturfarbe

Wert als rgb(), rgba(), oder Hex (#). Auch möglich: Standardfarben wie „green“, „blue“, „red“, „yellow“, …

outline-style

Konturstil

einfach (solid), gepunktet (dotted), gestrichelt (dashed), …

outline

Kombination / vereinfachte Schreibweise

outline: width style color;

Beispiel

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
.element {
    border:3px solid rgb(230,180,40);
    border-top:1px dotted red;
    border-right:3px dashed;
}

Bewerte diese Seite

 
 
 
 
 
 
 
Bewerten
 
 
 
 
 
 
1 Bewertungen
100 %
1
5
5
 

Veröffentlicht von

Kevin Lieser

Kevin Lieser

Kevin Lieser ist ausgebildeter Mediendesigner und seit 2008 mit der TYPO3 Agentur KA Mediendesign unternehmerisch tätig. Seine Leidenschaften sind gutes Webdesign und die PHP Programmierung. Als App Entwickler und Autor mehrerer TYPO3 Extensions engagiert er sich aktiv für die Weiterentwicklung von Webapplikationen und mobilen Anwendungen.