Accueil » Tutoriaux » CSS » Propriétés CSS

Récapitulatif des propriétés CSS


Ceci n'est pas vraiment un tuto, c'est plutôt un aide mémoire. En effet, il est presque impossible (et ça sert surtout à rien) de tout apprendre par coeur. Souvent il m'est arrivé de ne plus me souvenir de tel ou tel propriété, c'est pour cela que j'ai décidé de faire ce récapitulatif. Certaine propriétés ne sont pas présente, seul les plus importantes y figure.

Tout d'abord, petit rappel. Voici comment on appelle la feuille de style dans le fichier html.

<head>
    <title>CSS par RevoluGame</title> 
    <link rel=stylesheet href="styles.css" type="text/css">
</head> 


Mise en forme de la police :

font-family : Propriété pour choisir la police.
font-size : Propriété qui permet de déterminer la taille de la police. Vous pouvez utiliser pt (points) px (pixels) em.
font-style : Propriété de style (inherit, italic, oblique, normal). Inherit signifit héritage, c'est à dire que le style sera celui défini par le block parent. Si il n'en a pas, il va prendre la valeur par défaut c'est à dire normal.
font-variant : Propriété pour le texte en petites majuscules (inherit, small-caps, normal).
font-weight : Propriété pour le poids de la police (bold, bolder, inherit, lighter, normal).

 

Mise en forme du texte :

text-transform : Propriété pour la casse (capitalize, inherit, lowercase, none, uppercase).
text-decoration : Propriété pour la décoration du texte (blink, inherit, none, line-through, overline, underline).
text-align : Propriété de l'alignement du texte (left, center, right).
letter-spacing : Propriété pour définir l'espacement entre les caractères.
word-spacing : Propriété pour définir l'espacement entre les mots.
color : Propriété pour définir la couleur du texte.
 
 
Mise en forme de l'arrière-plan :
 
background-color  : pour la couleur du fond de page (#code_couleur).
background-image : Propriété qui permet de placer une image en fond ( url(nom_image.ext) ).
background-repeat : propriété pour la répétition d'une image (repeat-x, repeat-y, no-repeat).
background-attachment :  Propriété pour figer une image d’arrière plan, insérée à l’aide de background-image, pour que celle-ci ne défile pas avec le contenu de l’élément auquel elle est appliquée (fixed, scroll).
background-position : Propriété pour définir la position d'une image dans la page ou le bloc.
Il existe un raccourci qui permet de mettre toute les propriétés sur la même ligne : background.

 
Mise en forme des paragraphes :
 
text-indent : Propriété qui permet de déterminer le retrait de la première ligne d'un paragraphe.
vertical-align : Propriété qui permet de définir l'alignement vertical d'un texte dans une ligne (valeur numérique ou baseline, sub, super, text-top, text-bottom, middle, top, bottom, inherit).
line-height : Propriété pour fixer l'interligne.
white-space : Propriété pour la gestion des blancs (normal, pre, nowrap).


Mise en forme des marges :
 
margin-top : Marge externe du haut
margin-left : Marge externe de gauche
margin-right : Marge externe de droite
margin-bottom : Marge externe du bas
Raccourci des marges externes :  margin. Voici l'ordre des propriétés : haut droite bas gauche (Moyen mnémotechnique : suivre le sens des aiguilles d'une montre).
padding-top : Marge interne du haut
padding-left : Marge interne de gauche
padding-right : Marge interne de droite
padding-bottom : Marge interne du bas
Raccourci des marges internes :  padding. L'ordre est le même que pour margin.

 
Mise en forme des bordures :
 
border-color : Propriété pour définir la couleur des bordures.
border-style : Propriété pour définir le style des bordures (solid, dashed (Internet Explorer ne le gère pas très bien), dotted(Idem que pour dashed), double, inherit, groove, ridge, inset, outset).
border-collapse : Propriété qui permet de spécifier l'affichage des bordures d'un tableau (collapse, separate, inherit).
border-spacing : Propriété qui permet de spécifier l'espacement entre chaque cellule.
border raccourci de propriété pour définir les bordures.
 

Mise en forme des listes :

list-style : propriété pour de la liste. 
list-style-type : Propriété de style qui permet de spécifier le type de la liste, si la liste est ordonnée ou si la liste est non ordonnée (upper-roman, upper-latin, inherit, circle, square, armenian, decimal, decimal-leading-zero, disc, georgian, lower-greek, lower-latin, lower-roman, none).
list-style-image : Propriété qui permet de définir une image à la place de la puce par défaut.
list-style-position : Propriété qui permet de spécifier l'alignement gauche du texte lors d'un retour à la ligne automatique par rapport à la puce (inherit, inside, outside). 


Mise en forme des divisions :

position : Propriété de positionnement des blocs (fixed, relative, absolute).
display : Propriété qui permet de spécifier la manière dont un élément est affiché (block, inline, list-item, inherit, table).
float : Propriété qui permet de spécifier l'affichage des éléments suivant (none, right, left).
z-index : Propriété qui permet de définir l'ordre d'affichage (valeur décimale : arrière-plan -> premier-plan).
clear : Propriété qui permet de définir si un élément doit ce trouver sur la même bande horizontale qu'un élément flottant (left, right, both, none).

 

Si vous rencontrez des problèmes d'incompatibilité, utilisez la propriété '!important' derrière le code que vous voulez appliquer à Firefox et rien pour Internet Explorer.  Exemple :

#nomDivision{
    position : relative ;
    top : 45 px ;                   // ce code sera interprété par Internet Explorer
    top : 50 px !important ;   // ce code sera interprété par Firefox 
} 

Pour les propriétés principales tel que  border, margin, ...  il ne faut pas mettre de virgule, exemple : 

border : 1px solid black ;

Si vous souhaitez lire les recommandations CSS2 du W3C, cliquez ici.