CSS: Benutzereigenschaften
In CSS (ab Level 2) sind auch einige Eigenschaften definiert, die die Benutzerschnittstellen (also weniger das Dokument an sich, als vielmehr mehr das Programm, mit dem es dargestellt wird) beschreiben und somit verändern können.cursor
Diecursor-Eigenschaft beschreibt das Aussehen des Mauszeigers. Dazu können die folgenden Werte notiert werden:
-
auto- automatisch - je nach Browser-/Systemeinstellung -
crosshair- Fadenkreuz -
default- Standardzeiger -
e-resize- Größenveränderung nach rechts -
help- Hilfe-Mauszeiger -
move- Verschieben-Mauszeiger -
n-resize- Größenveränderung nach oben -
ne-resize- Größenveränderung nach oben-rechts -
nw-resize- Größenveränderung nach oben-links -
pointer- Schreiber -
s-resize- Größenveränderung nach unten -
se-resize- Größenveränderung nach unten-rechts -
sw-resize- Größenveränderung nach unten-links - URL - Eine mit derURLreferenzierte Cursor-Datei (*.cur, *.ico oder *.ani) wird angezeigt.
-
text- Text-Mauszeiger -
w-resize- Größenveränderung nach links -
wait- Warten-Mauszeiger
TEXTAREA { cursor:pointer; }
BODY { cursor:auto; }
Konturen
Die Kontur eines Elements ist wie ein Rahmen, der sich um dieses Element legt. Die einzigen Unterschiede zu Rahmen sind die folgenden:Platzverbrauch. Konturen verbrauchen keinen Platz sondern werden über die bereits existierenden Elemente rüber gelegt. Dadurch werden auch keine anderen Elemente verschoben oder verdrängt, die angrenzend sind.
Nicht-Rechteckig. Konturen können, im Gegensatz zu Rahmen, auch nicht-rechteckig, also beispielsweise 6- oder 22-eckig sein.
outline-color
Dieoutline-color-Eigenschaft gibt die Farbe der Kontur eines Elements an. Als Wert kann dazu entweder eine Farbe oder invert angegeben werden. invert sagt dabei aus, dass die Farbe des Rahmens genommen und invertiert/umgekehrt werden soll. So wird beispielsweise aus Schwarz Weiß und andersherum. Beispiel:
P { outline-color:red; }
outline-style
Dieoutline-style-Eigenschaft beschreibt den Stil der Konturen eines Elements. Als Werte können dabei die gleichen, wie bei der border-style-Eigenschaft notiert werden. Beispiel:
INPUT { outline-style:solid; }
outline-width
Dieoutline-width-Eigenschaft beschreibt die Breite der Konturen eines Elements. Als Werte können dabei die gleichen, wie bei der border-width-Eigenschaft notiert werden. Beispiel:
INPUT { outline-width:12px; }
outline
Dieoutline-Eigenschaft ist eine Zusammenfassung der drei oben genannten (outline-)Eigenschaften. Als Wert kann hierbei die beliebige Kombination von jeweils einem Wert einer Eigenschaft notiert werden. Beispiel:
P { outine:2px solid; }
DIV { outline:1px red solid; }
Scrollbars
Scrollbars, oder auch Bildlaufleisten genannt, können, dank Microsoft, nun beschrieben werden. Dazu stellt Microsoft die Eigenschaftenscrollbar-3dlight-color, scrollbar-arrow-color, scrollbar-base-color, scrollbar-darkshadow-color, scrollbar-face-color, scrollbar-highlight-color und scrollbar-shadow-color zur Verfügung. Alle 7 beschreiben jeweils die Farbe eines anderen Teils/Stücks der Bildlaufleiste, es wird also eine Farbe als Wert notiert.Bitte beachten Sie, dass nach CSS Level 1 nur die folgenden (HTML-)Elemente eine Scrollbar haben (können):
body, textarea, bdo, applett, div, embed und object. Nach CSS Level 2 können allerdings alle Elemente eine Scrollbar erhalten. Dies wird dank der overflow-Eigenschaft möglich.scrollbar-3dlight-color
Diescrollbar-3dlight-color-Eigenschaft dient der Beschreibung der 3D-Farbe der Scrollbar eines Elements. Beispiel:
BODY { scrollbar-3dlight-color:red; }
Darstellung: scrollbar-3dlight-color-Eigenschaft
scrollbar-arrow-color
Diescrollbar-arrow-color-Eigenschaft dient der Beschreibung der (Richtungs-)Pfeilfarbe einer Scrollbar. Beispiel:
BODY { scrollbar-arrow-color:red; }
Darstellung: scrollbar-arrow-color-Eigenschaft
scrollbar-base-color
Diescrollbar-base-color-Eigenschaft beschreibt die Grundfarbe einer Scrollbar. Beispiel:
BODY { scrollbar-base-color:red; }
Darstellung: scrollbar-base-color-Eigenschaft
scrollbar-darkshadow-color
Diescrollbar-darkshadow-color-Eigenschaft beschreibt die Farbe des dunklen Schattens einer Scrollbar. Beispiel:
BODY { scrollbar-darkshadow-color:red; }
Darstellung: scrollbar-darkshadow-color-Eigenschaft
scrollbar-face-color
Diescrollbar-face-color-Eigenschaft beschreibt die Hauptfarbe einer Scrollbar. Beispiel:
BODY { scrollbar-face-color:red; }
Darstellung: scrollbar-face-color-Eigenschaft
scrollbar-highlight-color
Diescrollbar-highlight-color-Eigenschaft beschreibt die Farbe von hervorgehobenen Teilen einer Scrollbar. Beispiel:
BODY { scrollbar-highlight-color:red; }
Darstellung: scrollbar-highlight-color-Eigenschaft
scrollbar-shadow-color
Diescrollbar-shadow-color-Eigenschaft beschreibt die Farbe des (hellen) Schattens einer Scrollbar. Beispiel:
BODY { scrollbar-shadow-color:red; }
Darstellung: scrollbar-shadow-color-Eigenschaft
Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.
Weiterlesen: ⯈ Counter & Listen
Über uns
Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project