Alle Kappen in CSS - Wie man Groß- und Kleinbuchstaben anläuft

Alle Kappen in CSS - Wie man Groß- und Kleinbuchstaben anläuft

Beim Schreiben eines Artikels oder eines Dokuments benötigen wir häufig einige Charaktere, um in bestimmten Fällen zu sein. Auf einer Webseite wird das HTML -Element, dessen Text transformiert werden muss, mit der CSS -Eigenschaft angewendetTexttransformierung”. Diese Eigenschaft spart auch Zeit so, dass nach dem Hinzufügen aller Zeichen ihr Fall sofort transformiert werden kann.

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

Wie man in Groß- und Kleinschaffen -Text mit CSS verwendet wird?

In CSS, die “TexttransformierungEigentum kontrolliert die Kapitalisierung des Textes. Es wird auch verwendet, um Text in Großbuchstaben oder Kleinbuchstaben umzuwandeln.

Eigenschaftswerte für Texttransformationen

Die möglichen Werte der CSS-Texttransformeigenschaft sind unten aufgeführt:

    • Großbuchstaben”: Dieser Wert lässt alle Zeichen im Text des Elements aktiviert.
    • Kleinbuchstaben: Dieser Wert ändert den Text des Elements in Kleinbuchstaben.
    • profitieren”: Dieser Wert verändert den ersten Buchstaben jedes Wortes, der aktiviert ist.
    • keiner: Dieser Wert beschränkt den Text des Elements zur Änderung.
    • Initial”: Dieser Wert legt den Standardwert fest.
    • erben: Dieser Wert stellt seinen Wert aus seinem übergeordneten Element fest.

Analysieren Sie das folgende Beispiel unten!

Beispiel: Text in Großbuchstaben und Kleinbuchstaben verwandeln

Fügen Sie zunächst ein Div -Element mit dem Klassennamen hinzu “Kasten”. Fügen Sie im Körper drei Überschriften -Tags hinzu

,

, Und

, wo der Text der

Die Überschrift ist alles in Großbuchstaben,

ist in Kleinbuchstaben und der dritte befindet sich auch in Kleinbuchstaben.

Unten finden Sie den HTML -Code:


Kleinbuchstaben: Willkommen bei LinuxHint


Großbuchstaben: Willkommen bei LinuxHint


Kapitalisieren: Willkommen bei LinuxHint



Style Box Div

.Kasten
Höhe: 200px;
Breite: 80%;
Grenze: 4px solide #e4cfcf;
Hintergrundfarbe: CadetBlue;
Rand: 1PX Auto;
Polsterung: 10px;


Die DIV, die in der obigen HTML -Datei erstellt wurde, ist jetzt mit CSS -Eigenschaften gestaltet, die unten erklärt werden:

    • Höhe”Wird verwendet, um die Höhe des Divs festzulegen.
    • Breite”Wird verwendet, um die Breite des Divs festzulegen.
    • GrenzeDie Eigenschaft wird verwendet, um den Rand um das Element zu wenden, das 4px -Breite, durchgezogenen Linientyp und #E4CFCF -Farbe hat.
    • HintergrundfarbeGibt die Hintergrundfarbe des Elements an.
    • RandDie Eigenschaft passt Platz auf jeder Seite des Elements ein.
    • PolsterungDie Eigenschaft wird verwendet, um Platz um den Inhalt des DIV -Elements oder innerhalb des Randes des Elements zu schaffen.

Die folgenden Codeblöcke zeigen, dass alle Überschriftenelemente mit unterschiedlichen Werten der Texttransformeigenschaften gestaltet sind. Der

Das Element wird mit der Eigenschaft Texttransformation mit dem Wert angewendet als “Kleinbuchstaben”:

H1
Texttransformierung: Kleinbuchstaben;


Der

Das Element wird mit der Eigenschaft von Texttransformationen mit dem Wert als "als" angewendet "Großbuchstaben”:

H2
Texttransformierung: Großbuchstaben;


Für

Element, der Wert der Texttransformeigenschaft wird als "festgelegt" festgelegt "profitieren”:

H3
Texttransformation: Kapitalisieren;


Durch die Bereitstellung des oben genannten Code. Während der erste Buchstabe jedes Wortes in der dritten Überschrift aktiviert wird:


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

Abschluss

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