Schriftformatierung
Unter Schriftformatierung sind Angaben zu Schriftarten, Schriftgrößen, Schriftfarben,
Schriftgewicht, Zeichen- und Wortabständen usw. zu verstehen. Sinnvoll sind solche
Angaben für alle Elemente, die Text enthalten können. Wir zeigen Ihnen nun, wie Sie die Angaben zu Schriftart (font-family), Schriftstil (font-style), Schriftgröße (font-size) und Textfarbe (color) ändern können.
Mit font-family können Sie eine oder mehrere Schriftarten oder eine Schriftfamilie bestimmen. Trennen Sie mehrere Schriftartennamen durch Kommata. Folgende generische
(in jedem Browser vorhandene) Schriftfamilien sind vordefiniert:
| Schriftfamilie | Erklärung | Schriftart (Beispiel) |
|---|---|---|
| serif | Schriftart mit Serifen | Times New Roman |
| sans-serif | Schriftart ohne Serifen | Arial |
| cursive | Schriftart für Schreibschrift | Comic Sans MS |
| monospace | Schriftart mit dicktengleichen Zeichen | Courier |
Beispiel
font-family:Arial,sans-serif;
Mit der Eigenschaft font-style bestimmen Sie den Schriftstil:
| Schriftstil | Erklärung | Beispiel |
|---|---|---|
| italic | kursiver Schriftstil | kursiv |
| normal | normaler Schriftstil | normal |
Beispiel
font-style:italic;
Mit font-size können Sie die Schriftgröße bestimmen. Erlaubt ist eine numerische Angabe wie px (Pixel), cm, in (Zoll). Auch Prozentangaben (%), die sich auf die Schriftgröße des Elternelements beziehen, sind erlaubt.
Beispiel
font-size:20px;
Mit color können Sie die Textvordergrundfarbe bzw. Schriftfarbe bestimmen. Dabei können unter anderem Farbwörter (z.B. darkblue) oder hexadezimale Farbwerte (z.B.#00008B) verwendet werden.
Beispiel
color:darkblue;
color:#00008B;
color:#00008B;
Hinweis
Weitere Informationen zu den numerischen Angaben bzw. zu den Farben erhalten Sie im Internet beispielsweise unter:
Numerische Angaben
http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische
http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische
Farbwörter und Hexadezimalnotation
http://de.selfhtml.org/html/allgemein/farben.htm
http://de.selfhtml.org/html/allgemein/farben.htm
Praxisaufgabe
Schauen Sie sich die Datei kap6_bsp03.xml im Browser und in einem Texteditor an. Diese verwendet die Stylesheet-Datei
kap6_style02.css, die alle auf dieser Seite angeführten Beispiele für die Formatierung des Schuhnamens
verwendet. Beide Dateien finden Sie auf der Kurs-CD-ROM im Ordner xml-work.