Farbe innerhalb eines Wortes ändern

[Aresch]

Hi!

ich bin noch ziemlich neu in diesem Thema und habe bislang nur paar Tuts angeschaut und selbst probiert ^^
Kann mir vielleicht einer erklären wie ich die Schriftfarbe innerhalt eines Wortes ändern kann?
Als Beispiel das Wort Reddevil. Ich hätte gerne den Red-Teil in Rot und den devil-Teil in Grün.
Ich versuche momentan eine billige Homepage zu erstellen. Das Wort Redevil soll die Überschrift sein. Dazu habe ich dann <h1> Reddevil </h1> genutzt und in der .css datei habe ich über color: red; die Farbe bestimmt, jedoch wird dann alles Rot.....

 

[MrMurphy]

Hallo,

damit CSS auf die unterschiedlichen Buchstaben zugreifen kann musst du diese zunächst in geeignete Container packen. In diesem Fall bietet sich das bedeutungslose span-Element an, also

<h1><span>Red</span><span>devil</span></h1>

Dass erste span bekommt dann mittels CSS die Textfarbe rot, dass zweite die Textfarbe grün, zum Beispiel so:

h1 :nth-child(1) {
color: red;
}
h1 :nth-child(2) {
color: green;
}

Gruss

MrMurphy

 

[Aresch]

Vielen dank für die Antwort. Ich habe die Überschrift in einen div Container gepackt. Sprich:

<div id="header-left">
<h1><span> Red</span><span>devil</span></h1>
</div>

und als .css gebe ich dann folgendes ein?:

#header-left h1 {:nth-child(1) {
color: red; }
h1 :nth-child(2) {
color: green;}
}


wo habe ich den Fehler gemacht?^^

Danke im voraus!!!

 

[MrMurphy]

Hallo

ich sehe keinen Fehler. Die Überschrift sollte zweifarbig angezeigt werden. Für das CSS wäre nur sinnvoller

      #header-left h1 :nth-child(1) {
         color: red;
      }
      #header-left h1 :nth-child(2) {
         color: green;
      }

Wenn das nicht funktioniert hast du entweder einen Tippfehler in deinem Quelltext oder im CSS noch andere Anweisungen, die in die Überschrift hineinpfuschen. Das können wir mangels Link zu der Seite aber nicht nachvollziehen.

Gruss

MrMurphy

 

[Aresch]

ich danke dir vielmals. Ich habe vergessen das ganze zu Speichern, deshalb hatte ich keine Änderung

 

[MrMurphy]

Hallo

ohne Link zu der Seite können wir nur raten. Das macht im Endeffekt keinen Spaß, da die Berücksichtung aller möglichen Fehlerquellen mehrere Wälzer füllt.

Eine typische Ursache ist, das eines der umgebenden Elemente ein padding, border oder margin hat. Die müssen entfernt werden.

Wobei zu berücksichtigen ist das die Browser solche Abstände auch selbstständig vergeben, wenn nicht eingegriffen wird, Stichwort: Normalisierung.

Bei der Normalisierung werden nur einige Elemente per CSS grundsätzlich angepasst.

Früher war das CSS-Reset groß im Kurs. Dabei wurden alle Elemente ihrer vorgegebenen CSS-Eigenschaften "beraubt". Das hat sich aber nicht bewährt, da damit die Browser ausgebremst werden und viele Vorgaben durchaus sinnvoll sind.

Wenn in einem Reset oder einer Normalisierung folgende Empfehlung gegeben wird:

* {
    margin: 0;
    padding: 0;
}

Finger weg! Solche Autoren sind sich der Auswirkungen ihrer Empfehlungen nicht bewußt - oder deutlicher: Die haben keine Ahnung.

Gruss

MrMurphy

 

[djheke]

Warum eigentlich 2 span's?

<h1><b>Red</b>Devil</h1>

CSS

h1 {
 color:green;
}
h1 b {
 color:red;
}

 

[MrMurphy]

Hallo,

ein span hätte auch gereicht. Für Anfänger ist meine Lösung meiner Meinung nach aber einfacher nachzuvollziehen.

Das b-Element halte ich für sachlich falsch da es gleichzeitig zwangsweise eine Bedeutung mitliefert. Das die erste Silbe eines Wortes eine andere Bedeutung als der Rest hat erschließt sich mir nicht.

Stichwort: Semantik.

The b element represents a span of text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood, such as key words in a document abstract, product names in a review, actionable words in interactive text-driven software, or an article lede.

und

The b element should be used as a last resort when no other element is more appropriate. In particular, headings should use the h1 to h6 elements, stress emphasis should use the em element, importance should be denoted with the strong element, and text marked or highlighted should use the mark element.

Gruss

MrMurphy

 

[djheke]

Mir ist es egal ob span oder b. Aber, sachlich falsch ist es nicht. Mit das b Tag werden Textstellen hervorgehoben die keine Wichtigkeit oder Relevanz haben. Das ergab zumindestens meine Recherche.

@edit: Meine Schreibfaulheit sagt mir, dass b weniger ist als span.