HTML: Coloriage partie du texte dans une ligne

Considérez ce qui suit:HTML: Coloriage partie du texte dans une ligne

<p> 
    <b> 
     <div style="color:rgb(81,33,244)">Player1</div> 
    </b> 
    to overtake 
    <b> 
     <div style="color:rgb(187,4,0)">Player2</div> 
    </b> 
    in 1 hour 20 minutes 
</p>

Dans ce joueur 1 et le joueur 2 sont présentés dans des couleurs différentes, mais le « div » casse la ligne et il ressemble à quelque chose comme:

Joueur1

pour dépasser

Player2

en 1 heure 20 minutes

Comment puis-je colorer les joueurs et pourtant les garder sur la même ligne?

Source

2009-11-19 KalEl

Utiliser au lieu de la durée div

Source

2009-11-19 13:49:53

Changer votre div enjambent

En outre, envisager d'ajouter des attributs de classe et de mettre vos informations de style dans un fichier CSS externe.

Source

2009-11-19 13:50:04 MattBelanger

+1 pour les attributs de classe. Le style n'a pas besoin d'être dans un fichier séparé. L'utilisation de noms de classes à la place du style en ligne aidera à décrire l'intention, ce qui rendra le code plus facile à comprendre. Il fournira une définition centralisée, qui empêche la chirurgie du fusil plus tard, lorsque vous décidez de changer les couleurs. Cela réduit également le besoin des balises «b», car vous pouvez joindre des spécifications de poids de police aux définitions de classe. –

Modifiez les éléments b.

Source

2009-11-19 13:50:17 Quentin

+1 pour remarquer que l'ajout d'éléments supplémentaires est totalement redondant dans l'exemple donné –

Utilisez un inline element tel que span plutôt qu'un élément de bloc tel que div. En fait, étant donné que le but du style semble être de mettre l'accent sur les noms des joueurs, je dirais em est la balise la plus appropriée à utiliser:

<!DOCTYPE html> 
<html> 
<head> 
<title>Test</title> 
<style type="text/css"> 
    .status em { font-weight:bold; font-style:normal } 
    .player1 { color:rgb(81,33,244) } 
    .player2 { color:rgb(187,4,0) } 
</style> 
</head> 
<body> 

    <p class="status"><em class="player1">Player1</em> to overtake <em 
     class="player2">Player2</em> in 1 hour 20 minutes</p> 

</body> 
</html>

Source

2009-11-19 13:50:23

HTML: Coloriage partie du texte dans une ligne

Répondre

Questions connexes