it-swarm.com.de

HTML: Ändern der Farben bestimmter Wörter in einer Textfolge

Ich habe die folgende Nachricht (etwas geändert):

"Nehmen Sie am Wettbewerb am 30. Januar 2011 teil und gewinnen Sie bis $$$$ - inklusive toller Sommerreisen!"

Ich habe momentan:

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">

formatieren der Textzeichenfolge, aber möchten die Farbe von "30. Januar 2011" in # FF0000 und "Sommer" in # 0000A0 ändern. 

Wie mache ich das streng mit HTML oder Inline-CSS?

68
Mitch
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
  Enter the competition by 
  <span style="color: #ff0000">January 30, 2011</span>
  and you could win up to $$$$ — including amazing 
  <span style="color: #0000a0">summer</span> 
  trips!
</p>

Oder Sie möchten stattdessen CSS-Klassen verwenden:

<html>
  <head>
    <style type="text/css">
      p { 
        font-size:14px; 
        color:#538b01; 
        font-weight:bold; 
        font-style:italic;
      }
      .date {
        color: #ff0000;
      }
      .season { /* OK, a bit contrived... */
        color: #0000a0;
      }
    </style>
  </head>
  <body>
    <p>
      Enter the competition by 
      <span class="date">January 30, 2011</span>
      and you could win up to $$$$ — including amazing 
      <span class="season">summer</span> 
      trips!
    </p>
  </body>
</html>
83
Jacob

Sie können das HTML5-Tag <mark> verwenden:

<p>Enter the competition by 
<mark class="red">January 30, 2011</mark> and you could win up to $$$$ — including amazing 
<mark class="blue">summer</mark> trips!</p>

Und verwende das im CSS:

p {
    font-size:14px;
    color:#538b01;
    font-weight:bold;
    font-style:italic;
}

mark.red {
    color:#ff0000;
    background: none;
}

mark.blue {
    color:#0000A0;
    background: none;
}

Das Tag <mark> hat eine Standardhintergrundfarbe ... zumindest in Chrome.

34
<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">
    Enter the competition by <span style="color:#FF0000">January 30, 2011</span> and you could win up to $$$$ — including amazing <span style="color:#0000A0">summer</span> trips!
</p>

Die Span-Elemente sind inline und unterbrechen somit nicht den Fluss des Absatzes, sondern nur den Stil zwischen den Tags.

31
Damien-Wright

verwenden Sie Spannweiten. ex) <span style='color: #FF0000;'>January 30, 2011</span>

16
brian_d
<font color="red">This is some text!</font> 

Das funktionierte am besten für mich, als ich nur ein Wort in die rote Farbe eines Satzes ändern wollte.

9
user8588011

Passen Sie diesen Code an, wie auch immer Sie Ihren Bedürfnissen entsprechen möchten. Sie können Text auswählen. In dem Absatz wird angegeben, welche Schriftart oder welcher Stil Sie benötigen !:

<head>
<style>
p{ color:#ff0000;font-family: "Times New Roman", Times, serif;} 
font{color:#000fff;background:#000000;font-size:225%;}
b{color:green;}
</style>
</head>
<body>
<p>This is your <b>text. <font>Type</font></strong></b>what you like</p>
</body>
1
Trevor Lee

Sie können auch eine Klasse machen: 

<span class="mychangecolor"> I am in yellow color!!!!!!</span>

dann in einer CSS-Datei: 

.mychangecolor{ color:#ff5 /* it changes to yellow */ }
0
JayMcpeZ_

Sie könnten den längeren Böringer-Weg verwenden 

<p style="font-size:14px; color:#538b01; font-weight:bold; font-style:italic;">Enter the competition by</p><p style="font-size:14px; color:#ff00; font-weight:bold; font-style:italic;">summer</p> 

sie erhalten den Punkt für den Rest

0
otis answer

Wenn Sie eine Bibliothek verwenden möchten, kann Azle dies problemlos tun. Einfach Ziel die class - und class-Instanz Ihres Textelements. Wenn sich beispielsweise mein Textblock in einem Element mit der Klasse "my_text" befindet und es sich um die erste Instanz dieser Klasse handelt: 

az.style_Word('my_text', 1, {
    "this_class" : "colored_Word", 
    "Word" : "deploy",
    "color" : "red",
    "Word_instance" : 2
})

Das Folgende zeigt, wie wir jede Instanz des Wortes färben oder auf die 1., 2. oder 3. Instanz des Wortes insbesondere zielen können:

 enter image description here

Hier ist die GEIGE

0
Cybernetic