Inhaltsverzeichnis
18 Benutzeroberfläche|
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:
Beispiel
P { cursor : url("mything.cur"), url("second.csr"), text; }
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:
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.
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 }
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).
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:
Die Einrahmungs-Eigenschaften steuern den Stil dieser dynamischen Einrahmungen.
|
Wert: |
[<'outline-color'> | | <'outline-style'> | | <'outline-width'> ] | inherit |
|
Ausgangswert: |
Siehe einzelne Eigenschaften |
|
Angewendet auf: |
Alle Elemente |
|
Vererbt: |
Nein |
|
Prozentwerte: |
N/A |
|
Medium: |
visual, interactive |
|
Wert: |
<border-width> | inherit |
|
Ausgangswert: |
medium |
|
Angewendet auf: |
Alle Elemente |
|
Vererbt: |
Nein |
|
Prozentwerte: |
N/A |
|
Medium: |
visual, interactive |
|
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.
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 }
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.