html Buchstaben einzeln ändern?

Hallo, ich möchte in Html ein Wort haben, wo ich bei jedem Buchstaben die Farbe einzeln ändern kann. Wie geht das ? Weil wenn ich z.b so mache:

<p id="0">T</p>  
<p id="1">e</p>  
<p id="2">s</p>  
<p id="3">t</p>  

Bekomme ich so ein Ergebnis:
T
E
S
T

Ich möchte aber das es so aussieht: TEST, und dass ich trotzdem bei jeden Buchstaben in CSS die Farbe ändern kann

Answer 1

[TeamStoffcouch]

weil p heißt Paragraph was heißt das da automatisch umgebrochen wird.

Versuche lieber

<span id="1">T</span>
<span id="2">E</span>
<span id="3">S</span>
<span id="4">T</span>

Dann wird auch nichts umgebrochen. der span tag kann auch innerhalb eines p tags vorkommen. also sowas wie

<p> das dritte <span class="gruen"> Wort </span> ist grün </p>

Answer 2

[threadi]

Das Element p ist ein Blockelement und nimmt daher die volle Breite ein. Dein Wunsch lässt sich nur mit Inline-Elementen realisieren. Z.B. so:

<p>
  <span class="color0">T</span>
  <span class="color0">e</span>
  <span class="color0">s</span>
  <span class="color0">t</span>
</p>

Beachte dazu folgende Hinweise:

• Ich habe hier Klassen statt Ids vergeben da Du so die Farbgebung per CSS auch mehrfach in einem HTML-Dokument verwenden könntest.
• Anders als von dir und den anderen Antwortenden hier verwendet sind reine Zahlen-IDs und -Klassen nicht zulässig. Eine Klasse wie auch eine ID muss mit einem Buchstaben beginnen. Daher habe ich die Klassen entsprechend korrekt benannt.
• Ggfs. ist <span> nicht das passende syntaktische Element. Wenn Du durch die Farbgebung Wörter markieren willst, die für Suchmaschinen relevant wären, wäre ggfs. <strong> richtig da hierdurch das Wort auch eine semantische Bedeutung bekommt. Für einzelne Buchstaben kann man es natürlich bei <span> belassen.

Woher ich das weiß: Berufserfahrung

Comments

[P05m05]

Ich habe in meinem Code auch Klassen verwendet, ist einfach für meinen Code die bessere Variante gewesen
Ja, die Benennung habe ich(vermutlich auch die anderen) der Einfachheit halber mit Zahlen von 0 aufwärts benannt
Für meinen Zweck hat es super funktioniert, und es ist auf keinen Fall Suchmaschinenrelevant, da ich nur eine 404 Error Site geschrieben habe

Answer 3

[NackterGerd]

Wenn du jeden Buchstaben in einen Paragraphen steckst ist das doch richtig dass jeder in einer Zeile ist.

Warum benutzt du nicht <span> je Buchstaben ?

https://wiki.selfhtml.org/wiki/HTML/Textauszeichnung/span

Also z.b.

<p>
<span id="0">T</soan>  
<span id="1">e</span>  
<span id="2">s</span>  
<span id="3">t</span>  
</p>

Answer 4

[pentihunter]

<p>
  <span id="0">T</span>
  <span id="0">e</span>
  <span id="0">s</span>
  <span id="0">t</span>
</p>

Sowas müsste eigentlich gehen

Comments

[pentihunter]

id 1,2,3,4 natürlich ;)