10 Jahre
Gespräch vereinbaren
Werbung
FeatValue
Das Kundenportal für Agenturen und Freelancer
Integriert sich in das bestehende Projektmagement-System
Kostenlos registrieren

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

Die cursor-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
Beispiel:

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

Die outline-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

Die outline-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

Die outline-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

Die outline-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 Eigenschaften scrollbar-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

Die scrollbar-3dlight-color-Eigenschaft dient der Beschreibung der 3D-Farbe der Scrollbar eines Elements. Beispiel:

BODY { scrollbar-3dlight-color:red; } 

scrollbar-3dlight-color-Eigenschaft
Darstellung: scrollbar-3dlight-color-Eigenschaft

scrollbar-arrow-color

Die scrollbar-arrow-color-Eigenschaft dient der Beschreibung der (Richtungs-)Pfeilfarbe einer Scrollbar. Beispiel:

BODY { scrollbar-arrow-color:red; } 

scrollbar-arrow-color-Eigenschaft
Darstellung: scrollbar-arrow-color-Eigenschaft

scrollbar-base-color

Die scrollbar-base-color-Eigenschaft beschreibt die Grundfarbe einer Scrollbar. Beispiel:

BODY { scrollbar-base-color:red; } 

scrollbar-base-color-Eigenschaft
Darstellung: scrollbar-base-color-Eigenschaft

scrollbar-darkshadow-color

Die scrollbar-darkshadow-color-Eigenschaft beschreibt die Farbe des dunklen Schattens einer Scrollbar. Beispiel:

BODY { scrollbar-darkshadow-color:red; } 

scrollbar-darkshadow-color-Eigenschaft
Darstellung: scrollbar-darkshadow-color-Eigenschaft

scrollbar-face-color

Die scrollbar-face-color-Eigenschaft beschreibt die Hauptfarbe einer Scrollbar. Beispiel:

BODY { scrollbar-face-color:red; } 

scrollbar-face-color-Eigenschaft
Darstellung: scrollbar-face-color-Eigenschaft

scrollbar-highlight-color

Die scrollbar-highlight-color-Eigenschaft beschreibt die Farbe von hervorgehobenen Teilen einer Scrollbar. Beispiel:

BODY { scrollbar-highlight-color:red; } 

scrollbar-highlight-color-Eigenschaft
Darstellung: scrollbar-highlight-color-Eigenschaft

scrollbar-shadow-color

Die scrollbar-shadow-color-Eigenschaft beschreibt die Farbe des (hellen) Schattens einer Scrollbar. Beispiel:

BODY { scrollbar-shadow-color:red; } 

scrollbar-shadow-color-Eigenschaft
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

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Cookie-Einstellungen

Helfen Sie dabei, uns noch besser zu machen. Wir nutzen Cookies und ähnliche Technologien, um die Website auf Ihre Bedürfnisse anzupassen. Zur Datenschutzerklärung

Auswahl speichern