CSS - Couleurs

Les couleurs sont un élément important du design web, car elles peuvent aider à transmettre une ambiance et à créer une esthétique cohérente. En CSS, il existe plusieurs façons de spécifier les couleurs, y compris les noms de couleur prédéfinis, les codes hexadécimaux et les valeurs RGB.

Voici un tableau récapitulatif des différentes façons de spécifier les couleurs en CSS :

Façon de spécifier une couleur

Exemple

Noms de couleur prédéfinis

color: red;

Codes hexadécimaux

color: #FF0000;

Valeurs RGB

color: rgb(255, 0, 0);

 

Noms de couleur prédéfinis

En CSS, il existe plusieurs noms de couleur prédéfinis qui peuvent être utilisés pour spécifier une couleur. Voici quelques exemples de noms de couleur :

  • red (rouge)
  • blue (bleu)
  • green (vert)
  • yellow (jaune)
  • black (noir)
  • white (blanc)

 

 
    h1 {
        color: blue;
    }

Codes hexadécimaux

Les codes hexadécimaux sont une autre façon de spécifier une couleur en CSS. Ils sont composés de six chiffres hexadécimaux (0-9 et A-F), qui représentent les niveaux de rouge, de vert et de bleu d'une couleur.

 

 
    p {
        color: #FF0000;
    }

Valeurs RGB

Les valeurs RGB sont une autre méthode de spécification de couleurs en CSS. Elles consistent en trois valeurs, chacune représentant la quantité de rouge, de vert et de bleu dans une couleur. Les valeurs sont séparées par des virgules et sont contenues dans une fonction rgb().

 

 
       a {
        color: rgb(0, 255, 0);
    }

Opacité

En CSS, vous pouvez également spécifier l'opacité d'une couleur en utilisant la propriété opacity. La valeur de l'opacité varie de 0 (complètement transparent) à 1 (complètement opaque).

 

 
       div {
        background-color: rgba(255, 0, 0, 0.5);
        /* couleur rouge avec une opacité de 0,5 */
    }

Conclusion

Les couleurs sont un élément important du design web et en CSS, il existe plusieurs façons de spécifier les couleurs. En utilisant les noms de couleur prédéfinis, les codes hexadécimaux et les valeurs RGB, vous pouvez créer des designs cohérents et attrayants. En comprenant comment utiliser la propriété opacity, vous pouvez également créer des effets de transparence intéressants.

TP CSS / EXERCICE CSS

voici un petit TP/Exercice  pour appliquer les connaissances de ce chapitre :

  1. Créez une page HTML de base avec un titre Colors.
  2. Ajoutez trois paragraphes de texte. Dans chaque paragraphe, utilisez une méthode différente pour spécifier la couleur du texte.
  3. Ajoutez un en-tête h1 et un en-tête h2. Utilisez les codes hexadécimaux pour spécifier la couleur de chaque en-tête.
  4. Ajoutez un bouton avec une couleur de fond verte. Utilisez la propriété opacity pour rendre le bouton partiellement transparent.
  5. Ajoutez un élément de liste non ordonnée contenant cinq éléments de liste. Utilisez les noms de couleur prédéfinis pour spécifier la couleur du texte de chaque élément de liste.
  6. Utilisez une valeur RGB pour spécifier la couleur de fond de la page.

Si vous avez trouvé ce Cours CSS de Mr JoëlYk intéressants et utiles, pourquoi ne pas les partager avec d'autres personnes qui pourraient également en bénéficier ? Partagez ce lien sur les réseaux sociaux ou envoyez-le à vos amis et collègues. Vous pourriez aider quelqu'un à améliorer ses compétences en programmation ou à trouver des solutions à des problèmes complexes. N'oubliez pas que la connaissance doit être partagée pour grandir. Merci pour votre soutien et votre partage !

Contact WhatsApp : +237 658395978 | Réaliser Par Joël_Yk

  • Aucune note. Soyez le premier à attribuer une note !

Ajouter un commentaire

Anti-spam