Les couleurs

Il est possible de définir la couleur de la police de caractères via l'attribut color, mais aussi la couleur de fond via background-color

Par exemple:

body {

color:black;
background-color:white;

}

Les composantes de la couleur

La valeur que l'on peut appliquer aux attributs de couleurs peut se faire de trois façon:

- Soit en passant le nom de la couleur. 16 noms de couleurs sont définis officiellement par le w3c (il en existe d'autres, mais pas forcement portables !) qui sont:

- Soit en passant directement les valeurs de RVB en hexa
le format est alors #rrvvbb où rr, vv et bb varient de 00 à FF.

Cependant, les couleurs peuvent parfois être codées sur 3 positions dans un fichier CSS. Exemple #6A9. Il faut en fait doubler ces chiffres, la couleur est donc en réalité #66AA99. Il est préférable d'éviter ce format sur 3 positions, certains navigateurs pourraient ne pas comprendre.

- Soit en passant les valeurs RVB de manière éclatées:

RGB( [R],[V],[B] ) ou r, v et b varient de 0 à 255.

- Ou encore avec la composante alpha:

rgba([R],[V],[B],[A])

la valeur de la composante alpha indiquant le degré d'opacité entre 0 et 1: 0.5 par exemple

rgba n'est pas forcement reconnue de tous les navigateurs. Il est donc conseillé de définir une valeur rgb, puis une valeur avec rgba ensuite. Ainsi, si le navigateur ne reconnait pas rgba, il aura tout de même défini une couleur "solide".

Exemple:

div {
background-color: rgba(0, 0, 255, 0.5);

ou background-color: #172240;

}

Il sera aussi possible de définir l'opacité de l'objet:

opacity: 0; correspond à la valeur alpha. Avec 0 l'objet sera totalement transparent (donc invisible !) et 1 complétement visible (0.5 entre les deux !)

jusqu'à IE8: filter: alpha(opacity=valeur); avec valeur variant entre 0 et 100 !

Exemple:

img {
opacity: 0.3;
filter: alpha(opacity=30);
}

Cette écriture qui permet de gérer les navigateurs IE ne comprenant pas opacity !