HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » CSS » Benutzereigenschaften

CSS: Benutzereigenschaften

von Jan Winkler

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.

Anzeige

cursor  nach oben

Die cursor-Eigenschaft beschreibt das Aussehen des Mauszeigers. Dazu können die folgenden Werte notiert werden:

  • auto - automatisch - je nach Browser-/Systemeinstellung
  • crosshair - Fadenkreuz [Beispielbild]
  • default - Standardzeiger [Beispielbild]
  • e-resize - Größenveränderung nach rechts [Beispielbild]
  • help - Hilfe-Mauszeiger [Beispielbild]
  • move - Verschieben-Mauszeiger [Beispielbild]
  • n-resize - Größenveränderung nach oben [Beispielbild]
  • ne-resize - Größenveränderung nach oben-rechts [Beispielbild]
  • nw-resize - Größenveränderung nach oben-links [Beispielbild]
  • pointer - Schreiber [Beispielbild]
  • s-resize - Größenveränderung nach unten [Beispielbild]
  • se-resize - Größenveränderung nach unten-rechts [Beispielbild]
  • sw-resize - Größenveränderung nach unten-links [Beispielbild]
  • URL - Eine mit derURLreferenzierte Cursor-Datei (*.cur, *.ico oder *.ani) wird angezeigt.
  • text - Text-Mauszeiger [Beispielbild]
  • w-resize - Größenveränderung nach links [Beispielbild]
  • wait - Warten-Mauszeiger [Beispielbild]

Beispiel:

TEXTAREA { cursor:pointer; }
BODY { cursor:auto; } 

Konturen  nach oben

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  nach oben

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 andersrum. Beispiel:

P { outline-color:red; } 

outline-style  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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  nach oben

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



« zurück weiter »
Bewerten

 

CSS

.Autor:Jan Winkler.
. Bewertung:
CSS: Benutzereigenschaften HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 450 Beiträge im CSS Forum .

Navigation

Images verschiedener Größe gleich anpassen von Alphavader
Seite verzerrt bei anderen Auflösungen. von Gorgomir
img Stretcher auf fluid Div Container von Thunder1985
Dropdown Menu unter den header von Harburger1887
Kreis um Buchstabe... von karinsch
footer unten platzieren von Alex...
css-anfaengerin - schreibschutz von css-tempate entfernen von kiloberta
Programmierer in Festanstellung oder Freiberuflich gesucht von GP.1226
Button Formatierungs Problem mit Transparentem Hintergrund von redlin
Runde Ecken IE 8 / ohne JavaScript und BG Bilder? von kamikaetzelein
3 Div Elemente ausrichten von Kanikkl
Bilder werden nur im IE angezeigt von Schmido
Contentinhalt vor Linkstruktur im Seitenquelltext von tbtip
Browserunterschiede in Darstellung von CrazyPlaya
Wie sollte ich das aufbauen? von Reelay

zum CSS Forum »


 
     
 

Anzeige