Textformatierung in CSS erklärt

Der Umgang mit Text ist die häufigste Aktivität in einer Computeraufgabe. Mit der Textformatierung in CSS können Sie verschiedene Eigenschaften von Text anpassen. Die Textformatierung hat eine lange Liste von Eigenschaften, die das Verhalten des Textes verändern.

Die Textformatierung umfasst Eigenschaften wie Farbe, Ausrichtung, Dekoration, Eindrückung, Abstand und vieles mehr. Der Zweck dieses Leitfaden.

Welche Art von Textformatierung in CSS wird unterstützt?

Die Textformatierung wird durch verschiedene Eigenschaften unterstützt, die hier beschrieben werden, und die Syntax dieser Eigenschaften ist ebenfalls definiert.

Ausrichtung: Es richtet den Text mit der unten geschriebenen Syntax aus.

Selector text-align: value;

Der Wert von Text-Align kann sein:

• Rechts: Text wäre auf der rechten Seite des Elements
• Links: Der linke Rand der Linien ist gerade
• Mitte: Der Text würde in der Mitte und linken/rechten Rändern gleich sein, ist gleich
• Justify: Der Text ist so angeordnet, dass die linken und rechten Ränder gerade und gleich gehalten werden

Beispiel:

Text ist links ausgerichtet

Der Text ist zentriert ausgerichtet

Text ist rechts ausgerichtet

Text ist gerechtfertigt

Es werden vier CSS -Klassen erstellt, und die linke Klasse repräsentiert die linke Ausrichtung des Textes. In ähnlicher Weise werden die „Recht“, „Cent“ und „Just“ verwendet, um den Text nach rechts auszurichten, zentriert und gerechtfertigt.

Ausgang

Buchstaben-Abstand: Es wird verwendet, um den Raum zwischen Buchstaben eines Wortes in PX, EM, MM oder CM zu definieren.

Selector Buchstabenabstand: Wert;

Beispiel: Um die Funktionalität der Buchstabenabstandseigenschaft zu überprüfen, haben wir den folgenden Code verwendet.

Der Buchstabenabstand ist 5px

Der Buchstabenabstand ist 0.5em

Der Buchstabenabstand ist 1 mm

Im obigen Code werden die CSS-Klassen erstellt, um den Buchstabenbereich in PX, EM und MM festzulegen.

Ausgang

Wortabstand: Diese Eigenschaft wird verwendet, um Platz zwischen den Wörtern einer Zeile hinzuzufügen.

Selector Wortabstand: Wert;

Beispiel: Die Wortabstandseigenschaft wird unter Verwendung der folgenden Codezeilen bereitgestellt.

Jedes Wort wird durch 10px getrennt

Eine CSS -Klasse wird erstellt, um einen 10px -Raum zwischen den Wörtern zu erstellen.

Ausgang

Farbe: Dies definiert die Farbe des Textes, das mit Hilfe der folgenden Syntax verwendet wird.

Selector Farbe: Wert;

Der Wert der Farbeigenschaft kann sein,

