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

88

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

"Nehmen Sie bis zum 30. Januar 2011 am Wettbewerb teil und Sie können bis zu $$$$ gewinnen - einschließlich fantastischer Sommerausflüge!"

Ich habe derzeit:

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

Formatieren Sie die Textzeichenfolge, möchten Sie jedoch die Farbe von "30. Januar 2011" auf # FF0000 und "Sommer" auf # 0000A0 ändern.

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

— Mitch
quelle

112

<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>

— Jacob
quelle

1

Das ist eine großartige Antwort! Zeigt leicht, dass die Punkte Tags innerhalb der Absatz-Tags darstellen. Es verdeutlicht diese Informationen wirklich für alle, die mit <Stil> arbeiten.

— Joseph Poirier

41

Sie können das HTML5-Tag 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 verwenden Sie dies 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 hat eine Standardhintergrundfarbe ... zumindest in Chrome.

— Juan Pablo Pinedo
quelle

3

Schade, dass die Antwort nicht vergeben wurde. Ich hätte es dafür vergeben (und diejenigen, die Browser verwenden, die kein HTML unterstützen (gibt es noch welche?))

— Mawg sagt, Monica

Eine einfache und effektive Lösung, die nicht mehr und nicht weniger als das angeforderte OP leistet.

— Victor Stoddard

Das Markierungs-Tag darf nicht zur Formatierung verwendet werden.

— Jessica B

schöne Alternative zur ursprünglichen Antwort!

— Joseph Poirier

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 daher nicht den Ablauf des Absatzes, sondern nur den Stil zwischen den Tags.

— Damien-Wright
quelle

19

Verwenden Sie Spannweiten. Ex)January 30, 2011

— brian_d
quelle

15

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

Dies funktionierte am besten für mich, als ich nur ein Wort in einem Satz in die Farbe Rot ändern wollte.

— user8588011
quelle

Dies ist ein Text!

— user8588011

1

Dies wird in HTML 5 nicht unterstützt.

— Stephen

2

Passen Sie diesen Code an Ihre Bedürfnisse an. Können Sie Text auswählen? im Absatz angeben, welche Schriftart oder welchen 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>

— Trevor Lee
quelle

1

Wenn Sie bereit sind, eine Bibliothek zu verwenden, erledigt Azle dies problemlos. Zielen Sie einfach auf die Klasse und Klasseninstanz Ihres Textelements. Wenn sich mein Textblock beispielsweise 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 einfärben oder gezielt auf die 1., 2. oder 3. Instanz des Wortes abzielen können :

Hier ist der FIDDLE

— Kybernetisch
quelle

0

Sie können auch eine Klasse erstellen:

 I am in yellow color!!!!!!

dann in einer CSS-Datei tun:

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

— JayMcpeZ_
quelle

-2

Sie könnten den längeren Boringer-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>

Erweitern Sie das Snippet

Sie bekommen den Punkt für den Rest

— otis Antwort
quelle