Comment changer la couleur de la police en HTML

PHPz
Libérer: 2023-04-24 11:07:07
original
20882 Les gens l'ont consulté

Dans la conception Web, changer la couleur de la police peut rendre la page plus vivante et attrayante, et mieux attirer l'attention du lecteur. Comment modifier la couleur de la police HTML est également l’une des compétences de base que tout concepteur de sites Web doit maîtriser. Dans cet article, nous présenterons certaines des méthodes les plus courantes pour modifier la couleur de la police HTML et le code pour les implémenter.

1. Utiliser des noms de couleurs

Le moyen le plus simple de changer la couleur de la police en HTML est d'utiliser des noms de couleurs. En HTML, vous pouvez définir les couleurs des polices à l'aide de noms de couleurs prédéfinis. Voici quelques-uns des noms de couleurs les plus courants :

  • rouge
  • noir
  • bleu
  • jaune
  • vert
  • blanc
  • gris (Gris)

Pour chaque nom de couleur, il existe une valeur de code correspondante qui peut être utilisé pour définir la couleur de la police dans le code HTML. Par exemple, pour définir la couleur de la police sur rouge, le code est le suivant :

<p style="color: red;">Hello World!</p>
Copier après la connexion

2. Utilisez un code couleur hexadécimal

En plus d'utiliser des noms de couleur prédéfinis, vous pouvez également utiliser des codes couleur hexadécimaux pour modifier la couleur de la police. Le code couleur hexadécimal est composé de trois couleurs de base : rouge, vert et bleu, chacune ayant une valeur de 0 à 255. En HTML, vous pouvez colorer les polices en utilisant une combinaison de ces valeurs de couleur comme code couleur hexadécimal.

Ce qui suit est un exemple, définissez la couleur de la police sur bleu, le code est le suivant :

<p style="color: #0000FF;">Hello World!</p>
Copier après la connexion

3. Utilisez les valeurs de couleur RVB

En plus d'utiliser des noms de couleur prédéfinis et des codes de couleur hexadécimaux, vous pouvez également utiliser Valeurs de couleur RVB pour changer la couleur de la police. Les valeurs de couleur RVB sont composées de trois valeurs de couleur : rouge, vert et bleu. Ces valeurs de couleur sont toutes des nombres entiers de 0 à 255.

Voici un exemple, en définissant la couleur de la police sur vert, le code est le suivant :

<p style="color: rgb(0, 128, 0);">Hello World!</p>
Copier après la connexion

La méthode de valeur de couleur RVB est un moyen flexible de définir la couleur de la police car vous pouvez contrôler directement l'intensité de chaque canal de couleur.

4. Utiliser les valeurs de couleur HSL et HSV

HSL et HSV sont deux méthodes de représentation des couleurs plus intuitives que RVB. Elles sont basées respectivement sur la teinte, la saturation et la luminosité/valeur de la couleur. En HTML, vous pouvez utiliser les valeurs de couleur HSL et HSV pour obtenir des ajustements de couleur plus spécifiques et complexes.

Ce qui suit est un exemple de code qui utilise les valeurs de couleur HSL pour modifier la couleur de la police :

<p style="color: hsl(0, 100%, 50%);">Hello World!</p>
Copier après la connexion

Ce code définit la couleur de la police sur rouge et le premier paramètre 0 表示红色色相,第二个参数 100% 表示完全饱和度,第三个参数 50% représente 50 % de luminosité.

5. Utilisez des classes et des identifiants en CSS

En HTML, vous pouvez également utiliser des sélecteurs de classe et d'ID pour contrôler la couleur de la police sur la page. L'avantage de l'utilisation des sélecteurs de classe et d'ID est que vous pouvez modifier la couleur de plusieurs éléments de page via une feuille de style CSS sans modifier l'attribut color de chaque élément HTML.

Voici un exemple d'utilisation de sélecteurs de classe CSS pour définir la couleur de la police :

Code CSS :

.myclass {
    color: red;
}
Copier après la connexion

Code HTML :

<p class="myclass">Hello World!</p>
Copier après la connexion

Ce code définit la couleur de police d'un seul paragraphe sur rouge, qui est définie dans la feuille de style. . Le sélecteur de classe myclass est appliqué.

En même temps, si vous souhaitez modifier les attributs de couleur de plusieurs éléments de page, vous pouvez utiliser le sélecteur d'ID :

Code CSS :

#myid {
    color: red;
}
Copier après la connexion

Code HTML :

<p id="myid">Hello World!</p>
Copier après la connexion

Résumé

Dans la conception Web HTML, modifier la couleur de la police peut rendre la page plus accrocheuse et accrocheuse. Cet article vous présente certaines des manières les plus courantes et les plus simples de modifier la couleur de la police HTML, notamment via les noms de couleurs, les tableaux hexadécimaux, les valeurs RVB, les schémas HSL et HSV, ainsi que les classes CSS et les sélecteurs d'ID. Mais en même temps, veillez à suivre les bons principes de conception Web lorsque vous appliquez ces méthodes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal