http://jendryschik.de / archiv / einfuehrung / textformatierung.html

4. Styling von Webseiten

  Schriftformatierung

Textformatierung

Fließtext

Cascading Style Sheets bieten eine Vielzahl von Möglichkeiten, das Layout ihres Fließtextes zu beeinflussen.

word-spacing

Mit dieser Angabe können Sie den Abstand der Wörter im Text zueinander bestimmen. Sie können es bei normal belassen oder einen numerischen Wert angeben.

letter-spacing

Damit bestimmen Sie den Abstand der Buchstaben oder Zeichen im Text zueinander. Auch hier können sie entweder normal oder einen numerischen Wert angeben.

text-decoration

Sie können underline (unterstrichen), overline (überstrichen), line-through (durchgestrichen), oder none angeben.

vertical-align

Damit bestimmen Sie die vertikale Ausrichtung des Textes, zum Beispiel in einer Tabellenzelle. Es sind die Angaben top (obenbündig ausrichten), middle (mittig ausrichten), bottom (untenbündig ausrichten), baseline (an der Basislinie ausrichten - oder untenbündig, wenn es keine Basislinie gibt), sub (tieferstellen ohne dabei die Schriftgröße zu reduzieren), super (höherstellen ohne dabei die Schriftgröße zu reduzieren), text-top (am oberen Schriftrand ausrichten) und text-bottom (am unteren Schriftrand ausrichten) möglich.

text-align

Damit bestimmen Sie die horizontale Ausrichtung eines Elementes. Verwendet Sie die Angaben left (linksbündig ausrichten), center (zentriert ausrichten), right (rechtsbündig ausrichten) und justify (als Blocksatz ausrichten).

text-transform

Damit wird Groß- oder Kleinschreibung erzwungen, unabhängig davon, die der Text in den Quelltext geschrieben wurde. Möglich sind die Angaben capitalize (Wortanfänge als Großbuchstaben), uppercase (nur Großbuchstaben), lowercase (nur Kleinbuchstaben) und none.

text-indent

Damit führen Sie eine Einrückung der ersten Zeile eines Absatzes herbei. Verwenden Sie dazu eine numerische Angabe oder einen Prozentwert.

line-height

Damit bestimmen Sie die Zeilenhöhe des Fließtextes. Verwenden Sie dazu eine numerische Angabe oder einen Prozentwert.

white-space

Mit dieser Angabe gibt CSS Ihnen die Möglichkeit, den Zeilenumbruch innerhalb von Elementen zu beeinflussen. normal bewirkt gewöhnlichen Zeilenumbruch (Standard), pre stellt den Zeilenumbruch so dar, wie Sie es im Editor angeben (wie bei dem HTML-Element <pre> und nowrap schließlich verhindert einen Zeilenumbruch für diesen Bereich.

Listen

list-style-type

Damit können Sie das Aussehen ihrer Listen wie folgt kontrollieren: decimal (für <ol>-Listen: Numerierung 1.,2.,3.,4. usw), lower-roman (für <ol>-Listen: Numerierung i.,ii.,iii.,iv. usw.), upper-roman (für <ol>-Listen: Numerierung I.,II.,III.,IV. usw.), lower-alpha (für <ol>-Listen: Numerierung a.,b.,c.,d. usw), upper-alpha (für <ol>-Listen: Numerierung A.,B.,C.,D. usw.), disc (für <ul>-Listen: Dateisymbol als Bulletzeichen), circle (für <ul>-Listen: rundes Bulletzeichen), square (für <ul>;-Listen: rechteckiges Bulletzeichen) und none (kein Bulletzeichen, keine Numerierung).

list-style-image

Mit dieser Angabe können Sie ein eigenes Bild als Listenzeichen (Bullet) einbinden, so wie ich das in dieser Einführung für Links zu externen Seiten getan habe. Schreiben Sie die Angabe in dieser Form:
ul { list-style-image : url(externerlink.gif) }.

list-style-position

Mit inside rücken Sie den Inhalt eines Listenpunktes ein, mit outside wird er wie voreingestellt ausgerückt.

list-style

Mit dieser Angabe können Sie die vorangegangenen Angaben in einer Zeile zusammenfassen. Das könnte dann so aussehen:
ul { list style : url(bilder/externerlink.gif) outside; }.

  Abstandsangaben