Tutoriel couleur CSS

De EduTech Wiki
Aller à : navigation, rechercher

CSS est utilisé pour donner du style à une page web, comment donner du style sans mettre de couleur? Cet article portera sur les différentes manières de colorer un élément à l'aide de CSS.

1 Les méthodes de spécification

Les couleurs en css peuvent être définies par un code héxadécimal, une combinaison des couleurs primaires (rgb)

Il existe plusieurs millions de couleurs différentes, c'est pourquoi il est impossible de retenir la valeur css pour chaque couleur. Sur certains programmes de retouche photo ou de dessin (comme Photoshop et Illustrator), il est possible de sélectionner une couleur et d'obtenir le numéro hexadécimal ou bien la valeur rgb. Autrement, il est possible d'obtenir ces valeur directement depuis des sites internet:

1.1 Couleurs hexadécimales

Les couleurs hexadécimales sont supportées par tous les navigateurs. Une couleur hexadécimale est spécifiée par #RRGGBB, où les R G et B correspondent à la quantité de rouge, vert et bleu dans la couleur.

CouleurCSS2.png


1.2 Couleurs RGB

Les couleurs rgb sont supportées dans la plupart des navigateurs. Une valeur rgb est spécifiée ainsi: rgb(255,255,255), où les valeurs doivent être comprises entre 0 et 255 (ou bien une valeur entre 0% et 100%) et où les valeurs correspondent respectivement à la dose de rouge, vert et bleu.

1.2.1 Couleurs RGBA

Les couleurs rgba sont un sous ensemble des couleurs rgb. La valeur alpha correspond au taux d'opacité de la couleur.

1.3 Les noms

Parfois les couleurs peuvent être nommées. Pour plus d'informations sur les noms des couleurs voir ici: (en) w3schools color name


section{
	background-color: #0000ff;
}

div{
	background-color: rgb(255,15,30);
}

p{
        background-color: rgba(230,76,85, 0.3);
}

.class{
       background-color: lightgrey;
}
Deux possibilités pour une couleur

2 Sources