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

Table des matières:

Anonim

Introduction aux couleurs HTML

Cet article explique comment utiliser les couleurs du site Web à l'aide de HTML de manière simple et facile. Les couleurs jouent un rôle important dans la création de sites Web pour se sentir bien. Il n'y a pas de balise HTML intégrée à la place, elle utilise l'attribut style ou la propriété color. Précisément, les couleurs sont incorporées dans les éléments HTML à l'aide de la 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 lumineuse rend le site Web joli et plus audacieux. Cela se fait en utilisant des couleurs, des codes de couleur Hex. 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. Voici un exemple illustrant la couleur d'arrière-plan sur la page Web.

My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo


My Sample

HTML BG Color

This page is a demo

Extraits de code:

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

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Color Name
Hexadecimal
RGB Value

Comment appliquer la couleur au texte en HTML?

L'application de la couleur au texte HTML est assez facile, nous pouvons ajouter / changer la couleur du texte en appliquant trois façons à savoir la couleur hexadécimale, les valeurs HSL et les noms de couleur. Voici les trois techniques différentes pour appliquer 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 couleur est une méthode directe et le W3C a annoncé 16 couleurs de base (noir, jaune, rouge, marron, gris, citron vert, vert, olive, argent, aqua, bleu, bleu marine, blanc, violet, fuchsia, turquoise)

2. HSL

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

3. Couleur hexadécimale

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.


EDUCBA
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%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
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%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
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%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
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%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU


EDUCBA
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%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

    EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU

  • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


    • EDUCBA
    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%);
    )

    EDUCBA
    List of operating System
    Windows
    MACINTOSH
    LINUX
    UBUNTU


EDUCBA
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%);
)

EDUCBA
List of operating System
Windows
MACINTOSH
LINUX
UBUNTU

Production:

Il existe différentes méthodes pour faire la couleur du texte, car le HTML contient de nombreuses applications personnalisables.

  1. Application de la section Style
  2. création d'une feuille de style CSS individuelle
  3. Envelopper le texte

Comment appliquer la couleur du texte à l'aide de la section?

Voyons différentes méthodes d'utilisation des couleurs HTML:

1. Habillage à l'aide de couleurs HTML

Le code ci-dessous modifie la couleur du texte du paragraphe avec des codes HTML simples. il y a 140 noms colorés pour colorer les sites Web. Le code ci-dessous montre comment appliquer la couleur du texte à l'aide de la section.


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color


Text color

HTML BG Color

changing text color

Ce contenu est très clair

texte de paragraphe rose

Production:

2. Utiliser HEXCOLOR

Encore une fois, cet exemple prend la section style pour déclarer la couleur hexadécimale suivie d'un symbole «#».



Color Picker

changing text color



Color Picker

changing text color



Color Picker

changing text color

Bonjour le monde

Texte de paragraphe Hexa

Production:

3. Utilisation de la couleur RVB

Le rouge, le vert, le bleu utilisent 8 bits chacun et leur valeur varie de 0 à 255 ce qui produit différentes couleurs. L'exemple ci-dessous sélectionne la couleur RVB en fonction de ses valeurs.



Color Picker

Texte de paragraphe bleu

Production:

4. Méthode utilisant la feuille de style



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents



Style Sheet in HTML
@import url("/examples/css/style.css");
p (
color: green;
font-size: 26px;
)

The styles for Html documents

Chaque étiquette doit être décorée avec des couleurs.

Production:

5. Création d'un style CSS individuel

fichier .html




CSS style sheet




CSS style sheet




CSS style sheet

Document HTMl multiple.

Bonjour le monde!

Fichier CSS externe lcolor.css

.lcolor ( font-size: 40px;
color:red )

Production:

Comment définir la couleur de la bordure en HTML?

Cela se fait en utilisant un attribut border color = "". Cela se fait en utilisant l'élément Html

et même nous pouvons créer des effets 3D. La couleur de la bordure est appliquée à l'aide de différents attributs comme border = "width", bordercolor = "color def", bordercolorlight = "". CSS possède des propriétés de bordure améliorées qui aident à créer des bordures. L'exemple ci-dessous montre la définition d'une seule couleur de bordure dans le tableau correspondant. Ici désigne la ligne du tableau et
désigne les données de la table et il est commencé à l'aide étiquette. Et la bordure pour eux est appliquée en utilisant leur largeur et leurs couleurs




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California




Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California


Chicago
new york
Texas
California



Chicago
new york
Texas
California

Production:

Voyons maintenant la définition de deux couleurs de bordure séparément. Le code ci-dessous utilise l'attribut table avec leurs éléments.



Samsung Nokia Apple Iphone Xiami Redmi



Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi


Samsung Nokia Apple Iphone Xiami Redmi

Production:

Utilisation de la balise

