Tipps und Tricks: Farbige Listensymbole
Listensymbole müssen nicht immer die Farbe des Eintrags erhalten. Es sind durchaus kunterbunte Mischungen möglich, wie du in dem folgenden Beispiel sehen kannst.
Variante 1
,
,
,
,
<ul style="color:#ff0000;"> <li><span style="color:#ff0000;">Eintrag 1</span></li> <li><span style="color:#00ff00;">Eintrag 2</span></li> <li><span style="color:#0000ff;">Eintrag 3</span></li> </ul>
Die Sache ist eigentlich ganz einfach. Im <ul>-Tag legst du die Farbe für die Listensymbol fest. Diese ist nun aber auch für die Einträge gültig. Also musst du diese in ein <span>-Tag setzen und dem Text eine andere Farbe geben. Das ist alles.
Variante 2
,
,
,
,
<ul> <li style="color:#ff0000;"> <span style="color:#000000;">Eintrag 1</span> </li> <li style="color:#00ff00;"> <span style="color:#0000ff;">Eintrag 2</span> </li> <li style="color:#0000ff;"> <span style="color:#ff0000;">Eintrag 3</span> </li> </ul>
Variante 1 hat die Einschränkung, dass alle Listensymbole die gleiche Farbe haben. Du kannst die Farbe des Symbols aber auch in jedem <li>-Tag einzeln festlegen. Die Einträge setzt du wieder in ein <span>-Tag, um dem Text eine andere Farbe geben. Fertig sind die kunterbunten Listen.
Siehe auch Listeneigenschaften.