Les bases du langage CSS 3

IV – Les couleurs et les bordures

En HTML / CSS, chaque couleur a une valeur hexadécimale précédée du symbole #.

On peut aussi utiliser la notation rgb(valeur1, valeur2, valeur3) où les valeurs 1, 2 et 3 représentent les 3 couleurs rouge, puis vert, puis bleu. La notation rgba permet d'ajouter une quatrième valeur comprise entre 0 et 1 correspondant à la transparence.

Avec Microsoft Expression Web 4, on peut accéder facilement aux codes de chaque couleur.

• La couleur du texte

color: #000000; /* affecte la couleur noir au texte */ color: rgba(0,0,0,0.5); /* affecte la couleur noir au texte avec 50 % de transparence */

• La couleur de fond

background-color: #FFFFFF; /* affecte la couleur blanc au fond */

• L'héritage

Lorsqu'on applique un style à une balise, il est aussi appliqué par défaut à toutes les balises qu'elle contient. On peut cependant modifier le style d'une balise interne à une autre en explicitant son style.

body { background-color: #FFFFFF; color: #000000; /* affecte la couleur noir au texte */ } p { color: #009933; /* le texte des paragraphes sera en vert (valeur 009933) */ }

• Les bordures et les ombres

Lorsqu'on veut dessiner des bordures autour d'un élément de la page Web, on utilise la propriété border qui peut prendre différentes valeurs : une largeur, une couleur, un style de bordure (pointillés, tirets, relief…). On peut avoir des bordures différentes en haut border-top, en bas border-bottom et sur les côtés border-left et border-right.

On peut arrondir les coins des bordures avec border-radius.

On peut appliquer une ombre à un texte avec text-shadow ou bien à une boîte avec box-shadow.