Textteile hervorheben
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Bestimmte Textteile eines Absatzes sollen hervorgehoben werden, wie in der folgenden Abbildung gezeigt.
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 … <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;
}
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