Textteile hervorheben

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Bestimmte Textteile eines Absatzes sollen hervorgehoben werden, wie in der folgenden Abbildung gezeigt.

Hervorgehobener Text

Abbildung: Hervorgehobener Text.

Lösung

Markieren Sie die Teile Ihres Textes, die hervorgehoben werden sollen, mit dem Element strong:

<p>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; <strong>This change in how fast information flows revolutionizes the culture.</strong> ...</p>

Nun definieren Sie die entsprechenden CSS-Regeln, um den Text hervorzuheben:

strong {
 font-weight: normal;
 background-color: yellow;
}

Diskussion

Anstelle des strong-Elements in dieser Lösung hätten Sie auch das Element em verwenden können, um den hervorzuhebenden Text zu markieren. Laut der HTML 4.01-Spezifikation soll em für die Markierung von hervorgehobenem Text benutzt werden, während strong "stärker hervorgehobenen Text" bezeichnen soll.

Nachdem Sie den Text markiert haben, können Sie mit der Eigenschaft background-color festlegen, welche Farbe für die Hervorhebung benutzt werden soll. Da manche Browser als strong markierten Text fettgedruckt darstellen, sollten Sie zusätzlich die Eigenschaft font-weight (Schriftgewichtung) auf den Wert normal setzen. Bei der Verwendung von em müssen Sie dagegen die Eigenschaft font-style auf normal setzen, um zu verhindern, dass manche Browser derartig markierte Teile kursiv darstellen, wie im folgenden Codebeispiel zu sehen ist:

em {
 font-style: normal;
 background-color: #ff00ff;
}

Siehe auch

Die HTML 4-Spezifikation zu den Elementen strong und em.

  

<< zurück vor >>

 

 

 

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