CSS Text (Text)

CSS-Texteigenschaften ermöglichen es Ihnen, sehr effektiv und einfach verschiedene Textstile zu definieren, wie z.B. Farbe, Ausrichtung, Abstand, Dekoration, Transformationen usw.

Text mit CSS formatieren

CSS hat mehrere Eigenschaften zur Definition von Textstilen. Diese Eigenschaften ermöglichen es Ihnen, genau zu steuernZeichen,Leerraum,Wort,Absatzund deren visuelle Erscheinung.

Sie können die folgenden Texteigenschaften des Elements festlegen:

Textfarbe

Die Textfarbe wird durch CSS colorEigenschaftsdefinition.Erfahren Sie mehr über color.

h1　{
　　　　color: #ff0000;
}
p　{
　　　　color: grün;
}

Textausrichtung

Diesetext-alignDiese Eigenschaft wird verwendet, um die horizontale Ausrichtung des Texts zu setzen.

Mögliche Werte für diese Eigenschaft sind: left, right, center, justify und inherit.

h1　{
　　　　text-align:　center;
}
p　{
　　　　text-align:　justify;
}

Textdekoration

Diesetext-decorationDiese Eigenschaft wird verwendet, um Textdekorationen zu setzen oder zu entfernen.

Mögliche Werte für diese Eigenschaft sind: none, underline, overline, line-durchgezogen, blink und inherit. Sie sollten diesen Wert in nicht-verlinkten unterstrichenem Text vermeiden, da dies den Besucher verwirren könnte.

h1　{
　　　　text-decoration:　overline;
}
h2　{
　　　　text-decoration:　line;-durchgezogen;
}
h3　{
　　　　text-decoration:　underline;
}

Entfernen der Standardunterstreichung von Links

Der text-Die decoration-Eigenschaft wird normalerweise verwendet, um die Standardunterstreichung von Hyperlinks zu entfernen. Das vollständige Entfernen der Unterstreichung könnte den Besucher verwirren. Es sei denn, Sie bieten andere visuelle Hinweise, um sie hervorzuheben, und gestalten gleichzeitig den Link-Stil.

Zum Beispiel können Sie Punkte anstatt durchgezogener Linien unter Links verwenden.

a　{
　　　　text-decoration:　none;
　　　　Rahmen-unten:　1px　gepunktet;
}

Textumwandlung

Der text-Die transform-Eigenschaft wird verwendet, um den TextGroß- und Kleinbuchstaben zu setzen.

Es kann verwendet werden, um den Textinhalt eines Elements in Großbuchstaben oder Kleinbuchstaben zu setzen oder die ersten Buchstaben jedes Wortes zu großschreiben. Für mögliche Werte text-Die transform-Eigenschaft hat: none, capitalize, uppercase, lowercase und inherit.

p.up　{
　　　　text-transform:　uppercase;
}
p.cap　{
　　　　text-transform:　capitalize;
}
p.low　{
　　　　text-transform:　lowercase;
}

Texteinzug

Der text-Die eingerückt-Eigenschaft wird verwendet, um den Einzug des ersten Zeilentexts eines Elements zu setzen. Der text-Mögliche Werte für die eingerückt-Eigenschaft sind:Prozentsatz（%），Längeoder inherit.

Das folgende Beispiel zeigt, wie man die erste Zeile eines Absatzes eingerückt darstellt.

p　{
　　　　text-eingerückt:　100px;
}

Wortabstand

word-spacing wird verwendet, um den Abstand zwischen Wörtern zu setzen.

• Der Zeilenabstand kann vom Textausrichtung beeinflusst werden. Überprüfen Sietext-alignEigenschaften.

• Wenn Leerzeichen beibehalten werden, wird jeder Leerzeichensatz vom Wortabstand beeinflusst. Siehe CSS white-spaceEigenschaften.

Der word-Die möglichen Werte des Attributes spacing sind：length（Specify the spacing to be inserted between words）normal und inherit.

p.one　{
　　　　word-spacing:　20px;
}
p.two　{
　　　　word-spacing:　20px;
　　　　text-align:　justify;
}
p.three　{
　　　　word-spacing:　20px;
　　　　white-space:　pre;
}

Zeichenabstand

Dieseletter-spacingAttribute wird verwendet, um den zusätzlichen Abstand zwischen Textzeichen zu setzen.

Die möglichen Werte dieses Attributes sind：length（Specify default character spacing normal as well as additional spacing to be inserted between characters）und inherit.

h1　{
　　　　letter-spacing:　-3px;
}
p　{
　　　　letter-spacing:　10px;
}

Zeilenabstand

Dieseline-heightDefiniert die Höhe einer Textzeile (auch bekannt alsLead）。

Die möglichen Werte dieses Attributes sind：Prozentsatz（%），Länge,Anzahl，normal und inherit.

p　{
　　　　line-height:　1.2;
}

Wenn der Wert eine Zahl ist, wird die Zeilenhöhe durch das Multiplizieren der Schriftgröße des Elements mit der Zahl berechnet. Prozentsätze sind相对于元素的字体大小.

Wenn line-Der Wert der Eigenschaft height ist größer alsfont-sizeWert des Elements, dann diese Differenz (genannt„Leading“）in zwei Hälften geschnitten (genannt„Halbleading“），und gleichmäßig auf der oberen und unteren Zeilenbox von in verteilt.

p　{
　　　　font-size:　14px;
　　　　line-height:　20px;
　　　　background-color:　#f0e68c;
}

Für mehr Informationen über Textstile sieheSchriftartenundTextbezogeneEigenschaften.