• Name der Farbe i.e., rot orange
• Hexadezimalwert der Farbe (#00000)

Beispiel: Die unten angegebenen Bereitstellung wird ausgeübt, um die Farbe des

Text zu rot.

Willkommen bei LinuxHint

Ausgang

Dekoration: Die Dekoration wird durchgeführt, um Aktionen auf Text wie Unterstaat, Zeile, Überaus und keine auszuführen.

Selector Textdekoration: Wert;

Der Wert kann einer der folgenden sein

• Zeile: Eine horizontale Linie wird auf den Text platziert
• Überlinie: Eine Zeile wird über dem Text gezogen
• Unterstreich: Die horizontale Linie ist unterhalb der Linie platziert
• Keine: Keine Linie würde platziert werden

Beispiel:

unterstrichener Text

Zeile durch Text

überlagerter Text

Der obige Code umfasst drei CSS -Klassen und drei Absätze. Die CSS -Klassen „UN“, „LT“ und „OV“ stellen den Dekorationsstil dar und werden in drei verschiedenen Absätzen verwendet.

Ausgang

Vertiefung: Die CSS -Eindrückung wird durchgeführt, um die erste Zeile des Absatzes einzureichen (den Text am Rande am Rande am Rande zu halten).

Selector textindent: value;

Der Wert kann in mm, cm, em, px sein.

Beispiel: Hier haben wir die Einklebungseigenschaft (in PX, EM und CM) auf verschiedene Absätze im Code angewendet.

Die Einrückung ist auf 25px eingestellt

Die Einrückung ist auf 1EM eingestellt

Die Einrückung ist auf 1 cm eingestellt

Der obige Code enthält drei CSS.

Ausgang

Transformation: Der Fall des Textes wird unter Verwendung der Transformationseigenschaft gefolgt von der hier angegebenen Syntax verwaltet.

Selector text-transform: value;

Der Wert kann einer der folgenden sein

• Großbuchstaben: Um die Buchstaben in Großbuchstaben zu wechseln
• Kleinbuchstaben: Wechselt die Buchstaben in Kleinbuchstaben
• Kapitalisieren: Es wird verwendet, um den ersten Buchstaben jedes Wortes zu profitieren

Beispiel: Sie können die Funktionalität der Texttransformation über den folgenden Code überprüfen.

Konvertieren in niedrigere Fall

Konvertieren in Oberfall

Das erste Wort wird kaputt sein

Der oben festgelegte Code enthält drei CSS.

Ausgang

Zeilenhöhe: Die Höhe der Textlinien kann unter Verwendung der Linienhöhe in PX, CM, EM und MM definiert werden.

Selector Zeilenhöhe: Wert;

Beispiel: Die folgenden Codezeilen zeigen die Verwendung der Linienhöhe, um die Höhe der Textzeilen anzupassen.

Die Linienhöhe beträgt 25px

Linienhöhe ist 2EM

Die Linienhöhe beträgt 1 cm

Der obige Code verwendet die Zeilenhöhe in PX, EM und CM. Darüber hinaus ist der Grenzstil der Absätze auf solide (um das Konzept der Linienhöhe besser zu verstehen).

Ausgang

Textrichtung: Die Schreibrichtung des Textes in CSS kann mithilfe der Direction -Eigenschaft verwaltet werden.

Selector Richtung: Wert;

Der Wert kann RTL (von rechts nach links), LTR (von links nach rechts), initial () und erben (aus dem übergeordneten Element abgerufen) sein.

Beispiel:

Die Textrichtung ist vonach nach links

Es wird eine CSS -Klasse erstellt, mit der Sie die Richtung von rechts nach links einstellen können.

Ausgang

Textschatten: Der Schatten des Textes wird geübt, das Schatten mit verschiedenen Eigenschaften hinzufügt.

Selector text-shadow: value1 value2 value3;

Die Werte werden wie folgt beschrieben

• Value1 repräsentiert die horizontale Größe des Schattens
• Value2 definiert die vertikale Größe des Schattens
• Value3 wird für Farben des Schattens verwendet und kann genau Name der Farbe, der RGB/RGBA -Kombination einer Farbe, dem Hex -Wert einer Farbe, sein.

Beispiel: Der folgende Code legt einen farbigen vertikalen und horizontalen Schatten fest.

Ein roter Schatten von 1PX wird gegeben

Es wird eine CSS -Klasse mit dem Namen „SH“ erstellt, die einen 1px dicken roten Schatten auf dem bereitgestellten Text erzeugt.

Ausgang

Nach diesem Abschnitt hätten Sie das Verständnis verschiedener Textformatierungseigenschaften erhalten, die von CSS bereitgestellt wurden.

Abschluss

Mit der in CSS formatierenden Textformatierung können Sie den Text mit den Eigenschaften verschönern. Dieser Artikel bietet die Arbeit und Verwendung aller von CSS unterstützten Textformatierungseigenschaften. Jede Eigenschaft wird von der folgenden Syntax geleitet, und es wird auch ein Beispiel bereitgestellt, um ihre Verwendung zu verstehen. Mit diesem umfassenden Leitfaden können Sie alle Arten möglicher Textformatierung in CSS anwenden.

Bleiben Sie mit LinuxHint in Verbindung, um mehr informative Leitfäden auf CSS und HTML zu erhalten.