Liste des propriétés CSS (Copie depuis le site du zéro)  

Police, taille et décorations



TypeNomValeurs possibles
Nom de police font-family
Indiquer les noms de polices possibles par ordre de préférence :

Code : CSS
1
font-family:police1, police2, police3;

Si le visiteur a la police 1, il l'utilisera. Sinon, il regarde s'il a la police 2, puis la police 3 etc.
Utilisez des guillemets si le nom de la police comporte des espaces. Essayez de toujours mettre comme dernière police possible "serif" ou "sans-serif".

Code : CSS
1
 
font-family: "Arial Black",
 Arial, Verdana,
 serif;

Taille du texte font-size Indiquez la taille du texte.
Plusieurs unités sont possibles :
  • px (pixels)
  • % (pourcentage, 100% = normal)
  • em (taille relative, 1.0 = normal)
  • ex (taille relative à la hauteur de la lettre "x". 1.0 = normal)
  • nom de taille :
    • xx-small : très très petit
    • x-small : très petit
    • small : petit
    • medium : moyen
    • large : grand
    • x-large : très grand
    • xx-large : très très grand
Gras font-weight bold : gras
bolder : plus gras
lighter : plus fin
normal : pas gras (par défaut)
Italique font-style italic : italique
oblique : autre façon de mettre en italique
normal : normal (par défaut)
Décoration text-decoration underline : souligné
overline : ligne au-dessus
line-through : barré
blink : clignotant
none : normal (par défaut)
Petites capitales font-variant small-caps : petites capitales
normal : normal (par défaut)
Capitales text-transform uppercase : tout mettre en majuscules
lowercase : tout mettre en minuscules
capitalize : début des mots en majuscules
none : normal (par défaut)
Méga-propriété de police font Indiquez dans n'importe quel ordre des valeurs possibles pour font-weight, font-style, font-size, font-variant, font-family.
Attention exception : le nom de la police (font-family) doit être placé en dernier dans la liste dans tous les cas.
Vous n'êtes pas obligés de mettre une valeur de chacune de ces propriétés.

Exemple :

Code : CSS
1
font: 
bold, 16px,
 Arial;

Cela mettra votre texte en gras, 16 pixels, Arial.



Alignement



TypePropriétéValeurs possibles
Alignement horizontal text-align left : à gauche (par défaut)
center : centré
right : à droite
justify : texte justifié (prend toute la largeur de la page)
Alignement vertical vertical-align A utiliser dans des cellules de tableau, ou dans des éléments inline eux-mêmes contenus dans un élément inline.

top : en haut
middle : au milieu
bottom : en bas
Hauteur de ligne line-height Indiquer une valeur en pixels (px) ou en pourcentage (%)
Alinéa text-indent Indiquez une valeur en pixels (px) pour définir l'alinéa de vos paragraphes.
Vos paragraphes commenceront avec le retrait que vous avez indiqué.
Césure white-space normal : le passage à la ligne est automatique (par défaut)
nowrap : pas de passage à la ligne automatique, à moins qu'une balise xHTML comme <br /> ne soit présente.
pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise xHTML <pre>)

Propriétés de couleur et de fond

Couleur



