 |
Moderne Browser können verschiedene Arten von Rahmen darstellen, beispielsweise zu sehen auf unserer Startseite. Damit lassen sich hübsche Effekte realisieren. Im Folgenden zeigen wir Ihnen die für Rahmen relevanten CSS-Attribute.
Anwendbarkeit
Erstaunlicherweise kann man einen Rahmen um fast alle Tags ziehen lassen - sogar um <span>.
Rahmendicke
Das Attribut border-width gibt die Breite des zu zeichnenden Rahmens an. Erlaubt sind Angaben in allen CSS-Einheiten, also z.B. border-width: 10px; oder auch border-width: 1cm;.
Rahmenfarbe
Mit border-color legen Sie die Farbe des Rahmens fest. Beispiele: border-color: red; oder auch border-color: #00FF00.
Rahmentyp
border-style gibt die Art des zu zeichnenden Rahmens an. So lassen sich z.B. gestrichelte Rahmen oder solche mit 3D-Effekt zeichnen. Folgende Werte sind erlaubt:
none: kein Rahmen
dotted: gepunktet
dashed: gestrichelt
solid: durchgezogen, zweidimensional
groove, ridge, inset, outset: div. 3D-Effekte
Einzelrahmen
Sie können die obigen drei Attribute auch für einzelne Seiten eines Rahmens festlegen, so z.B. nur die obere Kante sichtbar machen und den Rest verstecken.
Beispiel:
<span style="border-style: none; border-top-style: solid; border-top-width: 3px; border-top-color: red;">Test</span>
erzeugt folgenden Effekt:
Test
Anstelle von top lassen sich hier auch left, right und bottom verwenden, auch in mehrfacher Kombination.
Rahmen-Abstände
Wie weit ein Rahmen vom Inhalt entfernt ist, den er umschließt, wird mit dem padding-Attribut angegeben, das es auch in Variationen wie padding-top gibt.
<span style="border-style: solid; border-width: 3px; border-color: red; padding: 0px;">Test</span>
erzeugt:
Test
<span style="border-style: solid; border-width: 3px; border-color: red; padding: 5px;">Test</span>
erzeugt:
Test
Beispiele
Tabelle mit gestricheltem Rahmen:
Code dazu:
<table style="border-style: dashed; border-width: 1px; border-color: black;">
<tr>
<td>Inhalt</td>
</tr>
</table>
Rahmen als Textmarker:
Besondere Inhalte sind wichtig, da sie wertvolle Infos enthalten!
Code dazu:
<span style="border-width: 1px; border-style: solid; border-color: lime; padding: 1px;">wichtig</span>
Kombination von Hintergrundfarbe und Rahmen:
Heading1
Code dazu:
<h1 style="font-size: 15pt; border-width: 2px; border-style: solid; border-color: navy; padding: 4px; background-color: #9999ff; display: inline">Heading1</h1>
|
|
|
|
Sie wollen diese Seite ausdrucken? Dafür haben wir eine spezielle Druckversion ohne grafische Elemente entwickelt! |
|
|
Einführung in CSS bei HTMLWorld.
|
|
