Navigation überspringen

Schriftlayout

Benötigtes Vorwissen

Schüler-Autoren dieses Artikels sind Steffen de Boer, Oliver Busse und Imke Müntinga

Textausrichtung

Man verwendet text-align, um den Text auszurichten. Es gibt drei Möglichkeiten: 1. center (=zentriert), 2. right (=rechtsbündig) und 3. justify (=Blocksatz) und 4. left(=linksbündig, wobei dies die Grundeinstellung ist).

Bsp. Rechtsbündig:

HTML

CSS

<div class="rechtsbündig">

Dieser Text wird rechtsbündig ausgegeben.

</div>
.rechtsbündig{

text-align: right;

}

Hoch- bzw. tiefgestellt

In der Mathematik braucht man manchmal hoch- oder tiefgestellte Zahlen. Um dies zu erreichen, wird die Zahl in dem Text, in der HTML-Datei einfach mit <sup> 7 </sub> für hochgestellt und <sub> 8 </sub> für tiefgestellt umschlossen.

HTML

Browser

Dieser Text wird <sub> tiefgestellt </sub> und dieser <sup> hochgestellt </sup> ausgegeben.

Dieser Text wird tiefgestellt und dieser hochgestellt ausgegeben.

Höhe der Zeilen

Die Höhe der Zeilen wird mit line-height und dann die entsprechende Größe angegeben.

( mit einer einfachen 2 = 2mal so groß wie normal, mit 200% = 200% der normalen Größe, mit 2em = 2 Zeilenhöhen)

CSS


line-height: 2;

line-height: 200%;

line-height: 2em;

Zeilen einrücken

Mit text-indent gibt man an, um wieviel die erste Zeile des Absatzes eingerückt werden soll (den Wert kann man entweder mit Längenmaß (em) oder in Pixel (px) angeben.

Bsp.:

CSS

Browser

{

text-indent: 40px;

}

Text „dekorieren“

Mit text-decoration kann man einen Text „dekorieren“.

Mit none (=keine Dekoration), underline (=unterstrichen), overline (überstrichen) und line-through (=durchgestrichen).