 SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften |
|
 |
Rahmen |
|
|
 | |
Es gibt in CSS zwei Arten von Rahmen: Die erste Sorte läuft unter der Bezeichnung border und zeichnet immer rechteckige Rahmen um die Elemente. border ist schon seit CSS1 im Standard vertreten und wird von allen Browsern verstanden. Außerdem gibt es outline, welche erst seit CSS2 existiert und noch nicht von allen Browsern verstanden wird, obwohl diese Rahmenart andere und durchaus sinnvolle Eigenschaften hat.
borderSinnvoll sind die hier beschriebenen Angaben für border 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 auf alle Elemente. 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 html und 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.
Der Internet Explorer vor Version 5.5 zeichnet Rahmen nur um Blocklevel-Elemente.
outlineDie Eigenschaft outline orientiert sich, im Gegensatz zu border nicht an rechteckigen Blöcken, sondern ist explizit als "Rahmen für nicht-rechteckige Bereiche" definiert. Außerdem wird die Dicke der outline nicht zur Elementgröße hinzugerechnet, sondern als letzter Schritt "draufgemalt", ohne Platz wegzunehmen. Im Gegensatz zu den border-Rahmen können outline-Rahmen aber nur vollständig geschlossen zugewiesen werden, es fehlt die Möglichkeit, einzeln für oben, unten, links oder rechts separate Angaben zu machen. Vergleichen Sie am Besten die Beispiele zu outline und border, um den Unterschied zu verstehen.
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <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 CSS2 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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <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 CSS2 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 nicht vollständig und auch nur, wenn außerdem die eine Angabe zur Rahmendicke notiert wird, also etwa:
<p style="border-style:solid; border-width:thin">.
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<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 { line-height:150%; }
p.info { border:1px solid gray; background-color:#E0E0E0; padding:4px; margin:0px; }
span.rahmen { border:2px solid red; }
body { font-family:Tahoma,Helvetica,sans-serif; }
</style>
</head><body>
<h1>Überschrift erster Ordnung</h1>
<p>xxxxx xxxxx usw... <span class="rahmen">xxxxx xxxxx xxxxx usw...</span> xxxxx
xxxxx</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.
outline-width (Rahmendicke)Die Angabe der outline-width ist identisch zur border-width. 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.
Kombinieren Sie outline-width stets mit einer Angabe für outline-style, um eine sichtbare Rahmenlinie zu definieren.
outline-color (Rahmenfarbe)Die Angabe von outline-color ist nahezu identisch zu border-color. Erlaubt ist eine Farbangabe oder der Wert invert (invertierte Farbe, die durch Umkehrung aller Bits einer hexadezimalen Farbangabe entsteht).
Die Farbangabe invert wird von vielen Browsern nicht unterstützt.
outline-style (Rahmentyp)Die Angabe outline-style ist identisch zu border-style. 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.
outline (Rahmen allgemein)Diese Angabe ist eine Zusammenfassung der folgenden möglichen Einzelangaben:
outline-width
outline-style
outline-color
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html><head><title>outline</title>
<style type="text/css">
h1 { outline:4px double blue; padding-bottom:4px; margin:0px; }
h2 { outline:1px solid blue; margin:0px; }
p { line-height:150%; }
p.info { outline:4px solid invert; background-color:yellow; padding:4px; margin:0px; }
span.rahmen { outline:2px solid red; }
body { font-family:Tahoma,Helvetica,sans-serif; }
</style>
</head><body>
<h1>Überschrift erster Ordnung</h1>
<p>xxxxx xxxxx usw... <span class="rahmen">xxxxx xxxxx xxxxx usw...</span> xxxxx
xxxxx</p>
<h2>Überschrift zweiter Ordnung</h2>
<p>xxxxx xxxxx xxxxx usw.</p>
<p class="info">xxxxx xxxxx xxxxx usw.</p>
</body></html>
Das Beispiel ist nahezu eine identische Kopie von border.
Mit outline 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.
Beachten Sie das unterschiedliche Verhalten des Rahmens beim <span>, wenn der darin enthaltene Text sich auf mehrere Zeilen verteilt. outline sorgt dafür, dass jeder einzelne Textabschnitt vollständig von einem Rahmen umschlossen ist, auch wenn die einzelnen Stücke nicht zusammenhängend platziert werden können. Bei border hingegen wird eventuell eine Seite eines Teilstückes offengelassen.
|
| |
 |
Hintergrundfarben und -bilder
|
 |
Innenabstand
|
| SELFHTML/Navigationshilfen Stylesheets (CSS) CSS-Eigenschaften |
|
© 2007 Impressum