Textgestaltung
Textformatierung
Für die Positionierung und Gestaltung von (Fließ-)Text bietet css folgende Möglichkeiten an:Beispiel - Positionierung von Text in CSS
Texteinrücken: text-indent: XX
Textpositionierung: text-align: left | center | right | justify
Zeilenhöhe: (unsichbarer Rahmen oben und unten bei jeder Zeile) line-height: XX
Wort-Abstand: word-spacing
Zeichen-Abstand: letter-spacing
Veränderung der Groß-/Kleinschreibung: text-transform: uppercase | lowercase | capitalize | none
Text-Decoration: none | underline | overline | line-through | blink
Textpositionierung: text-align: left | center | right | justify
Zeilenhöhe: (unsichbarer Rahmen oben und unten bei jeder Zeile) line-height: XX
Wort-Abstand: word-spacing
Zeichen-Abstand: letter-spacing
Veränderung der Groß-/Kleinschreibung: text-transform: uppercase | lowercase | capitalize | none
Text-Decoration: none | underline | overline | line-through | blink
Textausrichtung
Die vertikale Ausrichtung von Text kann in CSS mit Hilfe folgender Befehle erfolgen:
vertical-align baseline | sub | super | bottom | text-bottom | middle | top | text-top | <Prozentwert>
Wertdefinition bei vertikaler Textausrichtung in CSS
baseline: Ausrichtung des Elements an der Grundlinie des Elternelements
sub/super: Setzt das entsprechende Element entsprechend unter bzw. über die Grundlinie des Elternelements
bottom/text-bottom: Richtet ein Element unterhalb der Grundlinie aus
middle: Richtet ein Element zentriert aus
text-top: Richtet ein Element oberhalb der Grundlinie aus
<Prozentwert>: Richtet ein Element relativ zur Grundlinie aus, wobei ein positiver Wert oberhalb, ein negativer Wert unterhalb der Grundlinie bedeutet
sub/super: Setzt das entsprechende Element entsprechend unter bzw. über die Grundlinie des Elternelements
bottom/text-bottom: Richtet ein Element unterhalb der Grundlinie aus
middle: Richtet ein Element zentriert aus
text-top: Richtet ein Element oberhalb der Grundlinie aus
<Prozentwert>: Richtet ein Element relativ zur Grundlinie aus, wobei ein positiver Wert oberhalb, ein negativer Wert unterhalb der Grundlinie bedeutet
Durch die Kombination dieser verschiedenen CSS Gestaltungselemente lassen sich Text nahezu beliebig verändern:
Beispiel - Textgestaltung in css
p {
text-indent: 0.6cm;
text-align: center;
white-space: pre;
word-spacing: normal;
letter-spacing: 0.3em;
text-decoration: underline overline;
text-transform: uppercase;
}
text-indent: 0.6cm;
text-align: center;
white-space: pre;
word-spacing: normal;
letter-spacing: 0.3em;
text-decoration: underline overline;
text-transform: uppercase;
}