zum Artikelanfang springen

CSS-Referenz

3. Text

Unabhängig von der zugewiesenen Schriftart können auch weitere Details der Textdarstellung beeinflusst werden.

3.1 text-decoration

Dient der Definition verschiedener Texteffekte [CSS1]

Beispiel:
a:hover {text-decoration: underline overline;}

Werte none | underline | overline | line-through | blink | inherit
Default none
Vererbt nein

Unterstreichungen (underline) gelten im WWW als Hinweis auf klickbare Elemente wie zum Beispiel Links. Von einem Einsatz zur einfachen Hervorhebung eines Textteils ist also abzuraten.

Der Wert blink wird weder vom Internet Explorer (win und mac) noch vom Safari interpretiert.

^ nach oben

3.2 text-transform

Verändert die Groß- und Kleinschreibung eines Textes [CSS1].

Beispiel:
h1 {text-transform: uppercase;}

Werte capitalize | uppercase | lowercase | none | inherit
Default none
Vererbt ja
  • capitalize – der erste Buchstabe jedes Worts im angesprochenen Text wird groß geschrieben;
  • uppercase – sämtliche Buchstaben im angesprochenen Text werden groß geschrieben; dies kann problematisch sein, denn sobald zum Beispiel ein „ß” vorkommt, stellen die Browser dieses unterschiedlich dar – aus Straße kann dann STRASE, STRASSE oder STRAßE werden;
  • lowercase – sämtliche Buchstaben im Text werden klein geschrieben.

^ nach oben

3.3 word-spacing

Dient der Bestimmung des Wortabstands [CSS1].

Beispiel:
p.hinweis {word-spacing: 10px;}

Werte normal | Längenangabe | inherit
Default normal
Vererbt ja

Die Längenangabe wird zusätzlich zum normalen Wortabstand zugewiesen.

^ nach oben

3.4 letter-spacing

Dient der Bestimmung des Zeichenabstands [CSS1].

Beispiel:
h1 {letter-spacing: 3px;}

Werte normal | Längenangabe | inherit
Default normal
Vererbt ja

Die Längenangabe wird zusätzlich zum normalen Zeichenabstand zugewiesen.

^ nach oben

3.5 text-shadow

Definition eines Schatteneffekts für Text [nur CSS2].

Diese Eigenschaft wurde mit der CSS2.1-Spezifikation wieder entfernt.

^ nach oben

3.6 cursor

Ermöglicht die Veränderung des Mauszeigers [CSS2].

  • Man mag argumentieren, dass diese Eigenschaft hier nicht richtig einsortiert wurde, da sie nicht nur das Erscheinungsbild, sondern tatsächlich das Verhalten der Programmumgebung beeinflusst. Da sie aber auch sonst nirgendwo richtig hineinpasst, wird sie hier als Text-Eigenschaft erfasst.

Beispiel:
input.senden {cursor: pointer;}

Werte URL | auto | default | inherit | crosshair | pointer | move | text | wait | progress | help | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize
Default auto
Vererbt ja
  • auto – die Cursorform wird automatisch gewählt (abhängig vom Elementtyp);
  • default – der Standardcursor des Systems, in der Regel ein Pfeil;
  • url – damit lässt sich theoretisch eine eigene Grafik als Mauszeiger einbinden. Allerdings wird diese Eigenschaft momentan nur vom IE 6/win unterstützt, und auch nur, wenn es sich bei der externen Grafik um ein Windows-Icon vom Typ *.ani, *.cur oder *.ico handelt;
  • crosshair – ein Fadenkreuz;
  • pointer – die Standardanzeige für ein klickbares Element (IE 5+ kennt stattdessen nur den proprietären Wert hand);
  • move – für verschiebbare Elemente;
  • text – für auswählbaren Text;
  • wait – wird häufig durch eine Eieruhr oder eine Armanduhr gekennzeichnet – zeigt an, dass das System beschäftigt ist und keine weiteren Anwender-Eingaben akzeptiert;
  • progress – eine Fortschrittanzeige – das System ist beschäftigt, kann aber weitere Anwender-Eingaben verarbeiten [seit CSS2.1];
  • help – signalisiert, dass für dieses Objekt weiterführende Informationen bzw. Hilfe zur Verfügung stehen (an der Cursor-Position);
  • e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize – die generierten Pfeile kennzeichnen eine „Himmelsrichtung”, in die eine Kante oder Ecke geschoben werden kann, zum Beispiel zum Verkleinern oder Vergrößern eines Elements. Die Begriffe stammen aus dem Englischen: n = north, ne = northeast, nw = northwest usw.

Seitenanfang



(c) 2009 e-workers
http://www.css-cafe.de/
mailto: info@css-cafe.de