TechBlogSD - Tout pour le développement WordPress et WEB
Instructions WEB et WordPress, actualités, revues de thèmes et plugins

Tutoriel sur les couleurs CSS pour les débutants

5

Les couleurs donnent du sens à la page Web. La page aura l’air simple et ennuyeuse sans couleurs différentes. Vous pouvez utiliser deux types de propriétés de couleur avec CSS dans une page Web. L’une est la couleur de premier plan (généralement comme couleur) pour changer la couleur du texte ou de la police. La deuxième est la couleur d’arrière-plan pour ajouter une couleur d’arrière-plan à différents éléments HTML. Dans ce didacticiel, explorons comment utiliser les propriétés de couleur CSS avec divers attributs.

Changer la couleur du texte en CSS

Prenons un exemple de changement de couleur d’un élément de paragraphe

au rouge. Vous pouvez le faire avec la définition de style ci-dessous en CSS :

p { color: red; }

Il produira le résultat suivant sur le navigateur :

Ceci est un paragraphe de couleur rouge.

Changer les couleurs d’arrière-plan en CSS

Vous pouvez modifier la couleur d’arrière-plan de n’importe quel élément HTML à l’aide de la définition de style CSS ci-dessous :

p { background-color:red;color:white; }

Il produira le résultat suivant :

Ceci est un paragraphe de couleur rouge.

Notez que nous avons utilisé une couleur de texte blanche afin qu’elle soit clairement lisible avec un fond rouge.

Définir les couleurs en CSS

Dans les exemples ci-dessus, nous avons utilisé des couleurs rouge et blanc avec le nom. Vous pouvez créer des millions de couleurs en combinant les trois couleurs de base que sont le rouge, le bleu et le vert. Il n’est pas possible de se souvenir du nom des couleurs et la plupart des couleurs n’ont pas de nom réel. Afin de rendre l’utilisation simple, CSS permet les manières suivantes de définir la valeur de couleur :

  • Noms de couleurs comme le rouge, le vert ou le blanc
  • Utilisation d’une combinaison de valeurs décimales rouges, vertes et bleues comme rgb (20,50,200)
  • Utilisation de valeurs hexadécimales pour le rouge, le vert et le bleu comme #ffffff
  • Valeur en pourcentage pour les couleurs rouges, bleues et vertes comme RVB (10 %, 80 %, 25 %)
  • Utilisation de la teinte, de la saturation et de la luminosité comme hsl (0,80%,70%)
  • Ajout d’opacité aux valeurs RVB comme rgba(0,0,0,0.8)
  • Ajout d’opacité aux valeurs HSL comme hsla(200,75%90%0.6)

Utiliser les noms de couleurs en CSS

Nous avons déjà vu comment utiliser le nom dans les propriétés CSS de couleur et d’arrière-plan. Il n’y a qu’environ 150 noms de couleurs que les navigateurs peuvent identifier. Nous vous recommandons d’utiliser des chiffres au lieu de noms pour les couleurs. Vous pouvez également consulter les codes de couleur des sites de réseaux sociaux populaires dans cet article.

Utiliser les couleurs RVB en CSS

Dans la méthode RVB, les couleurs rouge, bleue et verte sont indiquées par des nombres décimaux allant de 0 à 255. Par exemple, la couleur de la tomate est indiquée par rgb (255,99,71).

<div style="background-color: rgb(255,99,71);"> This text will have a tomato color background with the RGB value as rgb(255,99,71). </div>

Il produira le résultat suivant sur le navigateur :

Ce texte aura un fond de couleur tomate avec la valeur RVB comme rgb (255,99,71).

Vous pouvez créer plus de 16 millions de couleurs en faisant varier les trois valeurs de couleur de base. Cependant, assurez-vous d’utiliser une couleur de texte appropriée pour qu’il soit facile à lire. La meilleure option consiste à choisir des couleurs sécurisées pour le Web, telles que des couleurs d’interface utilisateur plates pour votre site Web.

Utilisation de valeurs de couleur hexadécimales

La couleur de la tomate rgb (255,99,71) peut être convertie en une valeur hexadécimale équivalente à FF6347. Il s’agit d’une simple conversion de 255 en FF, de 99 en 63 et de 71 en 47. Vous pouvez utiliser des outils de conversion de couleurs pour convertir les codes RVB en codes hexadécimaux.

Vous pouvez utiliser des valeurs de couleur hexadécimales dans CSS comme ci-dessous :

<div style="background-color: #FF6347; padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Le "padding:15px;" est utilisé pour ajouter du remplissage au contenu du texte à l’intérieur du

élément. Il produira le résultat suivant sur le navigateur :

Ce texte aura un fond de couleur tomate avec la valeur du code hexadécimal #FF6347. N’oubliez pas d’utiliser le symbole # devant la valeur du code hexadécimal et d’utiliser la couleur du texte comme #FFFFFF. De plus, les minuscules #ff6347 et les majuscules #FF6347 produiront le même résultat.

Utilisation des valeurs RVB en pourcentage

Au lieu des plages de nombres décimaux de 0 à 255, vous pouvez également mentionner la valeur en pourcentage pour le rouge, le vert et le bleu.

<div style="background-color: rgb(20%,69%,74%); padding: 15px; color: #FFFFFF"> This text will have a tomato color background with the hex code value as #FF6347. Remember to use # symbol in front the hex code value. Also both small case #ff6347 and capital case #FF6347 will produce the same result. </div>

Il produira le résultat ci-dessous:

