HTML: le Changement de couleurs de certains mots dans une chaîne de texte

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

"Participer à la compétition d'ici le 30 janvier 2011, et vous pourriez gagner jusqu'à
$$$$ — notamment été incroyable des voyages!"

J'ai actuellement:

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

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

Comment dois-je faire strictement avec le langage HTML ou CSS?

InformationsquelleAutor Mitch | 2011-01-07
  1. 89
    <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>
    • C'est une excellente réponse! Facilement démontre que les points représentent les balises à l'intérieur de l'étiquette de paragraphe. - Il vraiment précise cette information pour toute personne travaillant avec des <style>.
    • Ce doit être la accepté de répondre.
    InformationsquelleAutor Jacob
  2. 35

    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 l'utilise 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 de fond par défaut...au moins dans google Chrome.

    • Peut-être poster un exemple de jsfiddle.net.
    • Exemple peut être trouvé ici lien
    • Dommage que la réponse n'a pas été attribué. J'aurais attribué à ce (et fie à ceux qui utilisent des navigateurs qui ne prennent pas en charge le HTML (il y a encore tout?))
    • Une solution simple et efficace qui n'est ni plus ni moins, que l'OP a demandé.
    • La marque tag n'est pas destiné à être utilisé pour la mise en forme.
    • une bonne alternative à l'original de la réplique!

    InformationsquelleAutor Juan Pablo Pinedo
  3. 31
    <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>

    La durée éléments sont en ligne un donc de ne pas interrompre le flux de l'alinéa, seulement de style entre les balises.

    InformationsquelleAutor Damien-Wright
  4. 18

    utilisation s'étend. ex) <span style='color: #FF0000;'>January 30, 2011</span>

    InformationsquelleAutor brian_d
  5. 12
    <font color="red">This is some text!</font>

    Cela a fonctionné le mieux pour moi lorsque je voulais changer un seul mot dans la couleur rouge dans une phrase.

    • <font color="red">Ceci est du texte!</font>
    • Ce n'est pas pris en charge en HTML 5.
    InformationsquelleAutor user8588011
  6. 1

    Adapter ce code à votre guise en fonction de vos besoins, vous pouvez sélectionner du texte? dans le paragraphe à ce que 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>
    InformationsquelleAutor Trevor Lee
  7. 0

    Vous pouvez utiliser le plus boringer façon

    HTML:

    <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

    InformationsquelleAutor otis answer
  8. 0

    Vous pouvez également faire une classe:

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

    ensuite dans un fichier css à faire: 

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

    Si vous êtes prêt à utiliser une bibliothèque, Azle n'facilement. Simplement cible la classe et instance de classe de votre élément de texte. Par exemple, si mon bloc de texte à l'intérieur d'un élément avec la classe "my_text" et c'est la première instance de cette classe: 

    az.style_word('my_text', 1, {
    "this_class" : "colored_word", 
    "word" : "deploy",
    "color" : "red",
    "word_instance" : 2
})

    Suivant montre comment nous pouvons couleur chaque instance de la parole, ou la cible de la 1ère, 2ème ou 3ème occurrence du mot spécifiquement:

    HTML: le Changement de couleurs de certains mots dans une chaîne de texte

    Ici est la VIOLON

    InformationsquelleAutor Cybernetic