Maison > Article > interface Web > Comment définir la couleur en HTML

Comment définir la couleur en HTML

PHPzoriginal: 2023-04-21 14:16:2311327parcourir

HTML est un langage de balisage utilisé pour créer et concevoir des pages Web. Lors de la création de pages Web, l’utilisation de la couleur peut les rendre plus attrayantes et plus lisibles. HTML propose de nombreuses façons de définir les couleurs. Dans cet article, nous apprendrons comment définir les couleurs en utilisant HTML.

1. Concepts de base des couleurs HTML

Les couleurs HTML utilisent généralement le mode de couleur RVB (composé des valeurs de luminosité du rouge, du vert et du bleu). Les couleurs de base sont représentées par des mots tels que « Noir » pour le noir, « Blanc » pour le blanc, « Bleu » pour le bleu, etc. En HTML, vous pouvez utiliser les méthodes suivantes pour définir les couleurs :

2. Utiliser les noms de couleurs

En HTML, vous pouvez directement utiliser les noms de couleurs pour définir les couleurs. Les noms de couleurs incluent les noms de couleurs de base et certains noms de couleurs courants. Les noms de couleurs courants sont les suivants :

Exemple de code :

<body style="background-color: DodgerBlue;">
    <h1 style="color:White;">Hello World!</h1>
    <p style="color:SlateGray;">This is a paragraph.</p>
</body>

3. Utilisez des valeurs hexadécimales pour définir les couleurs

En plus d'utiliser des noms de couleurs, vous pouvez également utiliser des valeurs RVB pour définir les couleurs. La couleur RVB se compose des valeurs de trois canaux de couleur : rouge, vert et bleu, et la valeur de chaque canal est représentée par un nombre de 0 à 255. En HTML, vous pouvez également définir une couleur au format hexadécimal (Hex). La valeur hexadécimale commence par le symbole #, suivi de 6 chiffres hexadécimaux, où les deux premiers chiffres représentent la valeur du canal rouge, les deux chiffres du milieu représentent la valeur du canal vert et les deux derniers chiffres représentent la valeur du canal bleu. . Voici quelques valeurs hexadécimales courantes pour les couleurs :

Exemple de code :

<body style="background-color: #1E90FF;">
    <h1 style="color:#FFF;">Hello World!</h1>
    <p style="color:#708090;">This is a paragraph.</p>
</body>

Il y a certains avantages à définir les couleurs à l'aide de valeurs hexadécimales. Premièrement, il offre plus d’options de couleurs. Deuxièmement, l'utilisation de valeurs hexadécimales garantit la cohérence des couleurs lorsque plusieurs éléments utilisent la même couleur.

4. Utilisez les valeurs RVB pour définir les couleurs

La valeur RVB est un ensemble de trois nombres, représentant la valeur de luminosité de chaque canal de couleur, qui peut être sélectionnée entre 0 et 255. En HTML, vous pouvez utiliser le code suivant pour définir les couleurs RVB :

Exemple de code :

<body style="background-color: RGB(30,144,255);">
    <h1 style="color:RGB(255,255,255);">Hello World!</h1>
    <p style="color:RGB(112,128,144);">This is a paragraph.</p>
</body>

5. Utilisez les valeurs HSL pour définir les couleurs

Les valeurs HSL représentent la teinte, la saturation et la luminosité d'une couleur. Dans la valeur HSL, H représente la teinte, S représente la saturation et L représente la luminosité. En HTML, vous pouvez utiliser le code suivant pour définir les couleurs HSL :

Exemple de code :

<body style="background-color: hsl(210, 100%, 50%);">
    <h1 style="color:hsl(0, 0%, 100%);">Hello World!</h1>
    <p style="color:hsl(210, 11%, 49%);">This is a paragraph.</p>
</body>

6. Utilisez des feuilles de style CSS pour définir les couleurs

En HTML, vous pouvez également utiliser des feuilles de style CSS pour définir les couleurs. Les feuilles de style CSS sont une technologie qui sépare les informations de style des documents HTML, nous permettant ainsi d'éditer les pages HTML de manière plus claire et logique. Voici un exemple de code :

<head>
<style>
body {
    background-color: #1E90FF;
}

h1 {
    color: #FFF;
}

p {
    color: #708090;
}
</style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
</body>

Résumé :

Il existe de nombreuses façons de définir les couleurs en HTML. Utilisez des noms de couleurs pour définir facilement les couleurs de base et couramment utilisées, utilisez des valeurs hexadécimales et des valeurs RVB pour offrir plus de choix de couleurs et utilisez des valeurs HSL pour nous permettre de définir les couleurs plus précisément. L'utilisation de feuilles de style CSS nous permet de définir les couleurs de manière plus pratique et logique. Différentes méthodes conviennent à différentes situations et il est important de choisir la méthode qui vous convient.

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!

Déclaration：

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

Article précédent：Quels sont les exemples fonctionnels implémentés par javascript ?Article suivant：Quels sont les exemples fonctionnels implémentés par javascript ?

Articles Liés

Voir plus