Hervorhebungen im Fließtext gestalten per CSS

Um die Aufmerksamkeit des Lesers zu erregen, sollte man manche Texte optisch hervorheben

Stand: 8. Dezember 2008

Zitate, Hinweisboxen

Zitate, Hinweisboxen und andere besondere Textauszeichnungen sind allesamt Teil des Fließtextes. Um die Aufmerksamkeit des Lesers zu erregen, sollte man diese optisch hervorheben. Mit CSS kein Problem.

Beispieldateien

Zum Üben und Selbermachen stehen Beispieldateien bereit. Das zip-Archiv enthält zwei Ordner: In "basis" finden Sie die Übungsdateien, mit denen Sie unmittelbar anfangen können zu arbeiten. Dem Ordner "fertig" entnehmen Sie, wie das Ganze am Ende aussehen sollte. - Download Beispieldateien (.zip, 10 KB)

Zitate mit blockquote und cite

Zitate, die in einem eigenen Absatz stehen, werden mit den Elementen blockquote und cite gekennzeichnet:

<p>Der folgende Absatz ist ein Block-Zitat mit Quellenangabe:</p>
<blockquote>
<p>Sie können Zitate von Fremdautoren in einem eigenen, anders formatierten (zumeist eingerückten) Absatz hervorheben.</p> 
<p>Es handelt sich dabei jedoch um eine logische, inhaltliche Auszeichnung. Wie diese Absätze genau formatiert werden, bestimmt letztlich der Webbrowser. Die Vorgabe ist jedoch, solche Absätze auffällig und vom übrigen Text unterscheidbar anzuzeigen. 
<cite>(Quelle: <a href="http://de.selfhtml.org/html/text/zitate_adressen.htm"> SelfHTML</a>)</cite></p>
</blockquote>

Dieses Zitat ist mit den Styles zur Schriftgestaltung (aus dem Beitrag "Fließtext gestalten per CSS") zwar bereits gut lesbar, wirkt aber noch nicht so richtig ansprechend:

Bild vergrößernEin Blockzitat mit Schriftgestaltung

Dieses Zitat wird im Folgenden mit ganz normalen Box-Modell-Eigenschaften wie background und padding etwas ansprechender gestaltet. Anschließend wird die mit cite markierte Zitatquelle zur Block-Box gemacht und der Text darin rechts ausgerichtet.

Öffnen Sie die Datei blockquote.html aus dem Basisordner der Beispieldateien und ergänzen Sie den Style-Block im head der Seite um folgende CSS-Regel:

/* ==============================================
   Gestaltung von blockquote
   ============================================== */
blockquote { 
   background: #fff9df; 
   padding: 1em 1em 0 1em; 
   border-top: 3px solid #f3c600; 
   border-bottom: 3px solid #f3c600;  
   margin-left: 0; /* keine Zentrierung */ 
}

Fügen Sie direkt darunter den folgenden Style zur Gestaltung von cite ein:

Mitglied werden

Als zahlendes Mitglied von akademie.de haben Sie vollen Zugriff auf alle Inhalte und können alle PDF-Dateien, Checklisten, Mustervorlagen und Anwendungen herunterladen.

Sind Sie sich noch unsicher? Dann wählen Sie die Option “akademie.de kostenlos testen”. So können Sie sich 14 Tage in Ruhe umschauen. Downloads stehen Ihnen in dieser Zeit nicht zur Verfügung. Gefällt Ihnen akademie.de nicht, reicht ein formloser Widerruf per E-Mail innerhalb der ersten 14 Tage. Es entstehen für Sie keine Kosten. Widerrufen Sie nicht, erhalten Sie nach Ablauf von 14 Tagen vollen Zugriff und der Mitgliedsbeitrag wird abgebucht.

Ich bin bereits Mitglied
Mitglied werden!
Ich entscheide mich für folgende Zahlungsweise:

Über den Autor:

bild117259

Peter Müller, Dozent und Autor, beschäftigt sich bereits seit 1995 mit dem Web und veröffentlichte zahlreiche Bücher rund um das Thema Webpublishing. Seine Erklärungen sind nicht ausschließlich für E ...

Newsletter abonnieren