Grundlagen CSS
Textformatierungen
Nachdem wir nun in der Lage sind, Schriften für unser HTML-Domument per CSS zu gestalten, wollen wir uns jetzt dem nächsten Thema zuwenden: Der Aufteilung unseres Textes in Absätze und deren Formatierung. Denn nichts ist schlimmer, als ein ellenlanger, unübersichtlicher Fliesstext ohne Akzente, der den Leser ermüden lässt und so letztendlich verhindert, dass die Botschaft, die man herüberbringen möchte, nicht mehr ankommt.
Absatzformatierungen
Kapitel 10
Beginnen wir mit der Ausrichtung eines Textabsatzes. Normalerweise, d.h. wenn nichts weiter definiert ist, erscheint ein Text zunächst einmal linksbündig, wie wie es von den Print-Medien eigentlich auch kennen - wir lesen schliesslich ja auch von links nach rechts ;-) .
Für diese - normale - Ausrichtungsmöglichkeiten steht uns die Eigenschaft text-align zur Verfügung, der die Werte left (linksbündig), right (rechtsbündig), center (zentriert) oder justify (Blocksatz) zugewiesen werden können.
Beispiel
(Horizontale Textausrichtung)
Am Beispiel des bekannten "Lorem ipsum"-Blindtextes wollen wir hier einmal die Verschiedenen Wirkungen der Ausrichtungsangaben demonstrieren.
p { text-align:center; }(zentiert)
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
p { text-align:right; } (rechtsbündig)
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
p { text-align:justify; } (Blocksatz)
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Daneben haben wir auch noch die Möglichkeit, einen Text vertikal auszurichten. Die passende Eigenschaft heisst vertical-align und lässt sich mit den Werten top (oben), middle (mittig), bottom (unten), baseline (an der Grundlinie), sub (tiefergestellt) und super (höhergestellt) versehen. Diese Optionen können z.B. sinnvoll sein bei Tabellenzellen.
Zur Formatierung von Absätzen gehört natürlich auch das Zeilenumbruchverhalten. Auch darauf können wir per CSS gezielt Einfluss nehmen:
Durch die Eigenschaft white-space. Als Werte gibt es hier
nowrap (kein automatischer Zeilenumbruch), pre (Umbrüche wie im Editor eingegeben) und normal (normale Textumbrüche).
Beispiel
(Zeilenumbruchverhalten )
Eine mögliche Angabe in der CSS könnte also heissen:
p.keinumbruch { white-space:nowrap; }
Die Angabe hat zur Folge, dass kein automtischer Zeilenumbruch generiert wird.
Manches Mal kann es auch erforderlich werden, einen Absatz dadurch besonders hervorzuheben, dass die Zeilenhöhe verändert wird, das heisst, dass die Abstände zwischen den einzelnen Zeilen verändert (meist erhöht) werden. Zeilenabstände werden durch die Eigenschaft line-height definiert und bekommen als Werte numerische Angaben mitgeliefert, wie wir das bereits kennengelernt haben. Auch hier sind prozentuale Angaben möglich, wobei sich "100%" immer auf die Schriftgrösse bezieht.
Beispiel
(Zeilenhöhe)
Um das zu demonstrieren muss "Lorem ipsum" noch einmal herhalten: Gebe ich nichts weiter in der CSS vor, so erscheint mein Text auch ganz normal:
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Dann definiere ich für die "p-Tags" der Klasse auseinander eine zeilenhöhe von 20px.
p.auseinander { line-height:20px; }
Und wie das dann aussieht, das zeigt das Folgende:
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
Und um das Ganze nun zu vervollständigen, können wir auch Absätze eingerückt darstellen lassen. Mit der Eigenschaft text-indent kann bei Fliesstext eine Einrückung erzeugt werden. Dabei muss eine numerische Angabe gemacht werden, wie stark der Text eingerückt werden soll. Auch hier gelten wieder die bereits bekannten Angaben.
Beispiel
(Texteinrückung)
Meinen "Lorem ispum" möchte ich hier gene einmal um 25px nach links eingerückt erscheinen lassen. Dafür definiere ich in der CSS ein entsprechendes "p-Tag"
p.eingerueckt { text-indent:25px; }
... und bekomme nachstehendes Ergebnis:
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat.
So, für unsere Vordergründe (Texte) brauchen wir ja jetzt auch noch einen Hintergrund. Und wie man DEN gestaltet und beeinflusst...