CSS-Referenz
3. Text
- 3.1 text-decoration
- 3.2 text-transform
- 3.3 word-spacing
- 3.4 letter-spacing
- 3.5 text-shadow (entfernt in 2.1)
- 3.6 cursor
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.
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.
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.
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.
3.5 text-shadow
Definition eines Schatteneffekts für Text [nur CSS2].
Diese Eigenschaft wurde mit der CSS2.1-Spezifikation wieder entfernt.
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 Werthand);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.
