HTML: modification des couleurs de mots spécifiques dans une chaîne de texte

89

J'ai le message ci-dessous (légèrement modifié):

"Participez au concours avant le 30 janvier 2011 et vous pourriez gagner jusqu'à $$$$ - y compris des voyages d'été incroyables!"

J'ai actuellement:

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

formatage de la chaîne de texte, mais souhaitez changer la couleur de «30 janvier 2011» en # FF0000 et de «été» en # 0000A0.

Comment faire cela strictement avec du HTML ou du CSS en ligne?

html css text colors inline Mitch
la source

Réponses:

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

Ou vous pouvez utiliser des classes CSS à la place:

<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
la source
1
C'est une excellente réponse! Démontre facilement que les points représentent des balises à l'intérieur des balises de paragraphe. Cela clarifie vraiment ces informations pour quiconque travaille avec <style>.
Joseph Poirier
42

Vous pouvez utiliser la balise HTML5 <mark>:

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

Et utilisez ceci dans le 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;
}

La balise <mark>a une couleur d'arrière-plan par défaut ... au moins dans Chrome.

Juan Pablo Pinedo
la source
3
Dommage que la réponse n'ait pas été accordée. Je l'aurais attribué à cela (et à ceux qui utilisent des navigateurs qui ne prennent pas en charge HTML (y en a-t-il encore?))
Mawg dit de réintégrer Monica le
Une solution simple et efficace qui ne fait ni plus ni moins que le PO demandé.
Victor Stoddard
La balise mark n'est pas destinée à être utilisée pour le formatage.
Jessica B
belle alternative à la réponse originale!
Joseph Poirier
35 
<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>

Les éléments span sont en ligne et ne rompent donc pas le flux du paragraphe, seulement le style entre les balises.

Damien-Wright
la source
19

utiliser des travées. ex)<span style='color: #FF0000;'>January 30, 2011</span>

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

Cela a fonctionné le mieux pour moi lorsque je ne voulais changer qu'un mot en rouge dans une phrase.

user8588011
la source
<font color = "red"> Ceci est un texte! </font>
user8588011
1
Ce n'est pas pris en charge dans HTML 5.
Stephen
2

Adaptez ce code comme vous le souhaitez à vos besoins, pouvez-vous sélectionner du texte? dans le paragraphe pour indiquer la police ou le style dont vous avez besoin !:

<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
la source
1

Vous pouvez également créer un cours:

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

puis dans un fichier css, faites: 

.mychangecolor{ color:#ff5 /* it changes to yellow */ }
JayMcpeZ_
la source
-2

Vous pouvez utiliser le moyen le plus long de boringer 

<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>
Développer l'extrait

vous obtenez le point pour le reste

otis réponse
la source