CSS mit Adi Prinz

Textformatierungen

Textausrichtung, Schriftfarbe, Textgestaltung usw. Gehören zu den Textformatierungen. Die meisten dieser Eigenschaften erinnern an ein Textverarbeitungsprogramm und werden auch so angewendet. Hier finden sie eine Liste der möglichen Textformatierungen.

Eigenschaft	Bedeutung	Mögliche Werte
text-align	horizonztale Textausrichtung	left, right, center, justify (Blocksatz), inherit, initial
text-align-last	Textausrichtung (letzte Zeile bei Blocksatz)	auto, left, right, center, justify, start, end, initial, inherit
vertical-align	vertikale Textausrichtung	baseline, Längenangabe, Prozentangabe, sub, super, top, text-top, middle, bottom,text-bottom, initial, inherit
color	Schriftfarbe	Farbname, Hexadezimal, RGB, RGBA, HSL, HSLA
word-spacing	Wortabstand	normal, Längenangabe (auch negative Werte), initial, inherit
letter-spacing	Zeichenabstand	normal, Längenangabe (auch negative Werte), initial, inherit
text-indent	Zeileneinzug	Längenangabe (auch negative Werte), Prozentwerte, initial, inherit
text-decoration	Textgestaltung	none, underline, overline, line-through, blink, initial, inherit
text-transform	Groß- und Kleinbuchstaben	none, capitalize, uppercase, lowercase, initial, inherit
text-overflow	Text abschneiden	clip, ellipsis, string (Text), initial, inherit
white-space	steuert Zeilenumbrüche	normal, nowrap, pre, pre-line, pre-wrap, initial, inherit
word-break	Zeilenumbruch innerhalb von Wörtern	normal, break-all, keep-all, initial, inherit
word-wrap	Zeilenumbruch bei langen Wörtern	normal, break-word, initial, inherit
hyphens	Silbentrennung	none, manual, auto, initial, inherit
text-shadow	Textschatten	h-shadow(inPixel) v-shadow(inPixel) Weichzeichnereffekt(Zahl auch Minuswerte) color, none, initial, inherit
unicode-bidi	Um direction zu ermöglichen, muss unicode-bidi geschrieben werden	normal, embed, bidi-override, intitial, inherit
direction	Schreibrichtung	ltr, rtl, initial, inherit

text-align, text-align-last

Linksbündig, Rechtsbündig, Zentriert und Blocksatz sind mögliche Textausrichtungen. Mit der Eigenschaft text-align können sie Text ausrichten. Für Blocksatz steht zusätzlich noch das Attribut text-align-last zur Verfügung. text-align-last bestimmt wie die letzte Zeile ausgerichtet wird. Für text-align-last muss man noch proprietäre Eigenschaften verwenden. Beide Eigenschaften sind Vererbbar.

p { 
  text-align: justify; 
  -moz-text-align-last: center;
  text-align-last: center; 
}

Werte für text-align

left: Linksbündig (Standardwert wenn direction ltr ist)
right: Rechtsbündig
center: Zentriert
justify: Blocksatz

Werte für text-align-last

auto: Links (Standardwert)
start: Links wenn direction ltr ist
end: Rechts wenn direction ltr ist
left, right, center, justify: Linksbündig, Rechtsbündig, Zentriert, Blocksatz

vertical-align

vertical-align legt die vertikale Ausrichtung fest, vertical-align wird nicht vererbt.

vertical-align ist nicht dazu geeignet, Blockelemente selbst auszurichten.

img.top { vertical-align: text-top; }

Werte für vertical-align

baseline: Grundlinie des Element ist Grundlinie des Elternelements (Standard)
Prozentwert: Verschiebt ein Element nach oben oder unten (Auch Negativwerte)
Längenangabe: Verschiebt ein Element nach oben oder unten (Auch Negativwerte)
sub: tiefgestellter Text
super: hochgestellter Text
top: am oberen Rand des Elternelements
text-top: am oberen Textrand
middle: mitte zwischen oberen und unteren Rand des Elternelements
bottom: am unteren Rand des Elternelements
text-bottom: am unteren Textrand

word-spacing, letter-spacing

word-spacing bestimmt den Abstand zwischen Wörtern, letter-spacing bestimmt den Abstand zwischen Buchstaben, auch negative Werte sind möglich. Beide Eigenschaften sind Vererbbar.

p { 
  word-spacing: 1px;
  letter-spacing: 1px; 
}

Werte für word-spacing, letter-spacing

Längenangabe: Auch Negativwerte sind erlaubt

text-indent

text-indent erzeugt einen Texteinzug "Erste Zeile". Als Wert stehen Längenangaben und Prozentwerte zur Verfügung, text-indent wird vererbt.

p { text-indent: 50px; }

Werte für text-indent

Längenangabe: Auch Negativwerte sind erlaubt
Prozentangabe: Auch Negativwerte sind erlaubt

text-decoration

Unterstreichen, Übersrich und durchgestrichenen Text erstellen sie mit der Eigenschaft text-decoration, text-decoration wird nicht vererbt. Die Strichfarbe wird automatisch mit der Schriftfarbe erzeugt.

p { text-decoration: underline; }

Werte für text-decoration

underline: Unterstrich
overline: Oberstrich
line-through: Durchgestrichen
blink: Blinkend

text-transform

Großbuchstaben, Kleinbuchstaben, erster Buchstabe groß bestimmen sie mit text-transform, text-transform ist vererbbar.

span { text-transform: uppercase; }

Werte für text-transform

capitalize: erster Buchsabe groß
lowercase: Kleinbuchstaben
uppercase: Großbuchstaben

text-overflow

Was geschieht mit Text, wenn dafür der Platz zu klein ist? Mit text-overflow können sie darauf reagieren. Beachten sie, dass text-overflow nur Sinn macht, wenn die overflow-Eigenschaft des Containers den Wert hidden, scroll oder auto hat. Außerdem muss der automatische Zeilenumbruch durch white-space: nowrap; verboten sein, text-overflow ist nicht vererbbar.

span { text-overflow: ellipsis; }

Werte für text-overflow

clip: Standardwert, Text wird abgeschnitten
ellipsis: (...) zeigt an, dass der Text abgeschnitten wird
string: beuntzerdefinierter Hinweis (hat bei meinen Tests nicht funktioniert)

white-space

white-space bestimmt, wie die im Quelltext enthaltene Zeilenumbrüche und Leerzeichen im Browser dargestellt werden, white-space ist vererbbar.

div { white-space: nowrap; }

Werte für white-space

normal: (Standardwert) Umbrüche werden vom Browser bestimmt
nowrap: keine Umbrüche
pre: Verhalten wie beim pre-Tag von HTML
pre-wrap: Verhalten wie beim pre-Tag von HTML, automatischer Umbruch wenn notwendig
pre-line: Verhalten wie beim pre-Tag von HTML, automatischer Umbruch wenn notwendig, Leerzeichen kollabieren

word-break

word-break regelt den Umbruch innerhalb von Wörtern, word-break ist vererbbar.

div { word-break: break-all; }

Werte für word-break

normal: (Standardwert)
break-all: Umbrüche am Zeilenende
keep-all: Umbrüche am Zeilenende aber nicht bei gleichen Buchstaben

word-wrap

word-wrap regelt den Umbruch von langen Wörtern, word-wrap ist vererbbar.

div { word-wrap: break-word; }

Werte für word-wrap

normal: (Standardwert)
break-word: Umbrüche im Wort

hyphens

hyphens regelt die Silbentrennung in einem Element. Allerdings wird hyphens von aktuellen Browsern nur mäßig unterstützt. Für hyphens muss man noch proprietäre Eigenschaften verwenden hyphens ist vererbbar.

div { 
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
 }

Werte für hyphens

manual: keine Silbentrennung (Standard) bedingte Trennstriche werden beachtet
none: keine Silbentrennung bedingte Trennstriche werden unterdrückt
auto: automatische Silbentrennung, definierte bedingte Trennstriche haben Priorität

Zusätzlich müssen sie für automatische Silbentrennung die Sprache im Element über das HTML-Attribut lang definieren.

<div lang="de">
<!--Inhalt-->
</div>

text-shadow

Jeder der mit MS Word arbeitet kennt Texteffekte. Ähnliche Eigenschaften sind mit dem Attribut text-shadow möglich. Dazu müssen sie nur eine horizontale- und vertikale Ausdehnung definieren. Weichzeichner und Farbangaben sind optional, text-shadow ist vererbbar.

h1 {
    text-shadow: 3px 2px 5x #ff0;
}

Mögliche Werte für text-shadow

none: kein Schatten (Standardwert)
h-shadow: horizontaler Abstand (auch Minuswerte)
v-shadow: vertikaler Abstand (auch Minuswerte)
blur: Weichzeichnungsradius (Standard: 0)
color: Farbangaben (Standard: Schriftfarbe)

unicode-bidi, direction

Diese Eigenschaften steuern die Textrichtung von HTML. Beide Eigenschaften werden nur selten gebraucht und deshalb in diesem Script nicht weiter behandelt.

Hyperlinks

Hyperlinks werden in HTML mit dem a-Element erstellt. Abhängig vom aktuellen Zustand können Links mit verschiedenen Pseudoklassen gestaltet werden. Ein Link kann beispielsweise unbesucht, besucht, mit dem Mauszeiger berührt oder gerade aktiviert sein.

Link-Zustände

a:link: noch nicht besuchter Link
a:visited: bereits besuchter Link
a:hover: Mauszeiger befindet sich über dem Link
a:focus-visible: Link besitzt einen sichtbaren Tastaturfokus
a:active: Link wird gerade aktiviert

Damit sich die Regeln nicht unerwartet überschreiben, sollte bei gleichartigen Selektoren die Reihenfolge :link, :visited, :hover und :active eingehalten werden.

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:hover {
  color: green;
}

a:focus-visible {
  outline: 3px solid orange;
  outline-offset: 3px;
}

a:active {
  color: red;
}

Der Fokusstil sollte nicht ersatzlos entfernt werden, da er die Bedienung mit der Tastatur erleichtert. Weitere Informationen befinden sich im Kapitel Pseudoelemente und Pseudoklassen.

CSS-Text

CSS Module

css mit Adi Prinz