Sie sind hier: Startseite -> CSS-Grundlagen -> Textformatierung -> Textumwandlung

CSS-Grundlagen: text-transform

Texttransformation: Umwandlung des Textes

Besonders bei Navigationen möchte man gerne einen Effekt erreichen, bei dem im aktiven Zustand die Begriffe mit Großbuchstaben dargestellt werden, im inaktiven Zustand aber mit normaler Schrift. Das klingt nach komplizierten Effekten, stimmt aber nicht, denn bei CSS ist das ein simpler Befehl. Er kann noch mehr, denn er kann auch den gesamten Text in Kleinbuchstaben anzeigen.

Der Befehl lautet text-transform und er kann in der Einstellung capitalize auch dafür sorgen, dass jedes Wort mit einem Großbuchstaben beginnt. Mit "none" schaltet man die Funktion wieder ab und hat die normale Darstellung von Text.

Eingesetzt wird der Befehl in folgender Weise:

text-transform: uppercase;
text-transform: none

Für Navigationen verwendet man gerne die Einstellung uppercase, wodurch der gesamte Text mit Großbuchstaben dargestellt wird. Lowercase ist das Gegenteil und wird als Stilmittel manchmal verwendet.

ergibt:

text-transform: capitalize;

text-transform: uppercase;

text-transform: lowercase;

text-transform: none;

Ebenfalls interessant:

Schriftart

Informationen über den CSS-Befehl font-family und die Möglichkeit, mittels CSS die Schriftart vorzugeben.

Schriftgröße

Informationen über den CSS-Befehl font-size, mit dem sich die Schriftgröße des Textes oder der Überschriften auf einer Webseite festlegen lassen.

Schriftstil

Informationen über den CSS-Befehl font-style, mit dem in CSS der Schriftstil festgelegt werden kann.

Fettschrift

Informationen über den CSS-Befehl font-weight, mit dem in CSS die Fettschrift eingestellt und formatiert werden kann.

Schriftvariante

Informationen über den CSS-Befehl font-variant, mit dem man Text als Kapitälchen darstellen lassen kann.

Zeichenabstand

Informationen über den CSS-Befehl letter-spacing, durch den man den Zeichenabstand im Text einstellen kann.

Wortabstand

Informationen über den CSS-Befehl word-spacing, wodurch sich der Abstand zwischen den Wörtern mit CSS definieren lässt.

Textdekoration

Informationen über den CSS-Befehl text-decoration, mit dem die Textdekoration mit CSS ermöglicht wird, beispielsweise unterstreichen oder durchstreichen.

[aktuelle Seite]

Textumwandlung

Informationen über den CSS-Befehl text-transform, durch den ein Text in Großbuchstaben oder Kleinbuchstaben umgewandelt werden kann.

Textfarbe

Informationen über den CSS-Befehl color, durch den die Textfarbe mittels CSS bestimmt werden kann.

Textschatten

Informationen über den CSS-Befehl text-shadow, durch den eine Schattierung eines Textes möglich wird.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Textformatierung

Startseite CSS-Grundlagen