Colorier un seul mot avec CSS
Je souhaite définir la couleur des mots individuels dans un <pre> block (en gros, pour afficher le code avec la coloration syntaxique). Le <font> tag est déconseillé en faveur de l'utilisation de CSS, assez juste; quelle est la syntaxe requise? En particulier, dans quel élément les mots doivent-ils être enveloppés? J'ai déjà utilisé <div> pour marquer des morceaux de texte pour le style CSS, mais cela ne semble approprié que pour marquer des paragraphes entiers.
Vous devez utiliser l'élément inline le plus simple et le plus générique: <span> . Pour chaque type de jeton, donnez une ou plusieurs classes appropriées à la plage. Par exemple:
<span class="type">int</span>
<span class="name">foo</span>
<span class="op">=</span>
<span class="number literal">42</span>
Mise à jour: StackOverflow fait également la mise en évidence du code - le code juste au-dessus est mis en évidence! À quoi ressemble le code HTML pour cela? L'affichage du code HTML source montre que la première ligne est mise en surbrillance à l'aide
<span class="tag"><span</span>
<span class="pln"> </span>
<span class="atn">class</span>
<span class="pun">=</span>
<span class="atv">"type"</span>
<span class="tag">></span>
<span class="pln">int</span>
<span class="tag"></span></span>
// and it goes on
Utilisez span avec un attribut de style dessus. Comme:
This is a <span style="color:#f00;">sentence</span>.
Cet élément HTML est un conteneur générique en ligne pour le phrasé de contenu, qui ne représente rien en soi. Il peut être utilisé pour regrouper des éléments à des fins de style (à l'aide des attributs class ou id) ou parce qu'ils partagent des valeurs d'attribut, telles que lang. Il ne doit être utilisé que si aucun autre élément sémantique n'est approprié.
<span>ressemble beaucoup à un<div>élément, mais<div>est un élément de niveau bloc alors qu'un<span>est un élément en ligne.
Utilisation <span class="red">text</span> et quelques CSS de base comme .red { color: red; }
Edit: notez le nom de classe "rouge" n'est pas une bonne pratique
Il n'y a pas de magie de balisage ici: vous pouvez utiliser n'importe quel balisage en ligne, et vous faites la magie (coloration ou autre formatage) en CSS. Techniquement, tout le balisage en ligne n'est pas valide dans pre, mais les navigateurs s'en moquent vraiment. Il est plus important que certains balises en ligne aient un rendu ou une fonctionnalité par défaut.
Si vous ne voulez pas de rendu par défaut, vous pouvez utiliser le balisage a ou font ou span, qui n'a aucun impact sur quoi que ce soit quand ils n'ont pas d'attributs et ils ne sont pas stylisés. Si vous souhaitez un rendu par défaut, vous pouvez utiliser le balisage correspondant, s'il existe, tel que b pour gras ou u pour souligner. Cela signifie qu'une présentation spéciale est appliquée même si votre feuille de style n'est pas utilisée.
La plupart des gens décident d'utiliser simplement span, comme suggéré dans d'autres réponses. C'est simple, et personne ne peut prétendre qu'il a une "mauvaise sémantique", car il n'en a pas. Mais la magie est vraiment en CSS, et vous utilisez le balisage juste pour distinguer une séquence de caractères en tant qu'élément, afin qu'il puisse être stylisé comme une unité.
Contrairement à ce que vous entendez probablement la plupart des gens dire, il n'y a rien de mal à utiliser font lorsque vous effectuez réellement certains réglages de police. Mais il y a un problème pratique dans l'utilisation à l'ancienne comme <font color=red>. Si vous avez des milliers de balises comme ça et que votre patron ou client ou femme vous dit d'utiliser une nuance de rouge différente, vous devrez changer des myriades de balises, peut-être dans des dizaines de fichiers. Mais si vous avez écrit <font class=keyword> ou <a class=keyword> ou, si vous préférez, <span class=keyword>, et vous utilisez un fichier CSS référencé dans tous vos fichiers HTML, vous devrez modifier une seule valeur dans ce fichier CSS.