Tipps und Tricks: Farbig unterstrichen
Wie wäre es denn einmal mit farbigen Unterstreichungen, d.h. dass die Unterstreichung eine andere Farbe als der Text hat?
Möglich wird dies durch den Einsatz von einem zusätzlichen <span>-Tag. Und so könnte es aussehen:
Eine Unterstreichung in Rot
Eine Unterstreichung in Blau
,
,
,
,
<p style="color:#ff0000;text-decoration:underline;"> <span style="color:#000000;"> Eine Unterstreichung in Rot </span></p> <p style="font-weight:bold;color:#0000ff; text-decoration:underline;"> <span style="color:#ff0000;"> Eine Unterstreichung in Blau </span></p>
Für das <p>-Tag wird zunächst die Unterstreichung und die Textfarbe
festgelegt. Die Textfarbe gilt in diesem Fall auch für die Unterstreichung, so wie Du es
sicherlich kennst.
In dem folgenden <span>-Tag wird nun die Textfarbe auf schwarz
geändert.
Nach den CSS-Regeln des W3C ist die text-decoration-Eigenschaft nicht
vererbar,
aber Elemente sollen die text-decoration-Eigenschaft von ihren Elternelementen
übernehmen, auch wenn die z.B. Textfarbe eine andere ist.
In diesem Beispiel ist das <p>-Tag das Elternelement und das
<span>-Tag übernimmt die farbige Unterstreichung, auch wenn die Textfarbe
eine andere ist.
Hier findest du weitere Informationen zu text-decoration.