User Interface – Eigenschaften der Benutzeroberfläche

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; }