CSS Eigenschaften: Rahmen
In CSS4You sind links im Menü die CSS-Eigenschaften beschrieben. Will man Informationen zu einer bestimmten Eigenschaft erhalten, klickt man unter Übersichten auf Eigenschaften A-Z. Dort befindet sich eine alphabetisch sortierte Liste der Eigenschaften.
Zum Erlernen ist es jedoch besser, Eigenschaften die zusammengehören, gleichzeitig zu erlernen. Dafür gibt es unter Eigenschaften eigene Gruppenbezeichnungen wie Schrift, Text usw.die aber mit den Kategorien in den Webeditoren nicht übereinstimmen.
Rahmen (border)
Rahmen: border
(Online-Link: CSS 4 You: Eigenschaften > Rahmen
Viele Elemente aus (X)HTML können einen rechteckigen Rahmen besitzen. Dazu zählen nicht nur Tabellen, sondern auch Absätze und alle Überschriften h1 bis h6. Für CSS-Rahmen gibt es drei Möglichkeiten das Aussehen festzulegen:
- Linienart des Rahmens (border-style)
- Breite/Stärke des Rahmens (border-width)
- Farbe des Rahmens (border-color)
Linienart des Rahmens: border-style (durchgehend, punktiert, strichliert, doppelt usw.)
(Online-Link: CSS 4 You: Eigenschaften > Rahmen > border-style)
Die Linienart (border-style) ist: dotted (gepunktete Linie).
Die Linienart (border-style) ist: dashed (gestrichelte Linie).
Die Linienart (border-style) ist: solid (durchgezogene Linie).
Die Linienart (border-style) ist: double (doppelte Linie).
Die Linienart (border-style) ist: groove (graviert).
Die Linienart (border-style) ist: ridge (reliefartig).
Die Linienart (border-style) ist: inset (vertieft).
Die Linienart (border-style) ist: outset (erhaben).
Die Linienart (border-style) ist: none (keine Linie).
Die Linienart (border-style) ist: hidden (? Linie). http://www.w3.org/TR/css-backgrounds-3/#typedef-line-style
Breite/Stärke des Rahmens: border-width
(Online-Link: CSS 4 You: Eigenschaften > Rahmen > border-width)
Die Rahmenstärke (border-width) ist: 1 Pixel.
Die Rahmenstärke (border-width) ist: 5 Pixel.
Die Rahmenstärke (border-width) ist: 10 Pixel.
Die Rahmenstärke (border-width) ist: thin.
Die Rahmenstärke (border-width) ist: 0 Pixel.
Farbe des Rahmens: border-color
(Online-Link: CSS 4 You: Eigenschaften > Rahmen > border-color)
Die Rahmenfarbe (border-color) ist: #8000FF.
Die Rahmenfarbe (border-color) ist: #004000.
Die Rahmenfarbe (border-color) ist: #FFFF99.
Die Rahmenfarbe (border-color) ist: "transparent".
Beispiele
Dieser Absatz hat einen dunkelgrünen (#009900) Rahmen, der ein Pixel breit und durchgezogen (solid) ist.
Dieser Absatz hat einen violetten (#990099) Rahmen, der acht Pixel breit und doppelt (double) ist.
Dieser Absatz hat einen grauen (#999999) Rahmen, der fünf Pixel breit und erhaben (outset) ist. Weiters hat er eine Hintergrundfarbe (background-color) von #CCCCCC.
Formatierung für jede Seite individuell
Weiters kann man für jede der vier Seiten die Einstellungen seperat angeben.
- oben (border-top-style, border-top-width, border-top-color)
- rechts (border-right-style, border-right-width, border-right-color)
- unten (border-bottom-style, border-bottom-width, border-bottom-color)
- links (border-left-style, border-left-width, border-left-color)
Beispiele
Dieser Absatz hat links und rechts einen graugrünen (#669966) Rahmen, der drei Pixel breit und doppelt (double) ist.
Dieser Absatz hat unten einen dunkelroten (#CC3333) Rahmen, der drei Pixel breit und reliefartig (ridge) ist.
Dieser Absatz hat links einen blauen (#000099) Rahmen, der acht Pixel breit und durchgezogen (solid) ist. Zusätzlich ist links noch ein Abstand zwischen Rahmen und Text von zwei Buchstabenhöhen.
Kurzformen der Deklaration von Rahmeneigenschaften
5 Rounded Corners
6 Border Images
7. Miscellaneous Effects
The
box-decoration-break property, which defines how backgrounds and
borders apply to a fragmented box, has been moved to the
CSS Fragmentation Module.
[CSS3-BREAK]
7.1. Drop Shadows: the
box-shadow property