TypePropriétéValeurs possibles
Couleur de texte color Indiquer une couleur avec l'une des méthodes suivantes :
  • En tapant le nom de la couleur en anglais (black, blue, green, white, red...).
  • En indiquant la couleur en hexadécimal (#CC48A1)
  • En indiquant la couleur en RGB : rgb (128, 255, 0)
Couleur de fond background-color Même fonctionnement que color. Cela définit cette fois la couleur de fond du texte


Image de fond



TypePropriétéValeurs possibles
Image de fond background-image Indiquer l'url de l'image (notation absolue ou relative)
Code : CSS
1
2
background-image:url
("images/fond.png"); /* Notation relative */
background-image:url("http://www.monsite.com/images/fond.png"
);
 /* Notation absolue */
Fond fixé background-attachment fixed : le fond reste fixe quand on descend plus bas sur la page
scroll : le fond défile avec le texte (par défaut)
Répétition du fond background-repeat repeat : le fond se répète (par défaut)
repeat-x : le fond ne se répète que sur une ligne, horizontalement
repeat-y : le fond ne se répète que sur une colonne, verticalement
no-repeat : le fond ne se répète pas, il n'est affiché qu'une fois
Position du fond background-position 2 façons de faire :
  • En notant une distance en px ou %, par rapport au coin en haut à gauche.

    Code : CSS
    1
    		 
    background-position:50px 
200px; /* 50 px à droite, 200px en bas */
  • En utilisant des valeurs prédéfinies, une pour la verticale et une pour l'horizontale :
    top : en haut, verticalement
    center : au milieu, verticalement
    bottom : en bas, verticalement

    left : à gauche, horizontalement
    center : au centre, horizontalement
    right : à droite, horizontalement

Code : CSS
1
 
background-position : 
bottom right; /* en bas à droite */
Méga-propriété de fond background Indiquer une ou plusieurs valeurs issues des propriétés background-image, background-repeat, background-attachment, background-position.
L'ordre des valeurs n'a pas d'importance et vous n'êtes pas obligés de mettre toutes les valeurs de ces propriétés (au moins une suffit)

Code : CSS
1
2
/* Le fond fond.png reste affiché en haut à droite de l'écran et n'est pas répété. */

background:url("images/fond.png") 
no-repeat fixed top right
;

Propriétés des boîtes

Dimensions



TypePropriétéValeurs possibles
Largeur width Valeur en px, %, ou encore "auto" (valeur par défaut, la largeur dépendra du texte à l'intérieur)
Hauteur height Idem
Largeur minimale min-width Indiquer une valeur, en pixels par exemple.
Largeur maximale max-width Idem
Hauteur minimale min-height Idem
Hauteur maximale max-height Idem


Marges extérieures



TypePropriétéValeurs possibles
Marge en haut margin-top Indiquer une valeur comme 20px, 1.5em...
Marge à gauche margin-left Idem
Marge à droite margin-right Idem
Marge en bas margin-bottom Idem
Méga-propriété de marge margin Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
  • 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite
  • 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
  • 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas
  • 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
Par exemple, si je mets 2 valeurs :

Code : CSS
1
margin:20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */



Marges intérieures



TypePropriétéValeurs possibles
Marge intérieure en haut padding-top Indiquer une valeur comme 20px, 1.5em...
Marge intérieure à gauche padding-left Idem
Marge intérieure à droite padding-right Idem
Marge intérieure en bas padding-bottom Idem
Méga-propriété de marge intérieure padding Indiquez de 1 à 4 valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
  • 1 valeur : ce sera la marge pour le haut, le bas, la gauche et la droite
  • 2 valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la droite
  • 3 valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la troisième à la marge du bas
  • 4 valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.



Bordures



TypePropriétéValeurs possibles
Epaisseur de la bordure border-width Indiquer une valeur en px.
Couleur de la bordure border-color Indiquer une valeur de couleur.
Type de bordure border-style none : pas de bordure (par défaut)
hidden : bordure cachée
solid : ligne pleine
double : ligne double (nécessite une taille de bordure de 3px minimum)
dashed : en tirets
dotted : en pointillés
inset : effet 3D "enfoncé"
outset : effet 3D "surélevé"
ridge : autre effet 3D
Bordure à gauche border-left Indiquer la couleur, l'épaisseur et le type de bordure pour la bordure gauche.
L'ordre n'a pas d'importance. Exemple :

Code : CSS
1
border-left: 2px inset blue; /* Bordure bleue de 2px avec effet 3D "enfoncé" */
Bordure en haut border-top Idem
Bordure à droite border-right Idem
Bordure en bas border-bottom Idem
Méga-propriété de bordure border Indiquera l'apparence des bordures en haut, à droite, en bas et à gauche.

Propriétés de positionnement et d'affichage

Affichage



TypePropriétéValeurs possibles
Type d'élément display none : l'élément ne sera pas affiché
block : l'élément devient de type "block" (bloc, comme <p>)
inline : l'élément devient de type "inline" (en ligne, comme <strong>)
list-item : l'élément devient de type "élément de liste à puce" (comme <li>)
Affichage visibility hidden : masqué
visible : visible (par défaut)

display:none; fait complètement disparaître l'élément, tandis que visibility:hidden; masque l'élément, qui continue quand même à prendre de la place sur l'écran.
Afficher seulement une partie clip Indiquer 4 valeurs comme ceci :

Code : CSS
1
clip: rect(valeur1, valeur2, valeur3, valeur4);


Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les coordonnées du rectangle qui sera affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.
Limiter les dimensions overflow visible : tout l'élément sera affiché (par défaut).
hidden : l'élément sera coupé s'il dépasse les limites définies par height et width. On ne pourra pas voir la partie du texte coupée.
scroll : tout comme hidden, l'élément sera coupé s'il dépasse les limites. Toutefois, cette fois le navigateur ajoutera des barres de défilement pour qu'on puisse voir la suite du texte.
auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas. Bien souvent, utiliser cette valeur revient à utiliser la valeur "scroll".


Positionnement



TypePropriétéValeurs possibles
Flottant float left : flottant à gauche
right : flottant à droite
none : pas de flottant (par défaut)
Stopper un flottant clear left : supprime l'effet d'un flottant à gauche précédent
right : supprime l'effet d'un flottant à droite précédent
both : supprime l'effet d'un flottant précédent, qu'il soit à gauche ou à droite
none : pas de suppression de l'effet du flottant (par défaut)
Type de positionnement position absolute : position absolue par rapport au coin en haut à gauche
fixed : position fixe (fonctionne comme la position absolue). L'élément reste à sa position même quand on descend plus bas dans la page.
relative : position relative, par rapport à la position "normale" de l'élément
static : positionnement normal (par défaut)
Position par rapport au haut top Valeur en px, %, em... A utiliser pour un positionnement absolu, fixe ou relatif.
Position par rapport au bas bottom Idem
Position par rapport à gauche left Idem
Position par rapport à droite right Idem
Ordre d'affichage z-index En cas de positionnement absolu par exemple, si 2 éléments se chevauchent, z-index permet d'indiquer quel élément doit être affiché au-dessus de l'autre.
Indiquez un nombre. Plus ce nombre est élevé, plus l'élément sera affiché en avant.

Par exemple, si vous avez 2 éléments positionnés en absolus avec un z-index de 10 pour l'un et de 20 pour l'autre, c'est celui qui a un z-index de 20 qui sera affiché par-dessus.

Propriétés des listes

TypePropriétéValeurs possibles
Type de liste list-style-type
  • Pour les listes non ordonnées (<ul>) :
    • disc : un disque noir (par défaut).
    • circle : un cercle.
    • square : un carré.
    • none : aucune puce ne sera utilisée.

  • Pour les listes ordonnées (<ol>) :
    • decimal : des nombres 1, 2, 3, 4, 5... (par défaut)
    • decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...).
    • upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...)
    • lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...)
    • upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...)
    • lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...)
    • lower-greek : numérotation grecque.
