web-dev-qa-db-fra.com

comment définir différentes couleurs en HTML en une seule déclaration

Bonjour, je pense avoir différentes couleurs de texte sur une ligne. Comment cela est-il possible? 

<p style="color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20"> My Name is: 

 <"color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20"> Tintincute </p>

Je voudrais avoir une couleur différente pour Tintincute mais dans une ligne le problème avec cela, le nom est passé d'un espace. 

Voici l'exemple de code: 

<p style="color:#4C4C4C;font-weight:bold">All fields marked with   <style="color:#FF0000;font-weight:bold">*</color> <style="color:#4C4C4C;font-weight:bold">are required</p>

@Phil: J'ai essayé d'utiliser le code, mais cela n'a pas fonctionné. Le code lui-même était affiché sur la page. Voici comment je l'ai fait: 

<div style="color:red">[+validationmessage+]</div>
p.detail {color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name {color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
<p class="detail">My Name is: <span class="name">Tintincute</span> </p>
htmltext
9
tintincutes

Vous pouvez utiliser CSS pour cela et créer des classes pour les éléments. Donc, vous auriez quelque chose comme ça 

p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }

Ensuite, votre code HTML se lirait comme suit:

<p class="detail">My Name is: <span class="name">Tintinecute</span> </p>

C'est beaucoup plus ordonné que les feuilles de style en ligne, il est plus facile à maintenir et à réutiliser plus facilement.

Voici le code HTML complet pour démontrer ce que je veux dire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <style type="text/css">
    p.detail { color:#4C4C4C;font-weight:bold;font-family:Calibri;font-size:20 }
    span.name { color:#FF0000;font-weight:bold;font-family:Tahoma;font-size:20 }
    </style>
</head>
<body>
    <p class="detail">My Name is: <span class="name">Tintinecute</span> </p>
</body>
</html>

Vous verrez que j'ai les classes de feuilles de style dans une balise de style dans l'en-tête, puis j'applique uniquement ces classes dans le code tel que <p class="detail"> ... </p>. Suivez le didacticiel w3schools, cela ne vous prendra que quelques heures et vous transformera vraiment en style pour le style de vos éléments HTML. Si vous le coupez et le collez dans un document HTML, vous pouvez modifier les styles et voir leur effet à l'ouverture du fichier dans un navigateur. Expérimenter comme cela est un excellent moyen d'apprendre.

20
Phil

Utilisez la balise span

<style>
    .redText
    {
        color:red;
    }
    .blackText
    {
        color:black;
        font-weight:bold;
    }
</style>

<span class="redText">My Name is:</span>&nbsp;<span class="blackText">Tintincute</span>

C'est également une bonne idée d'éviter le style en ligne. Utilisez plutôt une classe CSS personnalisée.

8
James Hill

Comment utiliser le tag FONT?

Comme:

H<font color="red">E</font>LLO.

Impossible d'afficher un exemple ici, car ce site n'autorise pas l'utilisation de balises de police.

Le style Span est rapide et facile aussi.

2
JSiren

.Rainbow {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<h2><span class="Rainbow">Rainbows are colorful and scalable and lovely</span></h2>

1
Aashish