Ce texte aura un fond de couleur tomate avec la valeur du code hexadécimal #FF6347. N’oubliez pas d’utiliser le symbole # devant la valeur du code hexadécimal. De plus, les deux minuscules #ff6347 et majuscules #FF6347 produiront le même résultat.

Ajout d’opacité aux couleurs RVB

En CSS3, vous avez la possibilité de mentionner la valeur d’alpha ou d’opacité pour les couleurs. La valeur alpha est ajoutée sous forme de nombre décimal compris entre 0,0 et 1,0 comme quatrième valeur. La valeur 0 représente complètement transparent qui est 0% d’opacité et 1.0 indique opaque avec 100% d’opacité.

Vous trouverez ci-dessous la syntaxe de l’utilisation de la valeur alpha en couleur RVB avec une opacité de 20 % :

<div style="background-color: rgba(255,0,0,0.2);"> Content Here...... </div>

Montrons la couleur rouge avec 20%, 40%, 60%, 800% et 100% des valeurs d’opacité pour la rendre plus compréhensible.

Tutoriel sur les couleurs CSS pour les débutants

N’oubliez pas qu’il existe également une propriété CSS distincte appelée « opacité : qui peut également être utilisée dans le même but. L’avantage de l’opacité est qu’elle peut également être utilisée sur les images. Mais il n’est pas supporté par tous les navigateurs. Voici comment vous pouvez utiliser la propriété d’opacité séparément :

p { background-color: rgb(255,0,0); opacity: 0.5; }

Utiliser les couleurs HSL dans CSS

CSS3 a une option supplémentaire pour définir une couleur en utilisant la méthode HSL. HSL signifie teinte, saturation, luminosité et a trois valeurs :

  • La teinte est un degré indiqué dans une roue chromatique avec des références comme 0 = rouge, 120 = vert, 240 est bleu.
  • La saturation est une valeur en pourcentage de gris dans une couleur.
  • La luminosité est une valeur en pourcentage de clair ou sombre où 0% est sombre (noir) et 100% est clair (blanc).

Vous trouverez ci-dessous un exemple de création d’un fond vert avec la couleur HSL en CSS :

<div style="background-color: hsl(120,100%,50%,0.2);"> Content Here...... </div>

HSL avec opacité

Semblable à RGBA, vous pouvez également ajouter l’opacité à la couleur HSL comme quatrième valeur. L’opacité ou alpha est indiquée par un nombre décimal compris entre 0,0 et 1,0, où 0,0 indique entièrement transparent et 1,0 indique opaque. Vous trouverez ci-dessous un exemple de création de couleur verte avec une opacité de 50 % à l’aide de la déclaration HSLA en CSS.

<div style="background-color: hsla(120,100%,50%,0.6);"> Content Here...... </div>

Les cases suivantes présentent la couleur verte à différents niveaux alpha :

Tutoriel sur les couleurs CSS pour les débutants

Exemple complet d’utilisation de couleurs dans CSS

Jusqu’à présent, nous avons vu différentes manières de définir les couleurs en CSS. Montrons un exemple complet de création de couleurs de premier plan et d’arrière-plan :

<!-- This is CSS --> <style> div {background-color:tomato; padding:10px;} p {color: rgba(50,90,20,0.8);} p {color: #ffffff;} /* This will be the final paragraph color */ h1 {color: yellow;} div > h1 {color:#008754;} /* This will be the final h1 color */ h2 {background:hsla(10,20%,30%,0.8);} h2 {color:#ffffff;} em {color: #4500aa;} p > em {background-color: rgba(60,43,78,0.7); color:yellow;} </style> <!-- This is HTML --> <div> <!-- Background Tomato --> <h1>This is a H1 heading.</h1> <!-- Color #008754 --> <p>Here is a paragraph element.</p> <!-- Color #ffffff --> <h2>This is a H2 heading.</h2> <!-- Background hsla(10,20%,30%,0.8) --> <p>Here is another paragraph. <!-- Color #ffffff --> <em>This is emphasized text inside paragraph.</em> <!-- Background rgba(60,43,78,0.7) Color yellow --> </p> <em>This is emphasized text outside paragraph.</em> <!-- Color #4500aa --> </div>

Le résultat final sera affiché comme ci-dessous :

Voici un élément de paragraphe.

Il s’agit d’une rubrique H2.

Voici un autre paragraphe.
Ceci est souligné dans le texte à l’intérieur du paragraphe.
Il s’agit d’un texte souligné en dehors du paragraphe.

  • Si vous définissez plusieurs couleurs en CSS pour le même élément, la dernière aura préséance sur toutes les déclarations précédentes. Dans l’exemple ci-dessus, le paragraphe aura la couleur #ffffff pour cette raison.
  • Les styles spécifiques prévaudront sur le style parent ou générique. La couleur h1 sera #008754 et non jaune.
  • Vous pouvez également utiliser la propriété abrégée d’arrière-plan pour définir la couleur d’arrière-plan.

Si la couleur d’arrière-plan n’est pas mentionnée, l’élément aura un arrière-plan transparent. Étant donné que les navigateurs utilisent un fond blanc, vous verrez que la plupart des pages du Web ont un fond blanc. En fait, les éléments des pages sont déclarés avec un fond blanc pour assurer un affichage correct car les utilisateurs peuvent changer la couleur de fond du navigateur.

Source d’enregistrement: www.webnots.com
Leave A Reply

Ce site utilise des cookies pour améliorer votre expérience. Nous supposerons que cela vous convient, mais vous pouvez vous désinscrire si vous le souhaitez. J'accepte Plus de détails