web-dev-qa-db-fra.com

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

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

"Participez au concours avant le 30 janvier 2011 et courez la chance de 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;">

formatez la chaîne de texte, mais souhaitez changer la couleur de "30 janvier 2011" à # FF0000 et "été" à # 0000A0. 

Comment puis-je faire cela strictement avec HTML ou CSS en ligne?

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

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

Vous pouvez utiliser le tag 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.

34
Juan Pablo Pinedo
<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 cassent donc pas le flux du paragraphe, mais seulement du style entre les balises.

31
Damien-Wright

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

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

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

9
user8588011

Personnalisez ce code comme vous le souhaitez, vous pouvez sélectionner du texte? dans le paragraphe, indiquez 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>
1
Trevor Lee

Vous pouvez aussi faire un cours: 

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

puis dans un fichier css faire: 

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

Vous pouvez utiliser la méthode plus longue 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>

vous obtenez le point pour le reste

0
otis answer

Si vous souhaitez utiliser une bibliothèque, Azle le fait facilement. Simplement cible les instances class et class de votre élément de texte. Par exemple, si mon bloc de texte est à l'intérieur d'un élément de la classe "my_text" et qu'il s'agit de la première instance de cette classe: 

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

Ce qui suit montre comment colorer chaque instance du mot ou cibler les 1re, 2e ou 3e instances du mot spécifiquement:

 enter image description here

Voici le VIOLON

0
Cybernetic