Einzelne Buchstaben über CSS färben, wie?
Ich möchte über CSS in einem HTML Dokument einzelne Buchstaben eines Wortes färben. Z.B. Hallo (H in Grün, a in blau, l in lila, usw.)
Kann mir jemand sagen wie genau das funktioniert?
Am besten gleich die Syntax.
3 Antworten
Vielleicht hilft dir jQuery dabei, es etwas dynamischer zu gestalten. Ich habe mal PeterKremsners und Bananenbrot24s Lösungswege ein bisschen weiterentwickelt: http://codepen.io/Minilexikon/pen/YqVKBL
Du kannst in dem Array charcolors einfach die Farben für die Buchstaben (eigentlich die Klassennamen) festlegen und das Array beliebig erweitern; den Rest macht jQuery ;)
Kleine Warnung: Das geht nur bei Divs oder p-Tags, die nur Text enthalten.
Tja, das Ding ist, dass die Variante mit den Spans ziemlich aufwendig wird, wenn du mal nicht nur Halle hast.
Über Spans, denke ich. Geht bestimmt noch irgendwie einfacher, aber im Prinzip machst du ein paar Klassen und verwendest diese in spans.
.font-red { color: #hexcode-für-rot;}
.font-blue { color: #selbes-spiel-hier;}
[...]
<span class="font-red">H</span><span class="font-blue">A</span>[...]
Ja danke. Aber leider muss ich es in CSS machen.... Das mit den Spans weiß ich schon. Aber trotzdem danke!
das .font-red usw. kommt in deine CSS Datei, das ist mit CSS gelöst,
ebenso wie meines, denn in der Style Eigenschaft eines HTML Tags stehen CSS Eigenschaften, die dem Objekt zugeordnet werden.
Kannst du mit htmltags leichter machen:
<span style="color: green;">H</span>
<span style="color: blue;">a</span> usw.
Siehe hier:
Naja du kannst es mit Klassen machen so wie Bananenbrot24.
Eventuell kannst du noch etwas über nth-child selector erreichen, aber das ist dann für den Fall schon mehr als umständlich.
Mit Kanonen auf Spatzen schießen... :D