Versalien zu Beginn eines Absatzes

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Ein Absatz soll mit einem Versal beginnen. Als Versalien bezeichnet man besonders große Buchstaben am Absatzanfang, die mehrere Punkte größer als der übrige Text oder oftmals auch mehrere Zeilen hoch dargestellt werden.

Lösung

Platzieren Sie den Absatz in einem p-Element:

<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>

Benutzen Sie nun das Pseudoelement :first-letter, um den ersten Buchstaben des Absatzes mit einer speziellen Stildefinition zu versehen (siehe die folgende Abbildung):

p:first-letter {
 font-size: 1.2em;
 background-color: black;
 color: white;
}

Ein einfacher Versal

Abbildung: Ein einfacher Versal.

Diskussion

Die CSS-Spezifikation bietet mit dem Pseudoelement :first-letter eine einfache Möglichkeit, den ersten Buchstaben eines Absatzes mit einem Versal zu versehen. :first-letter wird mittlerweile von den meisten modernen Browsern wie Internet Explorer 6 für Windows, Firefox, Safari und Opera unterstützt. Für andere Browser hilft möglicherweise der folgende Lösungsansatz:

Umgeben Sie den ersten Buchstaben des ersten Satzes in einem Absatz mit einem span-Element. Dieses muss seinerseits ein class-Attribut enthalten:

<p><span class="initcap">O</span>nline, 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>

Jetzt können Sie für den ersten Buchstaben einen eigenen Stil definieren:

p .initcap {
 font-size: 1.2em;
 background-color: black;
 color: white;
}
Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

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