En CSS, pourquoi est-ce que la couleur du texte est définie avec color
et non text-color
ou font-color
? En outre, quelle est la différence entre font-
et text-
?Pourquoi la propriété de couleur du texte s'appelle-t-elle 'couleur'?
Répondre
La propriété color
n'appartient pas aux polices ou aux catégories de texte des propriétés. Il vit actuellement dans sa propre section de la spécification, à la fois CSS1 et CSS2.1. Il y a même un CSS3 module entier dédié à la couleur. Chaque spécification fait référence à color
en tant que définition de la couleur avant-plan, puis la décrit comme se référant à la couleur du contenu textuel de l'élément. Mais puisque foreground-color
serait inutilement verbeux, le mot "premier plan" est exclu du nom de la propriété. background-color
est auto-explicatif et sert de distinction de color
. Cela dit, tandis que la propriété color
affecte généralement le texte d'un élément, si vous spécifiez également une bordure sans spécifier de border-color
, la bordure prend la même couleur que le texte. Ceci est tout à fait normal, car il est stipulé in the CSS box model specification:
Si une couleur de l'élément de frontière n'est pas spécifié avec une propriété de la frontière, les agents utilisateurs doivent utiliser la valeur de la propriété « color » de l'élément que la valeur calculée pour la couleur de la bordure .
<div style="color: red; border: 1px dotted">
This block has red text and a red 1-pixel dotted border.
Notice only the width and style are specified in the style attribute.
</div>
Martin Algesten in his answer has a nice summary de la différence entre les propriétés de police et texte.
Font est une variante d'une police de caractères , à savoir Arial
est le visage de type, Arial Bold
est la police. Vous ne définissez pas la couleur de la police (je n'ai jamais entendu parler d'une police ayant une couleur spécifique). Vous définissez la couleur du texte.
Je suppose que l'idée serait que vous pouvez avoir d'autres éléments qui sont affectés par le color
, pas seulement du texte. Comparer avec text-decoration: underline
aurait évidemment juste affecter le texte, mais si nous imaginons que nous pourrions insérer une forme aléatoire inline, il serait également affecté par le color
.