CSS: Text-Transform – Kleinbuchstaben & Großbuchstaben

Ad

Mit CSS text-transform kannst du Texte in Großbuchstaben darstellen. Du kannst auch nur Kleinbuchstaben schreiben. Es ist auch möglich das nur der erste Buchstabe eines Wortes in Großbuchstaben dargestellt wird.

Wie das geht zeige ich dir in diesem Beitrag.

CSS: Großbuchstaben

Mit text-transform: uppercase kannst du den kompletten Text in Großbuchstaben darstellen

CSS
.csstext{
text-transform:uppercase;
}

Ergebnis

Dieser Text besteht aus Großbuchstaben

Du erhältst einen Text aus nur Großbuchstaben.

CSS: Kleinbuchstaben

Mit text-transform: lowercase kannst du den kompletten Text in Großbuchstaben darstellen

CSS
.csstext{
text-transform:lowercase;
}

Ergebnis

Dieser Text besteht aus Kleinbuchstaben

Du erhältst einen Text aus nur Kleinbuchstaben

CSS: Erster Buchstabe als Großbuchstaben darstellen

Mit text-transform: capitalize wird der jeweilig erste Buchstabe eines Textes mit gross dargestellt.

CSS
.csstext{
text-transform:capitalize;
}

Ergebnis

Der erste Buchstabe hat Grossbuchstaben

Zusammenfassung von Text Transform in CSS

Die CSS-Eigenschaft text-transform steuert die Groß- und Kleinschreibung von Text.

Sie kann verwendet werden, um Text komplett in Großbuchstaben, komplett in Kleinbuchstaben oder mit Großbuchstaben am Wortanfang darzustellen. Des Weiteren kann sie die Lesbarkeit von Ruby verbessern.

  • none: Der Text wird in seiner ursprünglichen Groß- und Kleinschreibung angezeigt.
  • capitalize: Der erste Buchstabe jedes Wortes wird großgeschrieben, der Rest des Wortes bleibt kleinbuchstabig.
  • uppercase: Alle Buchstaben werden großgeschrieben.
  • lowercase: Alle Buchstaben werden kleingeschrieben.

    css        css grossbuchstaben        css kleinbuchstaben   

Über Mich


Weitere Beiträge auf Blogseite.com




Kennst du schon diese Memes?