Il est utilisé pour regrouper tous les éléments et aide à visualiser une page Web à sa position particulière. Dans le code ci-dessous, nous avons utilisé deux un pour un paragraphe et un autre pour implémenter l'attribut de style en définissant les pixels de bordure et l'épaisseur est augmentée en donnant la largeur et nous avons ajouté un rembourrage pour les montrer à gauche.



Sample border color using div

La nature est belle

div avec une couleur de bordure.

Production:

Exemple: cela explique comment définir la couleur du remplissage et de la marge à l'aide de balises de classe et de liste.



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree



    Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree


  • Borders
    UL (
    background: Green;
    margin: 10px 10px 5px 5px;
    padding: 4px 4px 4px 4px;
    )
    LI (
    color: red;
    background:yellow;
    margin: 11px 11px 7px 6px;
    padding: 10px 0px 10px 10px;
    list-style: none
    )
    LI.colorbord (
    border-style: dashed;
    border-width: small;
    border-color: orange;
    )


    DOM model
    Document object model helps in creating document tree



Borders
UL (
background: Green;
margin: 10px 10px 5px 5px;
padding: 4px 4px 4px 4px;
)
LI (
color: red;
background:yellow;
margin: 11px 11px 7px 6px;
padding: 10px 0px 10px 10px;
list-style: none
)
LI.colorbord (
border-style: dashed;
border-width: small;
border-color: orange;
)


DOM model
Document object model helps in creating document tree

Production:

Comment spécifier la couleur en utilisant des valeurs en HTML?

Les valeurs de couleur de base varient de 0 à 255 pour le rouge, le bleu et le vert. La valeur de la couleur est importante pour donner la légèreté.

Le tableau ci-dessous montre des exemples de valeurs pour les couleurs

Exemple: l' exemple ci-dessous montre différentes valeurs de couleur dans leurs paramètres d'arrière-plan.

Les techniques d'exploration de données consistent à comprendre un modèle

Classification


Prédiction


Régression


Classification, Techniques de prédiction

Couleurs HTML


Couleurs de table

Production:

Comment utiliser les valeurs de couleur RVB en HTML?

RVB désigne directement les couleurs bleu vert rouge et utilise la fonction RVB. Il prend ces trois valeurs comme paramètres et est déclaré comme un entier parfois en pourcentage. Quelle que soit la couleur que nous voulons, son intensité se voit attribuer une valeur plus élevée 255 car une valeur entière se situe entre o et 255. Par exemple, pour avoir une couleur bleue, il est préférable de désigner (0, 0, 255). ici, les deux premières valeurs sont marquées comme 0, 0 et la dernière valeur est 255 pour le bleu.

Exemple: couleur RVB



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.



div (
background-color: rgb(255, 0, 180);
color: rgb(0, 255, 255);
padding: 30px;
)

Norway the most beautiful place it's a Scandinavian Country.

C'est le pays le plus cher du monde, Oslo est la capitale de cette ville verte.

Production:

Comment spécifier la luminosité des couleurs en HTML

La luminosité de la couleur est définie par la luminosité que nous préférons, elle est mesurée en pourcentage. La plupart des concepteurs de sites Web souhaitent utiliser une légèreté supérieure à RVB qui peut être ajustée selon les exigences. Ici, un noir définit la luminosité à 0%, le blanc à 100%. Il est spécifié à l'aide de la fonction hsl ().



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.



div (
background-color: hsl(150, 50%, 60%);
color: hsl(100%, 0%, 0%);
padding: 30px;
)

Norway the most beautiful place its an Scandinavian Country.

C'est le pays le plus cher du monde, Oslo est la capitale de cette ville verte.

Production:

Vous pouvez essayer avec différentes valeurs de couleur dans l'exemple ci-dessus.

Conclusion

Par conséquent, pour conclure, nous avons vu que cela a des propriétés différentes. Auparavant, le développement Web avait de nombreuses façons de spécifier les couleurs de son site Web et de nos jours les coloris les plus populaires sont les codes de couleur RVB et hexadécimal (RVB est bien connu). Il existe différentes applications où les couleurs sont implémentées comme une échelle mobile, une palette de couleurs, etc.

Articles recommandés

Ceci est un guide des couleurs HTML. Ici, nous discutons de l'introduction, comment définir une couleur d'arrière-plan en HTML, comment appliquer une couleur au texte en HTML, etc. Vous pouvez également consulter nos autres articles suggérés pour en savoir plus -

  1. Balises de table HTML
  2. Créer des tableaux en HTML
  3. Styles de polices HTML
  4. Éléments de formulaire HTML
  5. Programme pour créer un sélecteur de couleurs HTML (exemple)
  6. Comment implémenter la couleur et changer le style dans Matlab?
  7. Comment télécharger un fichier en PHP avec des exemples