Wie man Text mit HTML und CSS farblich hervorhebt

Aktualisiert: 27.02.2019 von Computer Hope

Hervorhebung

Das Hervorheben von Text auf einer Webseite hilft, wichtige Informationen sofort ins Bewusstsein des Lesers zu bringen. Dieser Text ist zum Beispiel gelb hervorgehoben und ist Ihnen wahrscheinlich zuerst ins Auge gefallen. Es gibt mehrere Methoden zum Hervorheben von Text. Um fortzufahren, wählen Sie eine Methode aus der folgenden Liste aus und folgen Sie den Anweisungen.

Hervorheben mit dem HTML5-Tag <mark>

Wenn Sie an einer HTML5-Seite arbeiten, kann der Tag <mark> Text schnell hervorheben. Unten sehen Sie ein Beispiel für die Verwendung des mark-Tags und sein Ergebnis. Wenn Ihr Browser das <mark>-Tag unterstützt, sollte der „hervorgehobene Text“ einen gelben Hintergrund haben.

Beispielcode

Here is an example of <mark>highlighted text</mark> using the &lt;mark&gt; tag.

Beispielergebnis

Hier ist ein Beispiel für hervorgehobenen Text mit dem <mark>-Tag.

Text nur mit HTML-Code hervorheben

Um Text mit HTML-Code und Unterstützung für alle Browser hervorzuheben, setzen Sie den Stil „background-color“, wie im Beispiel unten gezeigt, mit dem HTML-Tag <span>.

Beispielcode

<span style="background-color: #FFFF00">This text is highlighted in yellow.</span>

Beispielergebnis

Dieser Text ist gelb hinterlegt.

Tipp

Im obigen Beispiel hat das <span> HTML-Tag eine Hintergrundfarbe mit dem Code #FFFF00, also gelb. In diesem Fall könnte das Wort „gelb“ anstelle des Farbcodes oder eines anderen Farbnamens verwendet werden.

Tipp

Mit demselben Code können Sie auch ein oder mehrere Wörter innerhalb eines Absatzes hervorheben, um die Aufmerksamkeit auf einen bestimmten Abschnitt des Textes zu lenken.

Text mit CSS hervorheben & HTML

Sie können auch eine CSS-Klasse erstellen und das Attribut „background-color“ setzen, wie im folgenden Beispiel gezeigt.

Beispielcode

<style>body { background-color:blue; }.highlightme { background-color:#FFFF00; }p { background-color:#FFFFFF; }</style>

Im obigen CSS-Code werden drei Elemente definiert. Erstens wird die Hintergrundfarbe des Körpers auf Blau gesetzt, zweitens eine neue Klasse namens „highlightme“ mit einem gelben Hintergrund, und schließlich hat das Absatz-Tag einen weißen Hintergrund.

Wenn Sie die Klasse „highlightme“ verwenden möchten, um Ihren Text hervorzuheben, können Sie ein <span>-Tag in Ihrem HTML erstellen, das auf die CSS-Klasse verweist.

Beispielcode

<span class="highlightme">test</span>

Wie man einen kompletten Absatz hervorhebt

Die oben erwähnte CSS-Klasse bzw. Stilklasse könnte auch auf ein Absatz-Tag angewendet werden, wenn man einen kompletten Absatz hervorheben möchte, wie unten gezeigt.

Beispielcode

<p style="background-color: #FFFF00">This whole paragraph of text is highlighted in yellow.</p>

Beispielergebnis

Dieser ganze Textabsatz wird gelb hervorgehoben.

Zusätzliche Informationen

  • Siehe unsere CSS-, Hervorhebungs- und HTML-Definitionsseiten für zusätzliche Informationen.
  • CSS- und HTML-Farbhilfe und Unterstützung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.