Maison > Article > interface Web > Couleurs HTML

Couleurs HTML

王林original: 2024-09-04 16:33:57567parcourir

Cet article explique comment utiliser les couleurs sur le site Web en utilisant HTML de manière simple et facile. Les couleurs jouent un rôle important dans la création de sites Web agréables à regarder et à se sentir bien. Il n'y a pas de balise HTML intégrée individuelle ; à la place, il utilise l'attribut style ou la propriété color. Justement, les couleurs sont intégrées dans les éléments HTML à l'aide d'une feuille de style en cascade (CSS). Les couleurs donnent un aspect élégant à la page Web. L'ajout de couleurs à la page Web comprend la définition des couleurs d'arrière-plan, des tableaux, des paragraphes, etc.

Comment définir une couleur d'arrière-plan en HTML ?

Rendre la couleur d'arrière-plan plus claire rend le site Web plus joli et plus audacieux. Cela se fait en utilisant des couleurs, des codes de couleur hexadécimaux. Valeurs de couleur RVB et RVBA (valeur Alpha 0 à 1).

La couleur hexadécimale est appliquée directement au code HTML en utilisant l'attribut Style à l'intérieur de l'élément body du HTML. Hex est une combinaison de chiffres et de lettres. Vous trouverez ci-dessous l'exemple illustrant la couleur d'arrière-plan sur la page Web.

Code :

<!DOCTYPE html>
<title>My Sample</title>
<html>
<head>
<title>HTML BG Color</title>
</head>
<body style="background-color:red;">
<h1> This page is a demo </h1>
</body>
</html>

Extraits de code :

Couleurs HTML

Pour ajouter une couleur d'arrière-plan, vous pouvez utiliser l'attribut bgcolor pour afficher < body bgcolor=’ ‘>. Il est compatible avec tous les navigateurs sauf en HTML 5.

Code :

<h3 style="color: blue">Color Name</h3>
<h3 style="color: #0000ff">Hexadecimal</h3>
<h3 style="color: rgb (0,0,255)">RGB Value</h3>

Comment appliquer de la couleur au texte en HTML ?

Appliquer de la couleur au texte HTML est assez simple ; nous pouvons ajouter/modifier la couleur du texte en appliquant trois manières, à savoir la couleur Hex, les valeurs HSL et les noms de couleurs. Voici les trois techniques différentes pour appliquer de la couleur aux pages Web correspondantes.

1. Noms des couleurs

C'est assez simple en utilisant des noms de couleurs anglais lorsque l'application est simple, ces noms de couleurs sont utilisés. La spécification des noms de couleurs est une méthode directe, et le W3C a annoncé 16 couleurs de base (noir, jaune, rouge, marron, gris, citron vert, vert, olive, argent, turquoise, bleu, marine, blanc, violet, fuchsia, sarcelle)

2. HSL

Valeurs de couleur de saturation de teinte et de luminosité. La teinte est définie de 0 à 360 degrés, la saturation et la luminosité de 0 à 100 %.

3. Couleur hexagonale

Pour obtenir un résultat précis, un nombre hexadécimal à six chiffres est appliqué. Pour élaborer, les deux premiers chiffres désignent le rouge, les deux suivants désignent le vert, les deux autres désignent la valeur bleue et précédés de « # ».

L'exemple suivant explique les différentes manières d'appliquer des couleurs aux documents.

Code :

<head>
<title>EDUCBA</title>
<style type="text/css">
h1{
color:#97cae0;
background-color: hsl(200, 50%, 20%);
color: hsl(200, 20%, 90%);
}
h4{
color:rgb(0, 255, 0);
background-color: hsl(130, 10%, 30%);
color: hsl(280, 20%, 80%);
}
li{
color:rgba(12, 88, 120, 1);
background-color: hsl(210, 36%, 50%);
color: hsl(145, 45%, 81%);
}
</style>
</head>
<body>
<h1>EDUCBA</h1>
<h4>List of operating System</h4>
<ul>
<li> Windows</li>
<li>MACINTOSH</li>
<li>LINUX</li>
<li>UBUNTU</li>
</ul>
</body>
</html>

Sortie :

Couleurs HTML

Il existe différentes méthodes pour colorer le texte, car HTML propose de nombreuses applications personnalisables.

Section Application du style
Création d'une feuille de style CSS individuelle
Enveloppement du texte