Grundlagen CSS
Textformatierungen
Schriftart, -stil und -gewicht sind aber noch nicht ALLE Attribute, die uns zur Verfügung stehen, um "gestalterisch" mit Texten zu arbeiten. Auch in Farben, Zeichabständen und weiteren Dekorationen haben wir effektive Mittel an der Hand, um Texte zu gestalten und Akzente zu setzen.
Schriftfarbe, Zeichenabstände und Dekoration
Kapitel 9
Die Farbe, in der die Schrift erscheinen soll, wird dem ensprechenden HTML-Element durch die Eigenschaft color mitgegeben. Als Werte sind dabei sowohl Standard-Angaben wie "blau", "rot" oder "gelb" erlaubt als auch alle hexadezimalen Farbwerte, wie sie uns auch schon aus HTML bekannt sind. Wird ein hexadezimaler Farbwert angegeben, so wird dieser grundsätzlich mit dem #-Zeichen eingeleitet und besteht einer insgesamt 6-stelligen Zeichenfolge.
Hierbei entspricht beispielsweise #ffffff der Farbe "weiss" und #000000" der Farbe schwarz.
Beispiel
(Angabe der Schriftfarbe )
p,ul,div { color:#FF6600; }
Als weiteres Mittel zur Textgestaltung könen wir auch die Buchstabenabstände festlegen. Das ist manchmal sinnvoll, wenn man z.B. im Text einzelne Worte, Sätze oder auch ganze Abstätze besonders hervorheben möchte (z.B. bei einer Art "Artikelvorschau" o.ä.), oder auch bei überschriften.
Diesen Zeichenabstand bestimmen wir über die die Eigenschaft letter-spacing. Die zuzuordnenden Werte müssen numerische Werte sein und als mögliche Einheiten sind em, px, pt oder auch mm (Millimeter) erlaubt. Daneben gibt es noch die Masseinheit ex, die sich auf die Schriftöhe eines kleinen Buchstabens bezieht.
Kommaangaben sind erlaubt und werden anstatt mit einem Komma mit einem Punkt angegeben (z.B. 0.9em).
Beispiel
(Angabe der Zeichenabstände )
p.weit {letter-spacing:3px; }
Ergebnis ist, dass allen "p-tags" der Klasse weit ein Zeichenabstand von 3px zugewiesen wird. Das sieht dann so aus:
Beispiel Zeichenabstand
... wobei ich jetzt - der besseren Lesbarkeit halber - noch die Schriftfarbe "orange" definiert habe.)
Last not least haben wir dann noch die Möglichkeit, über weitere "Textdekorationen" das Erscheinungsbild unsereres Textes zu differenzieren. Hiermit sind über- und Unterstreichungen von Textpassagen/Texten gemeint. Oft und gerne benutzt bei Linkangaben.
Diese Effekte definieren wir in der CSS über die Eigenschaft text-decoration, der wir die Werte underline (unterstrichen), overline (überstrichen), line-through (durchgestrichen), oder auch blink (blinkend) zuweisen können (Achtung: Letzteres funktioniert NICHT im IE.)
Beispiel
(Angabe Textdekoration)
Das folgende Beispiel hatten wir bereits: Wir benutzen wieder einmal unseren "Linktext" aus Kapitel 6. Zunächst, die Definitionen in der CSS.
a:link { color:##FF6600; text-decoration: underline}
a:hover { color:#FFFF00; text-decoration:overline; }
a:active { color:#008800; text-decoration: blink}
a:visited { color:#0000FF; text-decoration: line-through }
Und so sehen wir das dann:
Einfach mal ausprobieren... der Blinkeffekt, der hier mit angegeben wurde, ist allerdings nur im Firefox sichtbar.
Nachdem wir nun grundsätzlich wissen, wie wir mit allgemeiner Textformatierung umgehen, widmen wir uns der Formatierung ganzer Absätze ...