Mémento des propriétés CSS

 
 
 
 
Propriétés de mise en forme du texte
Qu'est-ce que la mise en forme de texte ? C'est tout ce qui touche à la
présentation du texte proprement dit : le gras, l'italique, le souligné, la
police, l'alignement, etc.

Propriété Valeurs (exemples) Description

police1, police2, police3, serif,
font-family Nom de police
sans-serif, monospace
@font-face Nom et source de la police Police personnalisée
font-size 1.3em, 16px, 120%... Taille du texte
font-weight bold, normal Gras
font-style italic, oblique, normal Italique
Soulignement, ligne au-
text- underline, overline, line-
dessus, barré ou
decoration through, blink, none
clignotant
font-variant small-caps, normal Petites capitales
text- capitalize, lowercase,
Capitales
transform uppercase
Super propriété de
police. Combine : font-
weight, font-style,
font -
font-size, font-
variant, font-
family.
text-align left, center, right, justify Alignement horizontal
Alignement vertical
vertical- baseline, middle, sub, super, (cellules de tableau ou
align top, bottom éléments inline-
block uniquement)
line-height 18px, 120%, normal... Hauteur de ligne
text-indent 25px Alinéa
white-space pre, nowrap, normal Césure
word-wrap break-word, normal Césure forcée
5px 5px 2px blue
text-shadow (horizontale, verticale, fondu, Ombre de texte
couleur)
 
 
 Propriétés de couleur et de fond
Propriété Valeurs (exemples) Description
nom, rgb(rouge,vert,bleu),
color rgba(rouge,vert,bleu,transpare Couleur du texte
nce), #CF1A20...
background-
color Identique à color Couleur de fond
background-
image url('image.png') Image de fond
background-
attachment fixed, scroll Fond fixe
background- repeat-x, repeat-y, no-repeat,
Répétition du fond
repeat repeat
background- (x y), top, center, bottom, left,
Position du fond
position right
Super propriété du fond.
Combine :
background-image,
background - background-repeat,
background-
attachment,
background-
position
opacity 0.5 Transparence
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 Propriétés des boîtes
Propriété Valeurs (exemples) Description
width 150px, 80%... Largeur
height 150px, 80%... Hauteur
min-width 150px, 80%... Largeur minimale
max-width 150px, 80%... Largeur maximale
min-height 150px, 80%... Hauteur minimale
max-height 150px, 80%... Hauteur maximale
margin-top 23px Marge en haut
margin-left 23px Marge à gauche
margin-right 23px Marge à droite
margin-bottom 23px Marge en bas
Super-propriété de
marge.
Combine : margin-
23px 5px 23px 5px
margin top, margin-
(haut, droite, bas, gauche)
right, margin-
bottom, margin-
left.
Marge intérieure à
padding-left 23px
gauche
Marge intérieure à
padding-right 23px
droite
Marge intérieure en
padding-bottom 23px
bas
Marge intérieure en
padding-top 23px
haut
Super-propriété de
marge intérieure.
Combine : padding-
23px 5px 23px 5px
padding top, padding-
(haut, droite, bas, gauche)
right, padding-
bottom, padding-
left.
border-width 3px Épaisseur de bordure
nom, rgb(rouge,vert,bleu),
border-color rgba(rouge,vert,bleu,transpare Couleur de bordure
nce), #CF1A20...
solid, dotted, dashed, double,
border-style Type de bordure
groove, ridge, inset, outset
Super-propriété de
border 3px solid black
bordure. Combine
 border-width,
border-color,
border-style.
Existe aussi en version
border-top,
border-right,
border-bottom,
border-left.
border-radius 5px Bordure arrondie
6px 6px 0px black
box-shadow (horizontale, verticale, fondu, Ombre de boîte
couleur)
 
 
Propriétés de positionnement et
d'affichage
Propriété Valeurs (exemples) Description
Type d'élément
block, inline, inline-block, (block, inline,
display
table, table-cell, none... inline-block,
none…)
visibility visible, hidden Visibilité
rect (0px, 60px, 30px, 0px) Affichage d'une partie
clip
rect (haut, droite, bas, gauche) de l'élément
Comportement en cas
overflow auto, scroll, visible, hidden
de dépassement
float left, right, none Flottant
clear left, right, both, none Arrêt d'un flottant
position relative, absolute, static Positionnement
Position par rapport
top 20px
au haut
Position par rapport
bottom 20px
au bas
Position par rapport à
left 20px
la gauche
Position par rapport à
right 20px
la droite
Ordre d'affichage en
cas de superposition.
z-index 10 La plus grande valeur
est affichée par-
dessus les autres.
 Propriétés des listes
Propriété Valeurs (exemples) Description
disc, circle, square, decimal,
list-style-
type lower-roman, upper-roman, Type de liste
lower-alpha, upper-alpha, none
list-style-
position inside, outside Position en retrait
list-style-
image url('puce.png') Puce personnalisée
Super-propriété de
liste. Combine list-
list-style - style-type, list-
style-position,
list-style-image.
 
 
 
 
Propriétés des tableaux
Propriété Valeurs (exemples) Description
border-
collapse collapse, separate Fusion des bordures
Affichage des cellules
empty-cells hide, show
vides
Position du titre du
caption-side bottom, top
tableau
 
 
 
 
Autres propriétés
Propriété Valeurs (exemple) Description
crosshair, default, help, move,
cursor pointer, progress, text, wait, e- Curseur de souris
resize, ne-resize, auto...