Hervorhebungen im Fließtext gestalten per CSS

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

Ersten Kommentar schreiben
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:

Als Mitglied können Sie diesen Beitrag weiterlesen!

Werden Sie Mitglied und testen Sie akademie.de 14 Tage lang kostenlos!

In den ersten 14 Tagen haben Sie Zugriff auf alle Inhalte auf akademie.de, außer Downloads. Sie können in dieser Zeit ohne Angabe von Gründen stornieren. Eine E-Mail an service@akademie.de genügt. Nur wenn Sie Mitglied bleiben, wird der Mitgliedsbeitrag nach Ende der 14tägigen Stornofrist abgebucht.

Ich bin bereits Mitglied
Jetzt Mitglied werden und akademie.de 14 Tage kostenlos testen
Ich entscheide mich für folgende Zahlungsweise:
14 Tage Stornorecht:
Ich kann meine Mitgliedschaft in den ersten 14 Tagen jederzeit formlos stornieren, z.B. per E-Mail an service@akademie.de.

Ü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