Cascading Stylesheets Stil mit <Stil>

CSS2-Referenz | HTML-4.01-Referenz | Farben, Zeichen und Maße | Workshop | Externe Links | Impressum | Hinweise

# User Interface – Eigenschaften der Benutzeroberfläche

Zu den Eigenschaften der Benutzeroberfläche gehören die Darstellung des Mauszeigers und eine "Umrandung", die nicht viereckig sein muss und durch Skripte bei bestimmten Ereignissen geändert werden kann.

outline, die Umrandung von Elementen, wird bislang von keinem Browser unterstützt. Die Umrandung ist eine Linie um ein Element herum, die nicht mit border zu verwechseln ist und die das Element auf der Seite auszeichnen und hervorheben soll. Die Umrandung wird außerhalb des Rahmens um das Element aufgezogen, so dass ein Element sowohl einen Rahmen als auch eine Umrandung aufweisen kann. Anders als der Rahmen hat die Umrandung keine rechteckige Form, die bislang die einzige Form für Elemente darstellt. Fünf Eigenschaften sind insgesamt für die Darstellung und Dimensionierung der Oberflächenelemente spezifiziert.

cursor • outline-color • outline-style • outline-width • outline

## cursor

IE4+ M1 N6 Version: CSS2 Erblich: Ja | cursor steuert die Darstellung des Mauszeigers. Die meisten Browser unterstützen nicht alle möglichen Darstellungen. | [ url("urladdress"), ]* [ auto | crosshair | default | help | move | pointer | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | text | wait

url("urladdress") ist eine von Kommas getrennte Liste von einer oder mehreren URLs und stellt die Adresse eines eigenen Mauszeigers dar. Jede URL muss in Anführungszeichen eingeschlossen werden. Browser erkennen eigene Mauszeiger nicht unbedingt, darum ist es besser, einen generischen Mauszeiger (default) an das Ende der Liste zu setzen (ähnlich wie eine generische Schrift "serif" ans Ende einer Schriftenliste).

auto ist die Voreinstellung und überlässt dem Browser die Darstellung des Mauszeigers.

crosshair stellt den Mauszeiger als großes dünnes Pluszeichen dar.

default überlässt dem Browser die Darstellung des Mauszeigers.

help stellt den Mauszeiger als Fragezeichen oder Ball dar.

move betont, dass etwas bewegt werden soll. Üblicherweise ist der Mauszeiger ein Kreuz mit Pfeilen an allen vier Enden.

pointer stellt den Mauszeiger als Pfeil dar.

e-resize stellt den Mauszeiger als Pfeil dar, der nach rechts (east) weist.

n-resize stellt den Mauszeiger als Pfeil dar, der nach oben (north) weist.

ne-resize stellt den Mauszeiger als Pfeil dar, der nach rechts oben (north-east) weist.

nw-resize stellt den Mauszeiger als Pfeil dar, der nach links oben (north-west) weist.

s-resize stellt den Mauszeiger als Pfeil dar, der nach unten (south) weist.

se-resize stellt den Mauszeiger als Pfeil dar, der nach rechts unten (south-east) weist.

sw-resize stellt den Mauszeiger als Pfeil dar, der nach links unten (south-west) weist.

w-resize stellt den Mauszeiger als Pfeil dar, der nach links (west) weist.

text stellt den Mauszeiger als "I" dar, mit dem Text gekennzeichnet und eingefügt wird.

wait stellt den Mauszeiger üblicherweise als Stundenglas oder Uhr dar, um anzuzeigen, dass der Benutzer noch auf die Bearbeitung eines Prozesses warten muss.

#### Beispiel

    p {cursor: text;}
    a {cursor: pointer;}
    body {cursor: url("maus.gif"),
        url("bilder/mauszeiger/stern.jpg"),
        default;}

↑

## outline-color

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | outline-color legt die Farbe der Umrandung fest. | color | invert

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). Es gibt 16 Standardfarben in HTML:

aqua #00FFFF rgb(0,255,255) | gray #808080 rgb(128,128,128) | silver #C0C0C0 rgb(192,192,192) | navy #000080 rgb(0,0,128)
black #000000 rgb(0,0,0) | green #800000 rgb(128,0,0) | teal #008080 rgb(0,128,128) | olive #808000 rgb(128,128,0)
blue #0000FF rgb(0,0,255) | lime #00FF00 rgb(0,255,0) | white #FFFFFF rgb(255,255,255) | purple #800080 rgb(128,0,128)
fuchsia #FF00FF rgb(255,0,255) | maroon #800000 rgb(128,0,0) | yellow #FFFF00 rgb(255,255,0) | red #FF0000 rgb(255,0,0)

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.

#### Beispiel

    img { outline-color: red }
    p { outline-color: #E9E9E9 }

↑

## outline-style

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | outline-style bestimmt die visuelle Darstellung der Umrandung. | none | dotted | dashed | double | groove | inset | outset | ridge | solid

none ist der Vorgabewert. Wenn kein Stil deklariert wird, ist keine Umrandung sichtbar, selbst wenn die outline-Eigenschaften angegeben wurden. Die Angabe von 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.

#### Beispiel

    img {outline-color: orange
        outline-style: solid
        outline-width: medium }

↑

## outline-width

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | outline-width bestimmt die Breite der Umrandung. | thin | medium | thick | length

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:

Maßeinheit | Abkürzung | Maßeinheit | Abkürzung
Zentimeter | cm | Millimeter | mm
ems | em | Pica | pc
x-Höhe | ex | Pixel | px
Inch | in | Point | pt

#### Beispiel

    img { outline-color: orange;
        outline-style: solid;
        outline-width: medium; }

↑

## outline

Zurzeit von keinem Browser unterstützt Version: CSS2 Erblich: Nein | outline fasst alle individuellen Stylesheet-Eigenschaften der Umrandung zusammen: outline-color, outline-style und outline-width. | outline-color &| outline-style &| outline-width

Jede dieser drei Eigenschaften wurde in den vorhergehenden Abschnitten beschrieben.

#### Beispiel

Eine interessante Anwendung könnte darin bestehen, dass die Umrandung nur dann sichtbar wird, wenn das Element im Fokus wäre oder aktiv. Das folgende Codefragment benutzt dazu die Pseudoelemente :focus und :active.

    p:focus { outline: blue solid thin; }
    p:active { outline: red solid thick; }

#### Beispiel

    img { outline: red; }
    p { outline: double 5px; }
    button { outline: #E9E9E9 double  thin; }

↑

aural Stile für die Sprachausgabe

border Stile für die Gestaltung eines Rahmens um ein Element

color und background Stile für die Vordergrundfarbe und Hintergrundgestaltung

content Stile für automatisch generierten Inhalt

dimension Stile für die Abmessungen und Ausrichtung von Elementen

font Stile für die Schriftgestaltung

lists and markers Stile für Aufzählungen und Listen

margin Stile für den Abstand eines Elements gegen umgebende Elemente

padding Stile für den inneren Abstand zum Element

paged media Stile für den Druck

positioning Stile für die Positionierung

Pseudoklassen und Pseudoelemente Stile für die Gestaltung von Pseudolinks und Pseudoelementen

table Stile für die Gestaltung von Tabellen

text Stile für die Absatzgestaltung

user interface Stile für die Gestaltung der Benutzeroberfläche durch Rahmen und Mauszeiger

Cascading Styleheets – Stil mit <Stil> • Das Begleitmaterial zum Buch
© media engineering Ulrike Häßler 2002 • Frechen