Farbige Listensymbole erzeugen

Was Textverarbeitungsprogramme schon lange können, ist mit CSS ebenso kinderleicht. Normalerweise werden die Listensymbole in einer Aufzählungsliste immer schwarz dargestellt. Mit CSS ist es jedoch kinderleicht, diese auch anders zu gestalten.

Mit den nachstehenden Beispielen zeige ich dir, wie das funktioniert.

 

Listensymbole einfärben

Um Listensymbole einzufärben, füge einfach die gewünschten CSS-Angaben zu deinen Listen hinzu.

 

Code-Beispiel für Inline-CSS:

<ul>
   <li style="color: blue;"><span style="color: black;">Eintrag 1</span></li>
   <li style="color: red;"><span style="color: black;">Eintrag 1</span></li>
   <li style="color: green;"><span style="color: black;">Eintrag 1</span></li>
 </ul>

 

Erklärung:

Mit diesem Beispiel werden die Listensymbole verschiedenfarbig dargestellt. Da die Farbangabe jedoch auch für den Text gilt, muss man diesen mit einem <span style="color: ...;"> wieder auf seine Ursprungsfarbe zurück bringen.

Möchtest du das CSS-Code-Schnipsel lieber in eine externes Stylesheet auslagern, gibt es Varianten mit oder ohne Benutzung von CSS-Klassen. Dies ist die wesentlich elegantere Variante, da du mit ihr auch einige Nachteile abstellen kannst. Wenn du keine Klassen benutzen möchtest hat das den Nachteil, dass alle Listensymbole gleichfarbig sind. Mit diversen Klassen hingegen kannst du die Listensymbole auch wieder unterschiedlich einfärben.

Am Ende der Seite findest du dazu auch ein Anzeigebeispiel.

 

Code-Beispiel mit Verwendung von CSS-Klassen:

li.blau { color: blue; }
li.rot { color: red;}
li.gruen { color: green; }
li span { color: black; }

 

HTML-Beispiel dazu:

<ul>
 <li class="blau"><span>Listenpunkt Blau</span></li>
 <li class="rot"><span>Listenpunkt Rot</span></li>
 <li class="gruen"><span>Listenpunkt Grün</span></li>
</ul>

 

Code-Beispiel ohne Verwendung von CSS-Klassen:

li { color: green; }
li span { color: black; }

 

HTML-Beispiel dazu:

<ul>
 <li><span>Listenpunkt #1</span></li>
 <li><span>Listenpunkt #2</span></li>
 <li><span>Listenpunkt #3</span></li>
</ul>

 

Du kannst dir gerne auch ein Anzeigebeispiel ansehen.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.