XML-Technologien / CSS / CSS Kochbuch / Typografie für das Web / Überschriften mit Stil

Überschriften mit Stil

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Sie wollen eine Überschrift entwerfen, die sich von der Standarddarstellung unterscheidet. Vielleicht wollen Sie die Überschrift aus der folgenden Abbildung kursiv darstellen, wie in der übernächsten Abbildung gezeigt.

Standarddarstellung einer Überschrift

Abbildung: Standarddarstellung einer Überschrift.

Die Überschrift mit Stildefinitionen

Abbildung: Die Überschrift mit Stildefinitionen.

Lösung

Als Erstes sollten Sie hierfür die Überschrift korrekt als solche auszeichnen:

<h2>Designing Instant Gratification</h2>
<p>Online, activity of exchanging ideas is sped up. The distribution of messages from the selling of propaganda to the giving away of disinformation takes place at a blindingly fast pace thanks to the state of technology &hellip;</p>

Daraufhin können Sie die Kurzschrift-Eigenschaft font benutzen, um auf einfache Weise die Darstellung anzupassen:

h2 {
 font: bold italic 2em Georgia, Times, "Times New Roman", serif;
 margin: 0;
 padding: 0;
}
p {
 margin: 0;
 padding: 0;
}

Diskussion

Wie bereits im Rezept Kurzschrift-Eigenschaften beschrieben, vereinigt eine Kurzschrift-Eigenschaft mehrere einzelne Eigenschaften in einer. Die Eigenschaft font ist eine von diesen zeitsparenden Eigenschaften. Sie kann Werte der folgenden Eigenschaften repräsentieren:

Die ersten drei Werte können beliebig angeordnet werden, während die übrigen Werte in der hier gezeigten Reihenfolge angegeben werden müssen.

Wenn Sie einen Wert für line-height definieren möchten, müssen Sie diesen vom Wert für font-size durch einen Schrägstrich trennen:

p {
 font: 1em/1.5em Verdana, Arial, sans-serif;
}

Wenn Sie Stile für Überschriften erstellen, sollten Sie daran denken, dass Browser ihre eigenen Voreinstellungen für die Innen- und Außenabstände von Absätzen und Überschriften mitbringen. Diese Standardwerte basieren in der Regel eher auf mathematischen als auf ästhetischen Grundlagen.

Siehe auch

Die CSS 2.1-Spezifikation zum Thema Kurzschrift-Eigenschaften.

<< zurück

vor >>

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Printlayouts mit CSS & HTML

XML-Grundlagen

ePub

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln