Beim Schreiben eines Artikels oder Dokuments benötigen wir oft einige Zeichen in bestimmten Fällen. Auf einer Webseite wird das HTML-Element, dessen Text transformiert werden soll, mit der CSS-Eigenschaft „ Text-Transformation “. Diese Eigenschaft spart auch Zeit, da nach dem Hinzufügen aller Zeichen deren Fall sofort umgewandelt werden kann.

In diesem Beitrag erfahren Sie, wie wir Textfälle mit CSS ändern können. So lass uns anfangen!

Wie schreibt man Groß- und Kleinbuchstaben mit CSS?

Im CSS ist das „ Text-Transformation ”-Eigenschaft steuert die Großschreibung des Textes. Es wird auch verwendet, um Text in Groß- oder Kleinbuchstaben umzuwandeln.

text-transform Eigenschaftswerte

Die möglichen Werte der CSS-Eigenschaft text-transform sind unten aufgeführt:

• • „ Großbuchstaben ”: Dieser Wert macht alle Zeichen im Text des Elements groß.
  • „ Kleinbuchstaben ”: Dieser Wert ändert den Text des Elements in Kleinbuchstaben.
  • „ profitieren ”: Dieser Wert ändert den Anfangsbuchstaben jedes Wortes in Großbuchstaben.
  • „ keiner ”: Dieser Wert schränkt den Text des Elements zur Änderung ein.
  • „ Initial ”: Dieser Wert setzt den Standardwert.
  • „ du erbst ”: Dieser Wert setzt seinen Wert von seinem übergeordneten Element.

Analysieren Sie das Beispiel unten!

Beispiel: Text in Groß- und Kleinbuchstaben umwandeln

Fügen Sie zuerst ein div-Element mit dem Klassennamen „ Kasten “. Fügen Sie innerhalb des Hauptteils drei Überschriften-Tags

,

und

hinzu, wobei der Text der Überschrift

vollständig in Großbuchstaben,

in Kleinbuchstaben und das dritte ebenfalls in Kleinbuchstaben geschrieben ist.

Unten ist der HTML-Code:

< div Klasse = 'Kasten' >
< h1 > Kleinbuchstaben: WILLKOMMEN BEI LINUXHINT h1 >
< h2 > Großbuchstaben: Willkommen bei LinuxHint h2 >
< h3 > groß schreiben: willkommen bei linuxhint h3 >
div >

Stilbox div

.Kasten {
Höhe: 200px;
Breite: 80 % ;
Rand: 4px solide #e4cfcf;
Hintergrundfarbe: kadettblau;
Rand: 1px automatisch;
Polsterung: 10px;
}

Das in der obigen HTML-Datei erstellte div ist jetzt mit CSS-Eigenschaften gestaltet, die unten erklärt werden:

• • „ Höhe “ wird zum Einstellen der Höhe des div verwendet.
  • „ Breite “ wird zum Einstellen der Breite des div verwendet.
  • „ Grenze ”-Eigenschaft wird verwendet, um den Rahmen um das Element anzuwenden, der eine Breite von 4 Pixel, eine durchgezogene Linie und die Farbe #e4cfcf hat.
  • „ Hintergrundfarbe “ legt die Hintergrundfarbe des Elements fest.
  • „ Gewinnspanne ”-Eigenschaft passt den Abstand auf jeder Seite des Elements an.
  • „ Polsterung ”-Eigenschaft wird verwendet, um Platz um den Inhalt des div-Elements oder innerhalb des Rahmens des Elements zu erzeugen.

Die folgenden Codeblöcke zeigen an, dass alle Überschriftenelemente mit unterschiedlichen Werten der Texttransformationseigenschaften formatiert sind. Das Element

wird mit der Eigenschaft text-transform angewendet, wobei der Wert auf „ Kleinbuchstaben “:

h1 {
Texttransformation: Kleinbuchstaben;
}

Das

-Element wird mit der text-transform-Eigenschaft angewendet, wobei der Wert auf „ Großbuchstaben “:

h2 {
Texttransformation: Großbuchstaben;
}

Für das Element

wird der Wert der text-transform-Eigenschaft auf „ profitieren “:

h3 {
Texttransformation: Großschreibung;
}

Durch die Bereitstellung des oben genannten Codes wird der Text der ersten Überschrift vollständig in Kleinbuchstaben und der der zweiten Überschrift in Großbuchstaben umgewandelt. Während der erste Buchstabe jedes Wortes in der dritten Überschrift groß geschrieben wird:

Groß! Wir haben erfolgreich gelernt, wie man den Text in Großbuchstaben, Kleinbuchstaben und alle Großbuchstaben umwandelt.

Fazit

Die Text-Transformationseigenschaft von CSS steuert die Großschreibung des Textes und wird verwendet, um die Groß- und Kleinschreibung des Texts des Dokuments zu ändern. Diese Eigenschaft gilt für alle Elemente, wobei die Werte dieser Eigenschaft Großbuchstaben, Kleinbuchstaben, Großbuchstaben oder keine sein können. In diesem Blog wurde das Verfahren zum Konvertieren von Text in Groß- und Kleinbuchstaben mithilfe der CSS-Eigenschaft text-transform erläutert.