Textformatierung
Dieser Text wird mit einigen Textformatierungseigenschaften gestylt. Die Überschrift verwendet den text-align, text-transform und color Der Absatz ist eingerückt, ausgerichtet ist, und der Abstand zwischen den Zeichen angegeben wird. Die Unterstreichung dieser farbigen entfernt "Probieren Sie es selbst" Link.
Textfarbe
Die color Eigenschaft wird verwendet , um die Farbe des Textes zu setzen.
Mit CSS wird eine Farbe am häufigsten angegeben durch:
- ein Farbname - wie "red"
- ein HEX - Wert - wie "#ff0000"
- ein RGB - Wert - wie "rgb(255,0,0)"
Schauen Sie sich CSS Farbwerte für eine vollständige Liste der möglichen Farbwerte.
Die Standard-Textfarbe für eine Seite wird im Körper Selektor definiert.
 | Hinweis: Für die W3C - konforme CSS: Wenn Sie die definieren color Eigenschaft, müssen Sie auch die definieren background-color - Eigenschaft. |
|---|
Textausrichtung
Die text-align Eigenschaft ist die horizontale Ausrichtung eines Textes eingestellt.
Ein Text kann links- oder rechtsbündig, zentriert oder gerechtfertigt werden.
Das folgende Beispiel zeigt Zentrum ausgerichtet ist, und links und rechts ausgerichteten Text (linke Ausrichtung ist Standard, wenn die Textrichtung von links nach rechts und rechts Ausrichtung ist Standard, wenn die Textrichtung von rechts nach links):
Beispiel
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
} Versuch es selber " Wenn die text-align - Eigenschaft auf "justify" , wird jede Zeile gestreckt , so dass jede Zeile die gleiche Breite hat, und die linken und rechten Ränder sind gerade (wie in Zeitschriften und Zeitungen):
Textdekoration
Die text-decoration Eigenschaft wird verwendet , Dekorationen von Text zu setzen oder zu entfernen.
Der Wert text-decoration: none; wird oft zu entfernen Unterstreichungen von Links verwendet:
Die anderen text-decoration Werte werden verwendet , um Text zu dekorieren:
Beispiel
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
} Versuch es selber " | Hinweis: Es ist nicht zu unterstreichen Text empfohlen, kein Link, da dies oft den Leser verwirrt. |
|---|
Text Transformation
Die text-transform Eigenschaft wird in einem Text Groß- und Kleinbuchstaben angeben.
Es kann alles in Groß- oder Kleinbuchstaben zu drehen, oder nutzen Sie den ersten Buchstaben jedes Wortes verwendet werden:
Beispiel
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
} Versuch es selber " Texteinrückung
Der text-indent Eigenschaft wird verwendet , um den Einzug der ersten Zeile eines Textes zu spezifizieren:
Buchstaben-Abstand
Der letter-spacing Eigenschaft wird verwendet , um den Raum zwischen den Zeichen in einem Text zu spezifizieren.
Das folgende Beispiel zeigt, wie man den Abstand zwischen den Zeichen zu erhöhen oder zu verringern:
Zeilenhöhe
Die line-height Eigenschaft wird verwendet , um den Abstand zwischen den Zeilen zu spezifizieren:
Textrichtung
Die direction Eigenschaft wird die Textrichtung eines Elements zu ändern:
Wortabstand
Der word-spacing Eigenschaft wird verwendet , um den Raum zwischen den Wörtern in einem Text zu spezifizieren.
Das folgende Beispiel zeigt, wie man den Abstand zwischen den Wörtern zu erhöhen oder zu verringern:
Mehr Beispiele
Deaktivieren Sie Textumbruch innerhalb eines Elements
Dieses Beispiel zeigt, wie Textumbruch in einem Element zu deaktivieren.
Vertikale Ausrichtung eines Bildes
Dieses Beispiel zeigt, wie die vertikale align eines Bildes in einem Text zu setzen.
Schatten hinzufügen , um Text
Dieses Beispiel zeigt, wie Schatten, um Text hinzuzufügen.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
Alle CSS Texteigenschaften
| Eigentum | Beschreibung |
|---|---|
| color | Legt die Farbe des Textes |
| direction | Gibt die Textrichtung / Schreibrichtung |
| letter-spacing | Erhöht oder verringert den Abstand zwischen den Zeichen in einem Text |
| line-height | Setzt die Zeilenhöhe |
| text-align | Legt die horizontale Ausrichtung des Textes |
| text-decoration | Gibt die Dekoration in Text hinzugefügt |
| text-indent | Legt den Einzug der ersten Zeile in einem Textblock |
| text-shadow | Gibt den Schatteneffekt hinzugefügt, um Text |
| text-transform | Steuert die Aktivierung von Text |
| unicode-bidi | Zusammen mit der Richtung Eigenschaft festlegen oder zurückgeben , ob der Text überschrieben werden sollte mehrere Sprachen in demselben Dokument zu unterstützen |
| vertical-align | Legt die vertikale Ausrichtung eines Elements |
| white-space | Gibt an, wie weiß-Raum innerhalb eines Elements behandelt wird |
| word-spacing | Erhöht oder verringert den Abstand zwischen den Wörtern in einem Text |