Homepagebau	Dateiversion: diesen Beitrag diskutieren, ergänzen, eine Frage stellen

Beschreibung:

Mit CSS können sie alles - jeden beliebigen Tag - einrahmen. Dabei haben sie mehrere Möglichkeiten, die wir hier besprechen möchten...

Formatierung eines Rahmens:
Farbpalette anzeigen

border-style: ...;	"solid"  durchgezogen , "dotted"  gepunktete Linie , "dashed"  gestrichelte Linie , "double"  2 durchgezogene Linien , "groove"  vertiefte Linie , "ridge"  angehobene Linie , "inset"  vertiefte Fläche , "outset"  angehobene Fläche
border-color: ...;	bestimmt die Rahmenfarbe
border-width: ...;	Zahl, die die Rahmenbreite angibt
background-color: ...;	Hintergrundfarbe

Hinweis: Sie können die linke, rechte, obere und untere Rahmenlinie unabhängig voneinander gestalten. Dazu ergänzen sie einfach "left" (links), "right" (rechts), "top" (oben) bzw. "bottom" (unten) nach "border".
Zum Beispiel: boder-left-style, border-top-color, border-bottom-width,
bzw. boder-left, border-top, border-bottom

Beispiel:

Eingerahmter Text*.

* In allen folgenden Beispielen verwenden wir folgenden Rahmen:
3 Pixel breit, angehobene Fläche (=outset - siehe Tabelle), grau (=#A9A9A9 = "darkgrey")

<p><span style="border-style: outset; border-width: 3px; border-color: darkgrey;">
BEISPIEL</span></p>

Folgender Quelltext hat genau den gleichen Effekt:

<p><span style="border: 3 outset darkgrey;">BEISPIEL</span></p>

 BEISPIEL 

Nun wollen wir nur oben und links einen Rahmen anzeigen:

<p><span style="border-left: 3 outset darkgrey; border-top: 3 outset darkgrey;">
BEISPIEL</span></p>

 BEISPIEL 

Natürlich lassen sich Rahmen auch innerhalb von globalen Stylesheets definieren.
Hier einmal eine Variante, die um alle Hyperlinks ("A"-Tags) eines HTML-Dokuments einen Rahmen legt.

<style type="text/css">
    a { border-style: outset;
        border-color: darkgrey;
        border-width: 3px;       }
</style>

Zum Abschluss ein Beispiel für eine mit CSS formatierte Tabelle. Der Aufbau ist analog zu den beiden vorangegangenen Beispielen, daher hoffe ich, dass sie mir verzeihen, dass ich auf den etwas längeren Quellcode in dieser kurzen Einführung nicht näher eingehen werde.

(1,1)	(1,2)
(2,1)	(2,2)

<table border="0"> <tr>

<td style="background-color: #FFEFDF; border-left: outset; border-top: outset">
    (1,1)</td>
<td style="background-color: #FFEFDF; border-right: outset; border-top: outset">
    (1,2)</td>

</tr> <tr>

<td style="background-color: #FFEFDF; border-left: outset; border-bottom: outset">
    (2,1)</td>
<td style="background-color: #FFEFDF; border-right: outset; border-bottom: outset">
    (2,2)</td>

</tr> </table>

Autor: Thomas Meyer

Home: www.All-Community.de

Kontakt: