edition W3C.de

Cascading Style Sheets, Level 2

Deutsche Übersetzung

Diese Version:
http://www.edition-w3c.de/TR/1998/REC-CSS2-19980512
Aktuelle Version:
http://www.edition-w3c.de/TR/REC-CSS2
Übersetzer:
Judith Muhr (Übersetzung)
Stefan Mintert (Fachlektorat und Kommentierung), mintert.com <stefan@mintert.com>

Bei diesem Dokument handelt es sich um eine Übersetzung eines W3C-Textes. Dieser Text ist urheberrechtlich geschützt; bitte beachten Sie die nachfolgenden Hinweise des Originaldokuments. Die Rechte an der Übersetzung liegen bei den Übersetzern und dem Verlag Addison-Wesley. Die Übersetzung hat keine durch das W3C legitimierte, normative Wirkung. Das einzige maßgebliche Dokument ist das englische Original.

Bitte senden Sie Fehler und Korrekturen zur deutschen Fassung an die Übersetzer.

Kommentare der Übersetzer, die als solche gekennzeichnet sind, unterliegen dem Urheberrecht der Übersetzer. Sie sind nicht Bestandteil des Ursprungsdokuments.



Inhaltsverzeichnis

18 Benutzeroberfläche
18.1 Cursor: die 'cursor'-Eigenschaft
18.2 Benutzereinstellungen für Farben
18.3 Benutzereinstellungen für Schriften
18.4 Dynamische Einrahmungen: die 'outline'-Eigenschaft
18.4.2 Einrahmungen und der Fokus
18.5 Vergrößerung

18 Benutzeroberfläche

18.1 Cursor: die 'cursor'-Eigenschaft

'cursor'

Wert:

[[<uri>,]* [auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize | text | wait | help ]] | inherit

Ausgangswert:

auto

Angewendet auf:

Alle Elemente

Vererbt:

Ja

Prozentwerte:

N/A

Medium:

visual, interactive

Diese Eigenschaft gibt den Typ des Cursors an, der für das Zeigegerät angezeigt wird. Die Werte haben die folgenden Bedeutungen:

auto
Das Benutzerprogramm ermittelt den anzuzeigenden Cursor abhängig vom aktuellen Kontext.
crosshair
Ein einfaches Fadenkreuz (z.B. kurze Liniensegmente, die an ein "+"-Zeichen erinnern).
default
Der von der Plattform abhängige Standard-Cursor. Wird häufig als Pfeil dargestellt.
pointer
Der Cursor ist ein Zeiger, der einen Link anzeigt.
move
Kennzeichnet, dass etwas verschoben werden soll.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
Gibt an, dass eine Fensterkante verschoben werden soll. Beispielsweise wird der 'se-resize'-Cursor verwendet, wenn das Verschieben in der rechten unteren Ecke der Box beginnt.
text
Gibt an, dass Text markiert werden kann. Wird häufig auch als I-Balken dargestellt.
wait
Zeigt an, dass das Programm beschäftigt ist und der Benutzer warten soll. Wird häufig als Uhr oder Sanduhr dargestellt.
help
Es steht Hilfe für das Objekt unter dem Cursor zur Verfügung. Wird häufig auch als Fragezeichen oder Sprechblase dargestellt.
<uri>
Das Benutzerprogramm lädt den Cursor aus der durch den URI angegebene Ressource. Wenn das Benutzerprogramm den ersten Cursor aus einer Liste mit Cursorn nicht verarbeiten kann, sollte er versuchen, den zweiten zu verarbeiten usw. Wenn das Benutzerprogramm keine benutzerdefinierten Cursor verarbeiten kann, muss es den generischen Cursor am Ende der Liste verwenden.

Beispiel

P { cursor : url("mything.cur"), url("second.csr"), text; }

18.2 Benutzereinstellungen für Farben

CSS2 ermöglicht nicht nur, Text, Hintergründen usw. vordefinierte Farbwerte zuzuweisen, sondern erlaubt Autoren außerdem, Farben so anzugeben, dass sie in die graphische Umgebung des Benutzers integriert werden. Stilregeln, die Benutzerprioritäten berücksichtigen, bieten deshalb die folgenden Vorteile:

  1. Sie erzeugen Seiten, die in das vom Benutzer definierte Look&Feel passen.
  2. Sie erzeugen Seiten, auf die ein besserer Zugriff möglich ist, weil die aktuellen Benutzereinstellungen möglicherweise eine Behinderung berücksichtigen.

Die für die Systemfarben definierte Wertemenge ist darauf ausgelegt, dass sie vollständig ist. Für Systeme, die über keinen entsprechenden Wert verfügen, sollte der angegebene Wert auf das nächstliegende Systemattribut oder auf eine Standardfarbe abgebildet werden.

Die folgende Liste beschreibt zusätzliche Werte für farbbezogene CSS-Attribute und ihre allgemeine Bedeutung. Jede Farbeigenschaft (z.B. 'color' oder 'background-color') kann einen der folgenden Namen annehmen. Obwohl sie die Groß-/Kleinschreibung nicht berücksichtigen, wird empfohlen, dass die nachfolgend gezeigte gemischte Schreibweise berücksichtigt wird, um die Namen besser lesbar zu machen.

ActiveBorder
Aktiver Fensterrahmen
ActiveCaption
Aktiver Fenstertitel
AppWorkspace
Hintergrundfarbe eines Multiple Document Interfaces
Background
Desktop-Hintergrund
ButtonFace
Schriftfarbe für dreidimensionale Anzeigeelemente
ButtonHighlight
Helle Farbe für dreidimensionale Anzeigeelemente
ButtonShadow
Schattenfarbe für dreidimensionale Anzeigeelemente (für Kanten, die von der Lichtquelle weg zeigen)
ButtonText
Text auf Schaltflächen
CaptionText
Text in Überschriften, Size Boxes und Pfeilfeld der Bildlaufleiste
GrayText
Grau unterlegter (deaktivierter) Text. Diese Farbe wird auf #000 gesetzt, wenn der aktuelle Anzeigetreiber keine durchgängige graue Farbe unterstützt.
Highlight
Elemente, die in einem Steuerelement markiert sind
HighlightText
Text von Elementen, die in einem Steuerelement markiert sind
InactiveBorder
Nicht aktiver Fensterrahmen
InactiveCaption
Nicht aktiver Fenstertitel
InactiveCaptionText
Farbe des Texts in einem nicht aktiven Titel
InfoBackground
Hintergrundfarbe für Tooltip-Steuerelemente
InfoText
Textfarbe für Tooltip-Steuerelemente
Menu
Menühintergrund
MenuText
Text in Menüs
Scrollbar
Grauer Bereich der Bildlaufleiste
ThreeDDarkShadow
Dunkler Schatten für dreidimensionale Anzeigeelemente
ThreeDFace
Schriftfarbe für dreidimensionale Anzeigeelemente
ThreeDHighlight
Farbe für die Hervorhebung von dreidimensionalen Anzeigeelementen
ThreeDLightShadow
Helle Farbe für dreidimensionale Anzeigeelemente (für Kanten, die zur Lichtquelle hin zeigen)
ThreeDShadow
Dunkler Schatten für dreidimensionale Anzeigeelemente
Window
Fensterhintergrund
WindowFrame
Fensterrahmen
WindowText
Text in Fenstern

Beispiel

Um beispielsweise die Hintergrund- und Vordergrundfarben eines Absatzes auf die Vordergrund- und Hintergrundfarben des Benutzerfensters zu setzen, schreiben Sie Folgendes:

P { color: WindowText; background-color: Window }

18.3 Benutzereinstellungen für Schriften

Wie Farben können Autoren auch Schriften so angeben, dass die Systemressourcen der Benutzer genutzt werden. Weitere Informationen finden Sie im Abschnitt über die 'font'-Eigenschaft (15.2.5).

18.4 Dynamische Einrahmungen: die 'outline'-Eigenschaft

Manchmal wollen Stylesheet-Autoren Einrahmungen für visuelle Objekte erstellen wie beispielsweise für Schaltflächen, aktive Formularfelder, Bilder und so weiter, so dass sie hervorgehoben dargestellt werden. CSS2-Einrahmungen unterscheiden sich wie folgt von Rahmen:

  1. Einrahmungen benötigen keinen Platz.
  2. Einrahmungen müssen nicht rechteckig sein.

Die Einrahmungs-Eigenschaften steuern den Stil dieser dynamischen Einrahmungen.

'outline'

Wert:

[<'outline-color'> | | <'outline-style'> | | <'outline-width'> ] | inherit

Ausgangswert:

Siehe einzelne Eigenschaften

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

visual, interactive

'outline-width'

Wert:

<border-width> | inherit

Ausgangswert:

medium

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

visual, interactive

'outline-color'

Wert:

<color> | invert | inherit

Ausgangswert:

invert

Angewendet auf:

Alle Elemente

Vererbt:

Nein

Prozentwerte:

N/A

Medium:

visual, interactive

Die durch die Einrahmungseigenschaften erzeugten Einrahmungen werden „über“ eine Box gezeichnet, das heißt, die Einrahmung befindet sich immer oben und beeinflusst die Position oder die Größe der Box oder irgendwelcher anderer Boxen nicht. Die Anzeige oder das Unterdrücken von Einrahmungen verursacht also kein Neuzeichnen.

Die Einrahmung wird unmittelbar außerhalb der Rahmenkante beginnend gezeichnet.

Einrahmungen müssen nicht rechteckig sein. Ist das Element beispielsweise über mehrere Zeilen umbrochen, ist die Einrahmung der kleinste Umriss, der alle Boxen des Elements beinhaltet. Im Gegensatz zu Rahmen ist die Einrahmung am Ende oder Anfang einer Zeilen-Box nicht geöffnet, sondern immer vollständig geschlossen.

Die 'outline-width'-Eigenschaft akzeptiert dieselben Werte wie 'border-width'.

Die 'outline-style'-Eigenschaft akzeptiert dieselben Werte wie 'border-style', nur dass 'hidden' kein erlaubter Einrahmungsstil ist.

Die 'outline-color'-Eigenschaft akzeptiert alle Farben sowie das Schlüsselwort 'invert'. 'invert' nimmt eine Farbumkehrung der Pixel auf dem Bildschirm vor. Dies ist ein gebräuchlicher Trick, um sicherzustellen, dass der Fokusrahmen sichtbar ist, unabhängig von farbigem Hintergrund.

Die 'outline'-Eigenschaft ist eine zusammenfassende Eigenschaft und setzt 'outline-style', 'outline-width' und 'outline-color'.

Beachten Sie, dass die Einrahmung auf allen Seiten dieselbe ist. Im Gegensatz zu Rahmen gibt es keine 'outline-top'- oder 'outline-left'-Eigenschaft.

Diese Spezifikation definiert nicht, wie mehrere überlappende Einrahmungen oder wie Einrahmungen für Boxen gezeichnet werden, die teilweise von anderen Elementen verdeckt sind.

Hinweis: Weil die Fokuseinrahmung keinen Einfluss auf die Formatierung hat (das heißt, es ist kein Platz mehr dafür im Box-Modell), kann sie möglicherweise andere Elemente auf der Seite überlappen.

Beispiel

Nachfolgend sehen Sie ein Beispiel, das eine dicke Einrahmung um ein BUTTON-Element zeichnet:

BUTTON { outline-width : thick }

Mit Hilfe von Skriptprogrammen kann die Breite der Einrahmung dynamisch verändert werden, ohne ein Neuzeichnen zu verursachen.

18.4.2 Einrahmungen und der Fokus

Graphische Benutzeroberflächen können Einrahmungen um Elemente verwenden, um dem Benutzer damit anzuzeigen, welches Element auf der Seite den Fokus hat. Diese Einrahmungen werden zusätzlich zu irgendwelchen Rahmen angezeigt, und das Aktivieren oder Deaktivieren der Einrahmungen sollte nicht bewirken, dass das Dokument neu gezeichnet werden muss. Der Fokus ist erforderlich für die Benutzerinteraktion in einem Dokument (z.B. für die Eingabe von Text, die Auswahl einer Schaltfläche usw.). Benutzerprogramme, die die interaktive Mediengruppe unterstützen, müssen beobachten, wo sich der Fokus befindet, und sie müssen außerdem den Fokus darstellen. Das kann auch mit Hilfe dynamischer Einrahmungen erfolgen, in Kombination mit der Pseudo-Klasse :focus.

Beispiel

Um beispielsweise eine dicke schwarze Linie um ein Element zu zeichnen, wenn es den Fokus hat, und eine dicke rote Linie, wenn es aktiv ist, können die folgenden Regeln angewendet werden:

:focus  { outline: thick solid black }
:active { outline: thick solid red }

18.5 Vergrößerung

Die CSS Working Group hat beschlossen, dass die Vergrößerung eines Dokuments oder von Teilen eines Dokuments nicht über Stylesheets festgelegt werden sollte. Benutzerprogramme können eine solche Vergrößerung auf unterschiedliche Weise unterstützen (z.B. größere Bilder, lautere Sounds usw.).

Wenn Benutzerprogramme eine Seite vergrößern, sollten sie die Beziehungen zwischen positionierten Elementen beibehalten. Ein Comic-Strip könnte beispielsweise aus Bildern mit überlagerten Textelementen zusammengesetzt werden. Wenn diese Seite vergrößert wird, sollte ein Benutzerprogramm den Text weiterhin innerhalb der Sprechblasen des Comic-Strips anzeigen.