Text in Groß- und Klein mit text-transform

Problem

Sie möchten bestimmte Textteile komplett in Groß- oder Kleinbuchstaben darstellen, ohne hierfür den Text selbst verändern zu müssen. Optional soll jedes Wort mit einem großgeschriebenen Anfangsbuchstaben versehen werden.

Lösung

Verwenden Sie die Eigenschaft text-transform mit einem passenden Wert. Ein Beispiel:

#einleitung {
text-transform: uppercase;
}

Der HTML-Code enthält einen Absatz mit der ID einleitung. Mithilfe der Eigenschaft text-transform kann der Text ohne weitere Änderungen am Quellcode in Großbuchstaben dargestellt werden:

<p id="einleitung">Dies ist die Einleitung ... </p>
<p>Noch mehr Text ... </p>

Mit der neuen CSS3-Pseudoklasse :first-of-type können Sie sich sogar das id-Attribut sparen. Stattdessen schreiben Sie im Stylesheet einfach:

p:first-of-type {
text-transform: uppercase;
}

Diskussion

Im Gegensatz zur Eigenschaft font-variant, mit der Sie Textteile in Kapitälchen darstellen können, sorgt text-transform für eine Umwandlung in Groß- bzw. Kleinbuchstaben. Hierfür gibt es die Werte uppercase (gesamten Text in Großbuchstaben anzeigen), lowercase (Kleinbuchstaben) und capitalize. Während die ersten beiden Werte ganze Wörter verändern, sorgt capitalize dafür, dass jedes Wort in der Darstellung mit einem Großbuchstaben beginnt.