 SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften |
|
 |
Rahmen |
|
|
 | |
Sinnvoll sind die hier beschriebenen Angaben besonders für HTML-Elemente, die einen eigenen Absatz erzeugen bzw. einen Block bilden, also etwa für h[1-6], p, blockquote, address, pre sowie div oder table. Anwendbar sind sie aber auch auf tr, th und td. So ist es beispielsweise möglich, in HTML eine 
blinde Tabelle zu notieren, in der aber doch einzelne Zellen einen Rahmen nach Wunsch erhalten - nämlich mit Hilfe von CSS-Rahmeneigenschaften. Auch auf body lassen sich die hier aufgelisteten Eigenschaften anwenden - in diesem Fall wird um den gesamten sichtbaren Körper einer HTML-Datei ein Rahmen gezeichnet.
Wenn Sie bei Rahmendefinitionen nichts weiter angeben, kann es sein, dass die Inhalte von Elementen sehr nah an dem sie umgebenden Rahmen kleben. Zu diesem Zweck können Sie Innenabstände definieren. Dadurch schaffen Sie einen Abstand zwischen dem Rahmen und seinem Inhalt.
In der Regel werden Sie mehrere Angaben zu Rahmen kombinieren. So ist es sinnvoll, nicht nur eine Rahmendicke anzugeben, sondern auch die gewünschte Rahmenfarbe. Auch verschiedene Rahmentypen stehen zur Auswahl. Alle Rahmeneigenschaften können Sie wahlweise auf alle vier Seiten eines Elements anwenden, aber auch nur auf eine oder mehrere bestimmte Seiten.
Bei Rahmen macht sich das Block-Element-Modell von Netscape 4.x sehr negativ bemerkbar. Dieser Browser dehnt Block-Elemente in der Breite nur auf die Breite seines Inhalts, sofern dieser weniger Raum einnimmt als die zur Verfügung stehende Gesamtbreite. Nur mit unschöner Trickserei lässt sich Netscape 4.x dazu überlisten, ein Block-Element auf die durch das Anzeigefenster, den Dokumentrand oder das Elternelement zur Verfügung gestellte Breite auszudehnen. Eine einheitlichere Darstellung erreichen Sie, wenn Sie mit Angaben zur Breite von Elementen arbeiten, z.B. mit Angaben wie width:100% oder width:500px. Ein anderer, noch effektiverer Trick, der den 4er-Netscape das Element tatsächlich auf die volle zur Verfügung stehende Breite ziehen lässt, ist die Angabe margin:0px.
border[-top, -right, -bottom, -left]-width (Rahmendicke)Sie können für ein Element die Rahmendicke bestimmen. Sinnvollerweise sollten Sie diese Angabe zumindest mit einer Angabe zum Rahmentyp kombinieren, gegebenenfalls aber auch mit einer Festlegung der Rahmenfarbe.
Anzeigebeispiel: So sieht's aus
<html><head><title>border-width</title>
<style type="text/css">
#links {
border-left-width:2.5em;
border-left-style:solid;
border-color:red;
padding-left:2.5em;
text-align:justify; }
#linksrechts {
border-left-width:2.5em;
border-left-style:solid;
border-left-color:red;
padding-left:2.5em;
border-right-width:2.5em;
border-right-style:solid;
border-right-color:green;
padding-right:2.5em;
text-align:justify; }
#rundrum {
border-width:1px;
border-style:solid;
border-color:blue;
padding:2.5em;
text-align:justify; }
}
</style>
</head><body>
<p id="links">xxxxx xxxxx xxxxx usw.</p>
<p id="linksrechts">xxxxx xxxxx xxxxx usw.</p>
<p id="rundrum">xxxxx xxxxx xxxxx usw.</p>
</body></html>
Mit border-width: können Sie die Dicke des Rahmens um ein Element bestimmen. Erlaubt ist eine numerische Angabe (mit Ausnahme von Prozentwerten) für die Rahmendicke oder einer der folgenden Werte:
thin = dünn.
medium = mittelstark.
thick = dick.
Um für einzelne Seiten des Elements eine unterschiedliche Rahmendicke zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-width mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-width:5px 5px;
Dabei gelten folgende Regeln:
Zwei Angaben: die erste Angabe bedeutet die Rahmendicke für oben und unten, die zweite Angabe die Rahmendicke für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts und links und die dritte die Rahmendicke für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmendicke für oben, die zweite die Rahmendicke für rechts, die dritte die Rahmendicke für unten und die vierte die Rahmendicke für links.
Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-width zu verwenden:
border-top-width definiert die Rahmendicke für oben,
border-right-width die Rahmendicke für rechts,
border-bottom-width die Rahmendicke für unten und
border-left-width die Rahmendicke für links.
Die Angabe border-width wird nur interpretiert, wenn außerdem der Rahmentyp (border-style) angegeben wird, also etwa:
<p style="border-style:solid; border-width:thin">.
border[-top, -right, -bottom, -left]-color (Rahmenfarbe)Sie können für ein Element die Rahmenfarbe bestimmen. Die Angabe dazu sollten Sie mit einer Angabe zum Rahmentyp und/oder einer Angabe zur Rahmendicke kombinieren.
Anzeigebeispiel: So sieht's aus
<html><head><title>border-color</title> </head><body> <p style="border-color:#FFFF00; border-width:2px; border-style:solid; padding:4px"> xxxxx xxxxx xxxxx usw.</p> <p style="border-top-color:#FF00FF; border-left-color:#00FF00; border-right-color:#3333FF; border-bottom-color:#FFFF00; border-width:4px; border-style:solid; padding:8px"> xxxxx xxxxx xxxxx usw.</p> <p style="border-color:cyan yellow; border-width:8px; border-style:solid; padding:16px"> xxxxx xxxxx xxxxx usw.</p> </body></html>
Mit border-color: können Sie die Rahmenfarbe bestimmen. Erlaubt ist eine Farbangabe oder der Wert transparent (durchsichtiger Rahmen, interessant bei sich überlappenden Elementen, wie z.B. durch Positionierung möglich).
Um für einzelne Seiten des Elements eine unterschiedliche Rahmenfarbe zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-color mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-color:#FFFF00 red;
Dabei gelten folgende Regeln:
Zwei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben und unten, die zweite Angabe die Rahmenfarbe für rechts und links.
Drei Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts und links und die dritte die Rahmenfarbe für unten.
Vier Angaben: die erste Angabe bedeutet die Rahmenfarbe für oben, die zweite die Rahmenfarbe für rechts, die dritte die Rahmenfarbe für unten und die vierte die Rahmenfarbe für links.
Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-color zu verwenden:
border-top-color definiert die Rahmenfarbe für oben,
border-right-color die Rahmenfarbe für rechts,
border-bottom-color die Rahmenfarbe für unten und
border-left-color die Rahmenfarbe für links.
Die Untereigenschaften von border-color stehen im Gegensatz zu den Untereigenschaften von border-width jedoch erst seit CSS 2.0 zur Verfügung und werden von älteren Browsern ignoriert.
Die Angabe border-color wird nur interpretiert, wenn außerdem der Rahmentyp (border-style) angegeben wird, also etwa:
<p style="border-style:solid; border-color:red">.
Netscape 4.x hat mit Angaben zur Rahmenfarbe zum Teil erhebliche Probleme und interpretiert teilweise augenscheinlich unsinniges Zeug. Das obige Beispiel etwa lässt ihn böse straucheln.
border[-top, -right, -bottom, -left]-style (Rahmentyp)Mit dem Rahmentyp können Sie verschiedene Schmuckrahmen definieren. Damit die Typen zur Geltung kommen, empfiehlt sich die Kombination mit Angaben zur Rahmendicke und/oder zur Rahmenfarbe.
Anzeigebeispiel: So sieht's aus
<html><head><title>border-style</title> </head><body> <p style="border-width:medium; border-color:#FF9999; border-style:dotted; padding:5px;"> Textabsatz mit Rahmendicke medium und Typ dotted.</p> <p style="border-width:medium; border-color:#9999FF; border-style:dashed; padding:5px;"> Textabsatz mit Rahmendicke medium und Typ dashed.</p> <p style="border-width:medium; border-color:#66CC66; border-style:solid; padding:5px;"> Textabsatz mit Rahmendicke medium und Typ solid.</p> <p style="border-width:medium; border-color:#FF9999; border-style:double; padding:5px;"> Textabsatz mit Rahmendicke medium und Typ double.</p> <p style="border-width:12px; border-color:#9999FF; border-style:groove; padding:5px;"> Textabsatz mit Rahmendicke 12px und Typ groove.</p> <p style="border-width:12px; border-color:#66CC66; border-style:ridge; padding:5px;"> Textabsatz mit Rahmendicke 12px und Typ ridge.</p> <p style="border-width:12px; border-color:#FF9999; border-style:inset; padding:5px;"> Textabsatz mit Rahmendicke 12px und Typ inset.</p> <p style="border-width:12px; border-color:#9999FF; border-style:outset; padding:5px;"> Textabsatz mit Rahmendicke 12px und Typ outset.</p> </body></html>
Mit border-style: können Sie den Rahmentyp festlegen. Erlaubt ist eine der folgenden Angaben.
none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen), siehe Hinweis.
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.
Um für einzelne Seiten des Elements einen unterschiedlichen Rahmentyp zu bestimmen, gibt es zwei Möglichkeiten. Die eine ist, bei border-style mehrere Angaben zu notieren und diese durch Leerzeichen zu trennen.
zum Beispiel: border-style:solid double;
Dabei gelten folgende Regeln:
Zwei Angaben: die erste Angabe bedeutet den Rahmentyp für oben und unten, die zweite Angabe den Rahmentyp für rechts und links.
Drei Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts und links und die dritte den Rahmentyp für unten.
Vier Angaben: die erste Angabe bedeutet den Rahmentyp für oben, die zweite den Rahmentyp für rechts, die dritte den Rahmentyp für unten und die vierte den Rahmentyp für links.
Die zweite Möglichkeit besteht darin, die Untereigenschaften von border-style zu verwenden:
border-top-style definiert den Rahmentyp für oben,
border-right-style den Rahmentyp für rechts,
border-bottom-style den Rahmentyp für unten und
border-left-style den Rahmentyp für links.
Die Untereigenschaften von border-style stehen im Gegensatz zu den Untereigenschaften von border-width jedoch erst seit CSS 2.0 zur Verfügung und werden von älteren Browsern ignoriert.
Die Angabe hidden ist vor allem für benachbarte Tabellenzellen gedacht. Während die Angabe none nur den Rahmen des Elements unterdrückt, für das sie gilt, bewirkt hidden, dass auch Rahmen von Nachbarelementen unterdrückt werden, sofern diese Rahmen besitzen. Voraussetzung dafür ist allerdings, dass für das zugehörige table-Element die folgende CSS-Sondereigenschaft notiert ist:
border-collapse:collapse
Dies ist eine neuere CSS-Eigenschaft, die Rahmenregeln für Tabellen erlaubt. Beim Wert collapse fallen alle Rahmen der Zellen sauber übereinander, sprich, eine Zelle mit rechtem Rand von 1px und eine Zelle rechts davon mit einem linken Rand von 1px bilden einen gemeinsamen Rahmen von 1px. Der gegenteilige mögliche Wert, der allerdings auch der Voreinstellung entspricht, lautet separate. Damit "stoßen" die Rahmen benachbarter Zellen nur aneinander, überlappen sich aber nicht. Im Beispiel der zwei erwähnten Zellen würde also optisch ein Zwischenrahmen von 2px Dicke entstehen.
Netscape 4.x interpretiert border-style nur, wenn außerdem die eine Angabe zur Rahmendicke notiert wird, also etwa:
<p style="border-style:solid; border-width:thin">.
Beide Browser interpretieren die Angaben zu border-style nicht vollständig.
Einige der Effekte (z.B. groove) kommen nur zustande, wenn Sie eine Farbe angeben, die sich von schwarz unterscheidet.
border[-top, -right, -bottom, -left] (Rahmen)Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
border-width
border-style
border-color
Anzeigebeispiel: So sieht's aus
<html><head><title>border</title>
<style type="text/css">
h1 { border-bottom:4px double blue; padding-bottom:4px; margin:0px; }
h2 { border-top:1px solid blue; margin:0px; }
p.info { border:1px solid gray; background-color:#E0E0E0; padding:4px; margin:0px; }
body { font-family:Tahoma,Helvetica,sans-serif; }
</style>
</head><body>
<h1>Überschrift erster Ordnung</h1>
<p>xxxxx xxxxx xxxxx usw.</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>xxxxx xxxxx xxxxx usw.</p>
<p class="info">xxxxx xxxxx xxxxx usw.</p>
</body></html>
Mit border: können Sie das Aussehen eines Rahmens um ein Element bestimmen. Notieren Sie Angaben zu Linienstärke, Rahmentyp und Farbe mit Leerzeichen dazwischen, so wie in den Beispielen oben. Die Reihenfolge der Einzelangaben ist egal.
Daneben können Sie zusammenhängende Angaben für Rahmendicke, Rahmenfarbe und Rahmentyp auch für einzelne Seiten des Elements machen. Dazu sind die Untereigenschaften von border gedacht:
border-top definiert eine zusammenhängende Angabe für oben,
border-right für rechts,
border-bottom für unten und
border-left für links.
|
| |
 |
Hintergrundfarben und -bilder
|
 |
Innenabstand
|
| SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften |
|
© 2005 Impressum