Pourquoi changer la couleur de la police HTML?<\/h2>\n
Vous voudriez changer la couleur de la police parce que cela peut aider \u00e0 am\u00e9liorer la lisibilit\u00e9 et l’accessibilit\u00e9 de votre site web. Par exemple, si votre site utilise un sch\u00e9ma de couleurs plus sombres, laisser la couleur de la police en noir rendrait difficile la lecture du texte sur votre site web.<\/p>\n
Une autre raison pour laquelle vous pourriez envisager de changer la couleur de la police est si vous comptez utiliser une couleur plus sombre de la palette de couleurs de votre marque. C’est une autre occasion de renforcer votre marque. Cela renforce la coh\u00e9rence de la marque et garantit que le texte sur tous tes canaux de marketing a la m\u00eame apparence.<\/p>\n
Ceci \u00e9tant dit, voyons comment vous pouvez d\u00e9finir et modifier la couleur de la police HTML<\/a>.<\/p>\n\n Il existe plusieurs fa\u00e7ons de d\u00e9finir la couleur dans la conception web, notamment le nom, les valeurs RVB, les codes hexagonaux et les valeurs HSL. Voyons comment elles fonctionnent.<\/p>\n Les noms de couleur<\/a> sont le moyen le plus simple de d\u00e9finir une couleur dans vos styles CSS. Le nom de la couleur fait r\u00e9f\u00e9rence au nom sp\u00e9cifique de la couleur HTML. Actuellement, 140 noms de couleur sont pris en charge, et vous pouvez utiliser n’importe laquelle de ces couleurs dans vos styles. Par exemple, vous pouvez utiliser \u00ab blue \u00bb pour d\u00e9finir la couleur d’un \u00e9l\u00e9ment individuel en bleu.<\/p>\n Cependant, l’inconv\u00e9nient de cette approche est que tous les noms de couleur ne sont pas pris en charge. En d’autres termes, si vous utilisez une couleur qui ne figure pas sur la liste des couleurs prises en charge, vous ne pourrez pas l’utiliser dans votre design par son nom de couleur.<\/p>\n Ensuite, nous avons les valeurs RVB et RGBA<\/a>. La valeur RVB signifie Rouge, Vert et Bleu. Il d\u00e9finit la couleur en m\u00e9langeant les valeurs rouge, verte et bleue, de la m\u00eame fa\u00e7on que vous m\u00e9langeriez une couleur sur une palette r\u00e9elle.<\/p>\n La valeur RVB ressemble \u00e0 ceci : RGB(153,0,255). Le premier chiffre indique l’entr\u00e9e de la couleur rouge, le deuxi\u00e8me indique l’entr\u00e9e de la couleur verte et le troisi\u00e8me indique le bleu.<\/p>\n La valeur de chaque entr\u00e9e de couleur peut \u00eatre comprise entre 0 et 255, o\u00f9 0 signifie que la couleur n’est pas du tout pr\u00e9sente et 255 signifie que la couleur particuli\u00e8re est \u00e0 son intensit\u00e9 maximale.<\/p>\n La valeur RGBA ajoute une autre valeur au m\u00e9lange, et c’est la valeur alpha qui repr\u00e9sente l’opacit\u00e9. Elle va de 0 (non transparent) \u00e0 1 (totalement transparent).<\/p>\n Les codes de couleur hexagonaux fonctionnent de mani\u00e8re similaire aux codes RVB. Ils se composent de chiffres de 0 \u00e0 9 et de lettres de A \u00e0 F. Le code hexa ressemble \u00e0 ceci : #800080. Les deux premi\u00e8res lettres indiquent l’intensit\u00e9 de la couleur rouge, les deux chiffres du milieu indiquent l’intensit\u00e9 de la couleur verte et les deux derniers indiquent l’intensit\u00e9 de la couleur bleue.<\/p>\n Une autre fa\u00e7on de d\u00e9finir les couleurs en HTML est d’utiliser les valeurs HSL. HSL est l’abr\u00e9viation de hue, saturation et lightness.<\/p>\n La teinte utilise des degr\u00e9s de 0 \u00e0 360. Sur une roue chromatique standard, le rouge est \u00e0 environ 0\/360, le vert \u00e0 120 et le bleu \u00e0 240.<\/p>\n La saturation utilise des pourcentages pour d\u00e9finir le degr\u00e9 de saturation de la couleur. 0 repr\u00e9sente le noir et blanc, et 100 repr\u00e9sente la couleur compl\u00e8te.<\/p>\n Enfin, la luminosit\u00e9 utilise des pourcentages similaires \u00e0 la saturation. Dans ce cas, 0 % repr\u00e9sente le noir, et 100 % repr\u00e9sente le blanc.<\/p>\n Par exemple, la couleur violette que nous avons utilis\u00e9e tout au long de cet article ressemblerait \u00e0 ceci en HSL : HSL, comme RGB, prend en charge l’opacit\u00e9. Dans ce cas, vous utiliseriez la valeur HSLA o\u00f9 A repr\u00e9sente l’alpha et est d\u00e9fini par un nombre de 0 \u00e0 1. Si nous voulions diminuer l’opacit\u00e9 de l’exemple violet, nous utiliserions ce code : Maintenant que vous savez comment d\u00e9finir la couleur, examinons les diff\u00e9rentes fa\u00e7ons de modifier la couleur de la police HTML.<\/p>\n Avant l’introduction de HTML5<\/a> et son adoption comme norme de codage, vous pouviez changer la couleur de la police en utilisant les balises de police. Plus pr\u00e9cis\u00e9ment, vous utilisiez la balise de police avec l’attribut color pour d\u00e9finir la couleur du texte. La balise Voici un exemple de l’aspect de ce code avec le code couleur hex :<\/p>\n Et voici comment vous pourriez d\u00e9finir la couleur du texte en violet en utilisant le nom de la couleur.<\/p>\n Cependant, la balise Alors si la balise <font> n’est plus prise en charge, comment changer la couleur de la police HTML ? La r\u00e9ponse est avec les feuilles de style en cascade ou CSS<\/a>.<\/p>\n Pour modifier la couleur de la police HTML avec CSS, vous utiliserez la propri\u00e9t\u00e9 CSS color associ\u00e9e au s\u00e9lecteur appropri\u00e9. CSS<\/a> vous permet d’utiliser des noms de couleur, des valeurs RGB, hex et HSL pour sp\u00e9cifier la couleur. Il existe trois fa\u00e7ons d’utiliser CSS pour modifier la couleur de la police.<\/p>\n Le CSS en ligne est ajout\u00e9 directement \u00e0 votre fichier HTML. Vous utiliserez la balise HTML telle que <p> puis vous la styliserez avec la propri\u00e9t\u00e9 de couleur CSS comme suit :<\/p>\n Si vous voulez utiliser une valeur hexagonale, votre code ressemblera \u00e0 ceci :<\/p>\n Si vous voulez utiliser la valeur RGB, vous l’\u00e9crirez comme ceci :<\/p>\n Enfin, si vous utilisez les valeurs HSL, vous utiliserez ce code :<\/p>\n Les exemples ci-dessus vous montrent comment changer la couleur d’un paragraphe sur votre site web. Mais vous n’\u00eates pas limit\u00e9 aux seuls paragraphes. Vous pouvez changer la couleur de la police de tes en-t\u00eates ainsi que des liens.<\/p>\n Par exemple, en rempla\u00e7ant la balise Si vous voulez changer la couleur d’arri\u00e8re-plan de tout un paragraphe ou d’un titre, c’est tr\u00e8s similaire \u00e0 la fa\u00e7on dont vous changeriez la couleur de la police. Vous devez utiliser l’attribut Le CSS int\u00e9gr\u00e9 se trouve dans les balises Le code ressemblera \u00e0 ceci si vous voulez utiliser le nom de la couleur :<\/p>\n Le code ci-dessus changera la couleur de chaque paragraphe de la page en violet. Comme pour la m\u00e9thode CSS en ligne, vous pouvez utiliser diff\u00e9rents s\u00e9lecteurs pour modifier la couleur de la police de vos titres et de vos liens.<\/p>\n Si vous voulez utiliser le code hexad\u00e9cimal, voici \u00e0 quoi ressemblerait le code :<\/p>\n L’exemple ci-dessous utilise les valeurs RBGA pour que vous puissiez voir un exemple de r\u00e9glage de l’opacit\u00e9 :<\/p>\n Et le code HSL ressemblerait \u00e0 ceci :<\/p>\n Enfin, vous pouvez utiliser le CSS externe<\/a> pour modifier la couleur de la police sur votre site web. Le CSS externe est un CSS qui est plac\u00e9 dans un fichier de feuille de style s\u00e9par\u00e9, g\u00e9n\u00e9ralement appel\u00e9 style.css ou stylesheet.css.<\/p>\n Cette feuille de style est responsable de tous les styles de votre site et sp\u00e9cifie les couleurs et les tailles des polices, les marges, les marges int\u00e9rieures, les familles de polices, les couleurs d’arri\u00e8re-plan, etc. En bref, la feuille de style est responsable de l’aspect visuel de votre site.<\/p>\n Pour modifier la couleur de la police avec un CSS externe, vous utiliseriez des s\u00e9lecteurs<\/a> pour styliser les parties du HTML que vous voulez. Par exemple, ce code modifiera tout le corps du texte de votre site :<\/p>\n N’oublie pas que vous pouvez utiliser les valeurs RGB, hex et HSL et pas seulement les noms des couleurs pour changer la couleur de la police. Si vous voulez modifier la feuille de style, il est recommand\u00e9 de le faire dans un \u00e9diteur de code<\/a>.<\/p>\n Vous savez donc maintenant comment utiliser CSS pour modifier la couleur de la police. Mais quelle m\u00e9thode devez-vous utiliser ?<\/p>\n Si vous utilisez le code CSS en ligne, vous l’ajouterez directement dans votre fichier HTML. En g\u00e9n\u00e9ral, cette m\u00e9thode convient pour les corrections rapides. Si vous voulez changer la couleur d’un paragraphe ou d’un titre sp\u00e9cifique sur une seule page, cette m\u00e9thode est la plus rapide et la moins compliqu\u00e9e.<\/p>\n Cependant, les styles en ligne peuvent augmenter la taille de votre fichier HTML. Plus votre fichier HTML est gros, plus votre page web mettra du temps \u00e0 se charger. En plus de cela, les CSS en ligne peuvent rendre votre HTML d\u00e9sordonn\u00e9. C’est pourquoi la m\u00e9thode d’utilisation de CSS en ligne pour modifier la couleur de la police HTML est g\u00e9n\u00e9ralement d\u00e9conseill\u00e9e.<\/p>\n Le CSS incorpor\u00e9 est plac\u00e9 entre les balises <head> et \u00e0 l’int\u00e9rieur des balises <style>. Comme le CSS en ligne, il est bon pour les corrections rapides et pour remplacer les styles sp\u00e9cifi\u00e9s dans une feuille de style externe.<\/p>\n Une distinction notable entre les styles en ligne et int\u00e9gr\u00e9s est qu’ils s’appliquent \u00e0 toute page sur laquelle les balises head sont charg\u00e9es, alors que les styles en ligne ne s’appliquent qu’\u00e0 la page sp\u00e9cifique sur laquelle ils se trouvent, g\u00e9n\u00e9ralement l’\u00e9l\u00e9ment qu’ils ciblent sur cette page.<\/p>\n La derni\u00e8re m\u00e9thode, le CSS externe, utilise une feuille de style d\u00e9di\u00e9e pour d\u00e9finir vos styles visuels. En g\u00e9n\u00e9ral, il est pr\u00e9f\u00e9rable d’utiliser une feuille de style externe pour conserver tous vos styles en un seul endroit, d’o\u00f9 ils sont faciles \u00e0 modifier. Cela permet \u00e9galement de s\u00e9parer la pr\u00e9sentation et la conception, afin que le code soit facile \u00e0 g\u00e9rer et \u00e0 entretenir.<\/p>\n N’oubliez pas que les styles en ligne et int\u00e9gr\u00e9s peuvent remplacer les styles d\u00e9finis dans la feuille de style externe.<\/p>\n Les deux principales m\u00e9thodes pour modifier les couleurs des polices HTML consistent \u00e0 utiliser la balise de police ou les styles CSS. Ces deux m\u00e9thodes ont leurs avantages et leurs inconv\u00e9nients.<\/p>\n La balise de police HTML est facile \u00e0 utiliser, c’est donc un atout en sa faveur. En g\u00e9n\u00e9ral, les CSS sont plus compliqu\u00e9s et prennent plus de temps \u00e0 apprendre que de saisir M\u00eame si la balise font est facile \u00e0 utiliser, tu ne devrais pas l’utiliser si votre site web utilise HTML. Comme mentionn\u00e9 pr\u00e9c\u00e9demment, la balise font a \u00e9t\u00e9 d\u00e9pr\u00e9ci\u00e9e en HTML5. Il faut \u00e9viter d’utiliser un code d\u00e9pr\u00e9ci\u00e9 car les navigateurs peuvent cesser de le prendre en charge \u00e0 tout moment. Cela peut conduire \u00e0 ce que votre site web se casse et ne fonctionne pas correctement, ou pire, ne s’affiche pas du tout pour vos visiteurs.<\/p>\n CSS, comme la balise de police, a ses avantages et ses inconv\u00e9nients. L’avantage le plus important de l’utilisation de CSS est que c’est le bon moyen de changer la couleur des polices et de sp\u00e9cifier tous les autres styles pour votre site web.<\/p>\n Comme mentionn\u00e9 pr\u00e9c\u00e9demment, il s\u00e9pare la pr\u00e9sentation de la conception, ce qui rend votre code plus facile \u00e0 g\u00e9rer et \u00e0 maintenir.<\/p>\n L’inconv\u00e9nient, c’est que CSS et HTML5 peuvent prendre du temps \u00e0 apprendre et \u00e0 \u00e9crire correctement par rapport \u00e0 l’ancienne fa\u00e7on d’\u00e9crire du code.<\/p>\n N’oubliez pas qu’avec CSS, vous avez diff\u00e9rentes fa\u00e7ons de changer la couleur de la police, et que chacune de ces m\u00e9thodes a ses propres avantages et inconv\u00e9nients, comme nous l’avons vu pr\u00e9c\u00e9demment.<\/p>\n Maintenant que vous savez comment changer la couleur de la police HTML, voici quelques conseils qui vous seront utiles.<\/p>\n Au lieu de choisir les couleurs au hasard, utilisez des s\u00e9lecteurs de couleurs<\/a> pour s\u00e9lectionner les bonnes couleurs. L’avantage d’un s\u00e9lecteur de couleurs est qu’il vous donnera le nom de la couleur et les valeurs hex, RVB et HSL correctes que vous devez utiliser dans votre code.<\/p>\n Un texte fonc\u00e9 avec un arri\u00e8re-plan sombre ou un texte clair avec un arri\u00e8re-plan clair ne fonctionnent pas bien ensemble. Ils rendront le texte de votre site difficile \u00e0 lire. Cependant, vous pouvez utiliser un v\u00e9rificateur de contraste<\/a> pour vous assurer que les couleurs de votre site sont accessibles et que le texte est facile \u00e0 lire.<\/p>\nLes fa\u00e7ons de d\u00e9finir la couleur<\/h2>\n
Nom de la couleur<\/h3>\n
![\"Noms](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/red-color-name.png\")
Valeurs RVB et RGBA<\/h3>\n
![\"Valeurs](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/rgb-values.png\")
Valeur HEX<\/h3>\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/hex-values.png\")
Valeurs HSL et HSLA<\/h3>\n
![\"Valeurs](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/HSL-color-values.png\")
hsl(276, 100%, 50%)<\/code>.<\/p>\nhsl(276, 100%, 50%, .85)<\/code>.<\/p>\nL’ancien : Balises
<font><\/code><\/h2>\ncolor<\/code> \u00e9tait sp\u00e9cifi\u00e9e soit par son nom, soit par son code hexad\u00e9cimal.<\/p>\n<font color=\"#800080\">This text is purple.<\/font><\/code><\/pre>\n<font color=\"purple\">This text is purple.<\/font> <\/code><\/pre>\n<font><\/code> est d\u00e9pr\u00e9ci\u00e9e en HTML5 et n’est plus utilis\u00e9e. Changer la couleur de la police est une d\u00e9cision de conception, et la conception n’est pas le but premier du HTML. Par cons\u00e9quent, il est logique que les balises <font><\/code> ne soient plus prises en charge en HTML5.<\/p>\nLe nouveau : Styles CSS<\/h2>\n
CSS en ligne<\/h3>\n
<p style=\"color: purple\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:#800080\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:RGB(153,0,255)\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p style=\"color:hsl(276, 100%, 50%)\">This is a purple paragraph.<\/p><\/code><\/pre>\n<p><\/code> ci-dessus par <h2><\/code>, vous changeras la couleur du texte de ce titre, tandis qu’en la rempla\u00e7ant par la balise <a><\/code>, vous changerez la couleur de ce lien. Vous pouvez aussi utiliser l’\u00e9l\u00e9ment <span><\/a> pour colorer n’importe quelle quantit\u00e9 de texte.<\/p>\nbackground-color<\/code> \u00e0 la place et utiliser soit le nom de la couleur, soit les valeurs hex, RVB ou HSL pour d\u00e9finir la couleur. Voici un exemple<\/p>\n<p style=\"background-color: purple\"><\/code><\/pre>\nCSS int\u00e9gr\u00e9<\/h3>\n
<style><\/code> et est plac\u00e9 entre les balises d’en-t\u00eate de votre document HTML.<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: purple;\n }\n<\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: #800080;\n }\n <\/style>\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n\n<html>\n\n<head>\n\n<style>\n\n<p> {\n\ncolor: RGB(153,0,255,0.75),\n\n}\n\n<\/style>\n\n<\/head><\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <style>\n <p> {\n color: hsl(276, 100%, 50%),\n }\n <\/style>\n<\/head><\/code><\/pre>\nCSS externe<\/h3>\n
body {color: purple;}<\/code><\/pre>\nEn ligne, int\u00e9gr\u00e9 ou externe ?<\/h3>\n
Balises de police ou styles CSS : Avantages et inconv\u00e9nients<\/h2>\n
Balises de police HTML : avantages et inconv\u00e9nients<\/h3>\n
<font color=\"purple\"><\/code>. Si vous avez un site web plus ancien qui n’utilise pas HTML5, alors la balise de police est une m\u00e9thode viable pour changer la couleur de la police.<\/p>\nAvantages et inconv\u00e9nients de CSS<\/h3>\n
Conseils pour changer la couleur de la police HTML<\/h2>\n
Utilisez un s\u00e9lecteur de couleurs<\/h3>\n
![\"Les](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Color-picker-tool.png\")
V\u00e9rifiez le contraste<\/h3>\n
![\"Utilisez](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Checking-contrast.png\")
Trouver la couleur en utilisant la m\u00e9thode Inspecter<\/h3>\n
![\"Utiliser](\"https:\/\/kinsta.com\/wp-content\/uploads\/2021\/10\/Using-Inspect-to-get-color-codes.png\")