Stil mit {stil}

Mar 2009

User Interface • outline • Zusätzlicher Rahmen

outline, die Umrandung, ist eine Linie um ein Element herum, die nicht mit border zu verwechseln ist. Die Umrandung wird außerhalb des Rahmens um das Element aufgezogen, so dass ein Element sowohl einen Rahmen mit dem CSS-Stil border als auch eine Umrandung mit dem CSS-Stil outline aufweisen kann. Die Linie mit outline nimmt keinen Platz in Anspruch und wird nicht zur Breite des Elements gerechnet.

outline ist eine Kurzform, die alle drei Eigenschaften für outline in eine CSS-Regel zusammenfasst.

a:hover { outline: 25px solid rgb(236,236,255); }
                     ^    ^           ^
                     |    |           +-- Farbe der Umrandung
                     |    +-- Stil der Umrandung
                     +-- Breite der Umrandung

Wenn die Maus über einen Hyperlink der oberen Box hovert, soll eine Umrandung durch den Stil outline sichtbar werden. Die Umrandung benötigt keinen Platz und das a-Element bleibt auf seiner Position.

Wenn die Maus über einen Hyperlink der unteren Box hovert, soll ein Rahmen durch den Stil border sichtbar werden. Der Rahmen benötigt Platz (die Breite eines Elements berechnet sich aus der angegebenen Breite width + padding + border), so dass sich die Box mit dem Link und die darunter liegenden Elemente verschoben werden.

Anders als border muss outline nicht rechteckig sein (das Rechteck ist aber zurzeit die einzig definierte Form).

Ein weiterer Unterschied zum CSS-Stil border ist die Beschränkung auf eine durchgehende Gestaltung von outline. Es gibt kein outline-top-style oder outline-bottom-color – die Umrandung ist an allen Seiten gleich gestaltet.

outline

IE8 FF2 Op9 Sa3 CSS2 Erblich: Nein

outline

ist die Kurzschrift und fasst alle individuellen Stylesheet-Eigenschaften der Umrandung zusammen: outline-color, outline-style und outline-width.

Werte

outline-color &| outline-style &| outline-width

outline-color

IE8 FF2 Op7 Sa1.2 CSS2 Erblich: Nein

outline-color

Farbe der Umrandung fest.

Werte

color | invert | inherit

color

kann das Schlüsselwort für eine Farbe sein (red), die sechsstellige Hexadezimalzahl (#FFFFFF) oder ein Tripel aus drei RGB-Werten (255,255,255).

Werte

invert (Voreinstellung) kehrt die Hintergrundfarbe um und benutzt die invertierte Farbe als Umrandung. Auf diese Weise wird sichergestellt, dass sich die Farbe der Umrandung stets vom Hintergrund abhebt.

outline-width

IE8 FF2 Op7 Sa1.2 CSS2 Erblich: Nein

outline-width

Breite der Umrandung.

Werte

thin | medium | thick | length

thin, medium, thick

thin | medium | thick: Wenn Sie die Schlüsselwörter für die Rahmenbreite benutzen, bestimmen Plattform und Browser die exakte Breite der Umrandung. Die Voreinstellung ist medium.

length

kann in einer der folgenden Maßeinheiten angegeben werden: cm (Zentimeter), em (ems), ex (x-Höhe), in (Inch), mm (Millimeter), pc (Pica), pt (Punkt), px (Pixel).

outline-style

IE8 FF2 Sa1.2 Op7 CSS2 Erblich: Nein

outline-style

outline-style bestimmt die visuelle Darstellung der Umrandung.

Werte

none | dotted | dashed | double | groove | inset | outset | ridge | solid | inherit

none

none ist der Vorgabewert. Wenn kein Stil deklariert wird, ist keine Umrandung sichtbar, selbst wenn die outline-Eigenschaften angegeben wurden. Die Wert "none" stellt sicher, dass keine vorangegangenen Deklarationen die Umrandung beeinflussen.

dotted

erzeugt eine gepunktete Linie.

dashed

erzeugt eine gestrichelte Linie.

double

erzeugt eine doppelte durchgehende Linie.

groove

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

inset

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

outset

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

ridge

erzeugt eine dreidimensionale Linie, deren Aussehen vom gewählten Farbwert abhängt.

solid

erzeugt eine durchgezogene Linie.

zurück zum Seitenanfang