Apprendre le CSS
Les propriétés principales


Maintenant que l'on sait comment appliquer des propriétés à un attribut, il est temps de se demander quelle sont les différentes propriétés que l'on peut utiliser, et les valeurs associées à ces propriétés.

Propriétés applicables à un texte

La propriété font-size définit la taille d'un texte, on lui affecte la valeur xxpx (ou xx doit être remplacé par la taille souhaitée du texte en pixels)
font-size : 12px;


La propriété color définit la couleur d'un texte, on lui affecte la valeur #xxxxxx (ou xxxxxx doit être remplacé par le code hexadécimal de la couleur souhaitée)
color : #ff0000;


La propriété font-family définit la police d'un texte, on lui affecte pour valeur le nom d'une police.
Attention : veillez à choisir une police classique, celle ci doit en effet être installée sur l'ordinateur de vos visiteurs.
font-family : verdana


La propriété font-style permet de mettre un texte en italique lorsqu'on lui affecte la valeur italic
font-style : italic;


La propriété font-weight permet de mettre un texte en gras lorsqu'on lui affecte la valeur bold
font-weight : bold;


La propriété text-decoration permet de souligner un texte lorsqu'on lui affecte la valeur underline
text-decoration : underline;


La propriété text-decoration permet d'afficher une ligne au dessus d'un texte lorsqu'on lui affecte la valeur overline
text-decoration : overline;


La propriété text-decoration supprimer le soulignement d'un texte lorsqu'on lui affecte la valeur none
text-decoration : none;

La propriété text-align permet de définir l'alignement d'un texte. On peut lui affecter les propriétés left, right, center ou justify, ce qui aura pour effet d'aligner le texte à gauche, à droite, au centre, ou de le justifier.
text-align : center;

Fonds des cases

La propriété background-color définit la couleur de fond d'une case, on lui affecte la valeur #xxxxxx (ou xxxxxx doit être remplacé par le code hexadécimal de la couleur souhaitée)
background-color : #ff0000;


La propriété background-image définit l'image de fond d'une case, on lui affecte la valeur url(adresse_url_de_l'image) (ou adresse_url_de_l'image doit être remplacé par l'adresse URL de l'image souhaitée)
background-image : url(http://support.utiliweb.fr/sand/night/menu.png);


La propriété background-repeat définit la répétition de l'image de fond d'une case.
Si on lui affecte la valeur repeat, l'image de fond se répètera
Si on lui affecte la valeur no-repeat, l'image de fond ne se répètera pas
Si on lui affecte la valeur repeat-x, l'image de fond se répètera horizontalement
Si on lui affecte la valeur repeat-y, l'image de fond se répètera verticalement
background-repeat : repeat;


La propriété background, lorsqu'elle est associée à la valeur transparent rend le fond d'une case transparent.
background: transparent;


Dimensions des cases

La propriété width définit la largeur d'une case.
On peut lui affecter une valeur en pixels (120px), ou une valeur en pourcentage (20%). La largeur sera alors proportionnelle à la largeur de la case qui contient la case traitée.
width :20%;


La propriété height définit la hauteur d'une case, et fonctione de la même manière que la propriété width.

Les propriétés max-width et max-height définissent la largeur maximale et la hauteur maximale que peut prendre une case.

Les propriétés min-width et min-height définissent la largeur minimale et la hauteur minimale que peut prendre une case.

Contours des cases

La propriété border-width définit l'épaisseur de la bordure d'une case.
On lui affecte une valeur en pixels.
border-width : 2px;


La propriété border-color définit la couleur de la bordure d'une case.
On lui affecte comme valeur #xxxxxx, ou xxxxxx est le code héxadécimal correspondant à la couleur désirée.
border-color: #000000;

La propriété border-style définit le style de la bordure d'une case.
On peut lui affecter les valeurs suivantes : none (aucune bordure), solid (bordure classique), dashed (tirets), dotted (pointillés), double (bordure double), inset, outset, groove, ou ridge (donnent un effet de relief).
border-style: solid;


La propriété border permet de condenser les trois propriétés précédentes en une seule. On lui affecte trois valeurs correspondant aux trois propriétés précédentes.
border: 2px #000000 solid;


La propriété border-right fonctionne comme la propriété border et traite uniquement la bordure de droite d'une case.

La propriété border-top fonctionne comme la propriété border et traite uniquement la bordure du haut d'une case.

La propriété border-bottom fonctionne comme la propriété border et traite uniquement la bordure du bas d'une case.

La propriété border-left fonctionne comme la propriété border et traite uniquement la bordure de gauche d'une case.





Aller à la page   <<        >>