Position en retrait list-style-position inside : sans retrait
outside : avec retrait (par défaut)
Puce personnalisée list-style-image Indiquer l'url de l'image qui servira de puce. Exemple :

Code : CSS
1
list-style-image: url("images/puce.png");
Méga-propriété de liste list-style Vous pouvez réunir les valeurs de list-style-type, list-style-position et list-style-image. Vous n'êtes pas obligés de mettre toutes les valeurs, et l'ordre n'a pas d'importance.
Exemple :

Code : CSS
1
list-style: inside square;

Propriétés des tableaux

TypePropriétéValeurs possibles
Type de bordure border-collapse collapse : les bordures du tableau et des cellules sont mélangées.
separate : les bordures du tableau et des cellules sont séparées (par défaut).
Cellules vides empty-cells show : les bordures des cellules vides sont affichées.
collapse : les cellules vides sont masquées (par défaut).
Position du titre caption-side Indique la position du titre du tableau, défini via la balise <caption>

top : en haut du tableau
bottom : en bas du tableau
left : à gauche du tableau
right : à droite du tableau

Autres propriétés

TypePropriétéValeurs possibles
Curseur de souris cursor auto : curseur automatique (par défaut)
default : curseur standard
pointer : curseur en forme de main, comme quand on pointe sur un lien
text : curseur utilisé quand on pointe sur du texte
wait : curseur utilisé pour indiquer une attente (sablier)
progress : curseur utilisé pour indiquer une tâche de fond (curseur avec sablier)
help : curseur en forme de point d'interrogation, indiquant une aide
move : curseur en forme de croix, indiquant un déplacement possible

n-resize : flèche vers le nord
ne-resize : flèche vers le nord-est
e-resize : flèche vers l'est
se-resize : flèche vers le sud-est
s-resize : flèche vers le sud
sw-resize : flèche vers le sud-ouest
w-resize : flèche vers l'ouest
nw-resize : flèche vers le nord-ouest

url : curseur personnalisé, de type .cur ou .ani. Exemple :

Code : CSS
1
cursor: url("images/curseur.cur"), auto;


Vous devez utiliser un logiciel dédié à la création de curseurs pour créer des .cur et des .ani. Notez aussi la présence du mot auto à la fin. Cela signifie que le navigateur tentera de charger le curseur personnalisé. S'il n'a pu être chargé pour une quelconque raison, le curseur correspondant à la valeur auto sera utilisé.