CSS II: Schrift-Formatierung
Gelesen bei AboutWebDesign.de
URL: http://www.aboutwebdesign.de/awd/content/976384433.shtml
Im nachfolgenden Text geben wir eine Einführung in die Schriftformatierung mit CSS, nachdem wir im ersten Teil unserer CSS-Reihe bereits die Definition von Stylesheets erklärt haben.
CSS für Textabschnitte
Um CSS für bestimmte Textabschnitte zu verwenden, ohne dabei das font-Tag zu benutzen, gibt es das span-Tag:
<span id="meincss">Formatierter Text</span>
Schriftart
Die Schriftart wird mit dem font-family-Attribut definiert.
Beispiel:
<span style="font-family: Verdana, Arial;">Formatierter Text</span>
Schriftgröße
Das Attribut font-size bestimmt die Schriftgröße. Hier sind numerische Angaben erlaubt, also z.B. 10 pt (pt = Punkt). Alternativ dazu gibt es auch die Möglichkeit, die Schriftgröße zu beschreiben, z.B. mit small, medium oder large.
Beispiele:
<span style="font-size: 10 pt;">Formatierter Text</span>
<span style="font-size: small;">Formatierter Text</span>
Schriftfarbe
Das color-Attribut definiert die Schriftfarbe.
Beispiele:
<span style="color: green;">Grüner Text</span>
<span style="color: #000000;">Schwarzer Text</span>
Schriftstil
Der Schriftstil (font-style) definiert, ob der Text kursiv oder normal ausgegeben wird. Erlaubt sind hier italic und normal.
Beispiel:
<span style="font-style: italic;">Kursiver Text</span>
Schriftgewicht
Das Attribut font-weight definiert, wie "fett" ein Text ausgegeben wird. Erlaubt sind hier bold, bolder und light sowie Zahlenwerte zwischen 100 (dünn) und 900 (sehr fett).
Beispiel:
<span style="font-weight: bold;">Fetter Text</span>
Wort- und Zeichenabstand
word-spacing und letter-spacing definieren, welchen Abstand zwei Wörter bzw. zwei Buchstaben voneinander haben.
Beispiel:
<span style="word-spacing: 10px;">10 Pixel Abstand...</span>
Zeilenabstand
line-height gibt den Abstand zwischen zwei Zeilen an.
Beispiel:
<span style="line-height: 30px;">Zeilenabstand 30px
Zeilenabstand 30px</span>
Text-Dekoration
Mit dem Attribut text-decoration lässt sich ein Text z.B. unterstreichen. Erlaubt sind hier underline (unterstrichen), overline (überstrichen, wird vom NN 4 nicht interpretiert), line-through (durchgestrichen), blink (blinkend, wird vom IE nicht interpretiert) und none (nichts).
Beispiel:
<span style="text-decoration: underline;">Unterstrichener Text</span>
Transformationen
Das Attribut text-transform kann verwendet werden, um Groß-/Kleinschreibung zu verändern. Erlaubt sind hier capitalize (Wortanfänge groß geschrieben), uppercase (alles groß geschrieben), lowercase (alles klein geschrieben) und none (keine Veränderung).
Beispiel:
<span style="text-transform: uppercase;">nur großbuchstaben</span>