Frage von MJH1998, 68

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.

Antwort
von PeterKremsner, 68

Kannst du mit htmltags leichter machen:

<span style="color: green;">H</span>

<span style="color: blue;">a</span> usw.

Siehe hier:

https://jsfiddle.net/n80gxht0/

Kommentar von MJH1998 ,

Is´ leider eine Aufgabe und ich muss es über CSS machen...

Kommentar von GanMar ,

Bananenbrot hat das schon gut erklärt.

Kommentar von PeterKremsner ,

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.

Antwort
von Minilexikon, 32

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.

Kommentar von Bananenbrot24 ,

Mit Kanonen auf Spatzen schießen... :D

Kommentar von Minilexikon ,

Tja, das Ding ist, dass die Variante mit den Spans ziemlich aufwendig wird, wenn du mal nicht nur Halle hast.

Antwort
von Bananenbrot24, 58

Ü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>[...]
Kommentar von MJH1998 ,

Ja danke. Aber leider muss  ich es in CSS machen.... Das mit den Spans weiß ich schon. Aber trotzdem danke!

Kommentar von PeterKremsner ,

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.

Kommentar von MJH1998 ,

ok dann schau ich nochmal, danke!

Kommentar von MJH1998 ,

OK hat geklappt, danke!

Keine passende Antwort gefunden?

Fragen Sie die Community