Texteigenschaften

Texteigenschaften werden von allen aktuellen Browsern (und der vorhergehenden Generation) zumeist problemlos interpretiert.
  		 

font-family

Gibt an, welche Schriftart,- familie oder generische Schriftart zur Darstellung der Texte eines Elements angewendet werden soll.

Standardeinstellung: Standardschrift des Browsers
Vererbung: ja
Element: alle Elemente

Beispiel:
div {font-family: Courier, "Courier New", monospace}

<div>

So sieht ein solch ausgezeichneter Text aus. 

</div>

Als Wert können mehrere Schriftarten angegeben werden, die Reihenfolge bestimmt die Wertigkeit. Da nur auf Zeichensätze zugegriffen werden kann, die auf dem Clientsystem vorinstalliert sind, können daher alternative Schriften angegeben werden, die im Fall einer nicht vorhandenen ersten Wahl eingesetzt werden können. Schriftalternativen werden durch Kommata voneinander getrennt, Schriftbezeichnungen, die aus mehr als einem Wort bestehen (z.B. Times New Roman) werden in Anführungszeichen gesetzt. Falls keine der expizit aufgeführten Schriften zur verfügung stehen sollte, kann als Alternative eine generische Schriftart angegeben werden. Fünf generische Schriftarten wurden festgelegt:

serif: eine Serifenschrift wird verwendet

sans-serif: eine serifenlose Schrift wird verwendet

monospace: eine Schrift mit gleich breiten Buchstaben wird verwendet, zumeist in der "Schreibmaschinen-Optik".

cursive: Eine schräg gestellte Schrift wird verwendet (funktioniert bedingt)

fantasy: eine Schmuckschrift kommt zum Einsatz (funktioniert bedingt, wenn dann schwer zu kontrollierendes Ergebnis)

Weit verbreitet Schriften sind: Arial, Helvetica, Verdana, Trebuchet MS, Courier, Courier new, Comic Sans MS, Lucidia Console, Impact, Tahoma, Times.

demo: body {font-family: Times, "Times New Roman", serif}
  

 
font-style

Gibt an, welcher Schriftstil zur Darstellung der Texte angewendet werden soll.

Werte:
normal
italic
oblique

Standardeinstellung: normal
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="font-style: italic">

So sieht ein solch ausgezeichneter Text aus.

</div>

Falls bei der Verwendung von italic kein kursiver Schriftschnitt vorliegen sollte, wird der bestehende Schriftschnitt vom Browser schräg gestellt. Da bei der Verwendung von oblique eine Schrift immer nur im Browser schräg gestellt wird, ist der Wert italic grundsätzlich zu empfehlen.

demo: strong {font-style: italic}

 

 
font-weight

Gibt an, wie fett ausgezeichnete Texte angezeigt werden sollen.

Werte:
normal
bold
bolder
lighter

oder als numerische Angabe: 100, 200, 300, 400 (=normal), 500, 600, 700, 800, 900

Standardeinstellung: normal (oder 400)
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="font-weight: 700">

So sieht ein solch ausgezeichneter Text aus.

</div>

demo: strong {font-weight: normal}

 

 
font-size

Gibt an, wie groß ausgezeichnete Texte angezeigt werden sollen.

Werte:
numerische Angabe
prozentuale Angabe
xx-small
x-small
small
medium
large
x-large
xx-large
large
smaller

Standardeinstellung: medium
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="font-size: 18pt">

So sieht ein solch ausgezeichneter Text aus.

</div>

Prozentuale Angaben gehen immer von der Größe des übergeordneten Elemts aus. Wurde z.B. für <body> eine Schriftgröße von 12pt angegeben, für <h1> eine Größe von 150%, würde die Überschrift also mit 18pt dargestellt werden. Wird im CSS die Schriftgröße im <body> auf 16pt umgestellt, ändert sich die Überschrift durch die Prozentangabe automatisch mit (auf 24pt). Wird keine übergeordnete Angabe zur Schriftgröße gemacht, wird der Prozentwert ausgehend von der Browsereinstellung berechnet.

Für numerische Eingaben stehen in CSS eine ganze Reihe von Maßeinheiten zur Verfügung.

demo: p {font-size: 10pt}
 

 
font-variant

Gibt an, ob der ausgezeichnete Texte in Kapitälchen angezeigt werden soll.

Werte:
normal
small-caps

Standardeinstellung: normal
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="font-variant: small-caps">

So sieht ein solch ausgezeichneter Text aus.

</div>

demo: h1 {font-variant: small-caps}
 

 
text-decoration

Gibt an, ob der ausgezeichnete Texte zusätzliche, hervorhebende Erweiterungen erhalten soll..

Werte:
none
underline (unterstrichen)
overline (Strich über Text)
line-through (durchgestrichener Text)
blink (blinkender Text)

Standardeinstellung: none
Vererbung: eigentlich nicht, teilweise aber doch (!)
Element: alle Elemente

Beispiel:
<div style="text-decoration: line-through">

So sieht ein solch ausgezeichneter Text aus.

</div>

<div style="text-decoration: overline">

So sieht ein solch ausgezeichneter Text aus.

</div>

<div style="text-decoration: blink">

So sieht ein solch ausgezeichneter Text aus.

</div>

Mit Hilfe dieser Eigenschaften ist es z.B. möglich, unter Verwendung von Pseudo-Klassen Verweise ohne Unterstrich darzustellen, oder den Unterstrich bei MouseOver anzeigen zu lassen. Reiner Fließtext innerhalb eines XHTML-Dokuments sollte zur Hervorhebung niemals unterstrichen (underline) werden, da sonst der Eindruck eines (nicht korrekt funktionierenden) Verweises entsteht.

demo: h2 {text-decoration: overline}
 
 

 
text-transform

Mit text-transform kann die Groß-/Klein-Schreibweise von Fließtext geändert werden.

Werte:
none
uppercase (alle Buchstaben werden zu Versalien)
lowercase (alle Buchstaben werden zu Minuskel)
capitalize (der erste Buchstabe jedes Wortes wird versal dargestellt)

Standardeinstellung: none
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="text-decoration: uppercase">

So sieht ein solch ausgezeichneter Text aus.

</div>

<div style="text-transform: lowercase">

So sieht ein solch ausgezeichneter Text aus.

</div>

<div style="text-transform: capitalize">

So sieht ein solch ausgezeichneter Text aus.

</div>

demo: h2 {text-transform:lowercase}
 
 

 
word-spacing

Mit word-spacing kann der Abstand zwischen den einzelnen Wörtern geändert werden.

Werte:
normal
Abstand mit relativen oder absolutem Wert

Standardeinstellung: normal
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="word-spacing: 10px">

So sieht ein solch ausgezeichneter Text aus.

</div>

Achtung: Wird vom IE 5 Windows nicht dargestellt.

demo: h1 {word-spacing: 20pt}
 

 
letter-spacing

Mit letter-spacing kann der Abstand zwischen den einzelnen Buchstaben geändert werden.

Werte:
normal
Abstand mit relativen oder absolutem Wert

Standardeinstellung: normal
Vererbung: ja
Element: alle Elemente

Beispiel:
<div style="letter-spacing: 3px">

So sieht ein solch ausgezeichneter Text aus.

</div>

demo: .metapher {letter-spacing: 2pt}
Aufgabe: aufgabe_text.html  (1.Teil)

Informationen zur Änderung der Textfarbe sind im Dokument "Farben" zu finden.