Textgestaltung
Textformatierung
Für die Positionierung und Gestaltung von (Fließ-)Text bietet css diese Möglichkeiten an:Beispiel - Positionierung von Text in CSS
Texteinrücken:
text-indent
Textpositionierung:
text-align: left | center | right | justify
Zeilenhöhe:
(unsichbarer Rahmen oben und unten bei jeder Zeile) line-height
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
text-indent
Textpositionierung:
text-align: left | center | right | justify
Zeilenhöhe:
(unsichbarer Rahmen oben und unten bei jeder Zeile) line-height
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
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
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:left;
white-space:pre;
word-spacing:normal;
letter-spacing:0.6em;
text-decoration:underline overline;
text-transform:uppercase;
}
text-indent:0.6cm;
text-align:left;
white-space:pre;
word-spacing:normal;
letter-spacing:0.6em;
text-decoration:underline overline;
text-transform:uppercase;
}
CSS lernen - einfach und schnell
Verschaff Dir einen Überblick
Wissenswertes, Hilfestellung und Lösungen rund um das Thema CSS:A
Absolute und relative MaßeAbgerundete Ecken
Anordnung
B
background-attachmentbackground-position
C
cm (Zentimeter)Color
Contextual Selectors
CSS Formatierungen
CSS-Sprites
D
Definition mehrerer TagsE
Ebenen / LayerEcke / Eckenrundung
Einbindung CSS
em
ex
Externe CSS-Datei
F
FarbenFarbcodes
Farbnamen
Farbverlauf
Fixierter, fester Hintergrund
G
GradientGrundlagen
H
HintergrundbildHintergrundbild Positionierung
Hover-Effekt über Hintergrundbild
I
IDsin (Inch)
Interne CSS-Datei
K
KlassenKlassifizierung
L
Layer / EbenenListen
P
pcPosition
Positionierung Hintergrundbild
pt (Pica)
px (Pixel)
R
Rahmen FormatierungReihenfolge von Elementen
Relative und absolute Maße
repeat Möglichkeiten
Runde Ecken
S
SchriftformatierungScrollbarer Hintergrund
Sichtbarkeit
Sprites
Stylesheet
T
TextflussTextgestaltung
U
Überhängende InhalteÜbereinander liegende Elemente
V
VererbungVerlauf / Verläufe
