« Tutoriel couleur CSS » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
Aucun résumé des modifications
Ligne 3 : Ligne 3 :
== Les méthodes de spécification ==
== Les méthodes de spécification ==


Les couleurs en css peuvent être définie par un code héxadécimal, une combinaison des couleurs primaire (rgb)  
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éléctionner une couleur et d'obtenir le numéro exadécimal ou bien la valeur rgb. Autrement, il est possible d'obtenir ces valeur directement depuis des sites internet:
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:


* [https://color.adobe.com/fr/ (en) adobe CC]
* [https://color.adobe.com/fr/ (en) adobe CC]
Ligne 11 : Ligne 11 :
* [http://www.quackit.com/css/css_color_codes.cfm (en) quackit]
* [http://www.quackit.com/css/css_color_codes.cfm (en) quackit]


=== Couleurs hexadécimale ===
=== Couleurs hexadécimales ===


Les couleurs hexadécimale 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.  
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.  


[[Fichier:CouleurCSS2.png|500px|cadre|centré]]
[[Fichier:CouleurCSS2.png|500px|cadre|centré]]
Ligne 24 : Ligne 24 :
==== Couleurs RGBA ====
==== Couleurs RGBA ====


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


=== Les noms ===
=== Les noms ===
Parfois les couleurs peuvent être nomées. Pour plus d'information sur les noms des couleurs voir ici: [http://www.w3schools.com/cssref/css_colornames.asp (en) w3schools color name]
Parfois les couleurs peuvent être nommées. Pour plus d'informations sur les noms des couleurs voir ici: [http://www.w3schools.com/cssref/css_colornames.asp (en) w3schools color name]





Version du 23 octobre 2016 à 08:32

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.

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:

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


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.

Couleurs RGBA

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

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

Sources