Les propriétés CSS

[Créez votre site web avec HTML5 et CSS3]

Vous pouvez vous servir de cette annexe comme d'un aide-mémoire lorsque
vous développez votre site web.

Cette annexe n'est pas complète et c'est volontaire (seules les plus utilisées
sont listées). Une référence exhaustive des éléments CSS est fournie sur le site
du Mozilla Developer Network.

Propriétés de mise en forme du texte

Propriété Valeurs Description
(exemples)

font-family police1, Nom de police

police2,
police3,
serif,
sans-serif,
monospace,
etc.

@font-face Nom et source de Police personnalisée

la police

font-size 1.3em, Taille du texte

16px,
120%,
etc.

font-weight bold, Gras

normal.

font-style italic, Italique

oblique,
normal.

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]
 text-decoration underline, Soulignement, ligne
overline, au-dessus, barré ou
line-through, clignotant
blink,
none.

font-variant small-caps, Petites capitales

normal.

text-transform capitalize, Capitales

lowercase,
uppercase.

font - Super-propriété de police qui

combine : font-weight,
font-style, font-size,
font-variant, font-family

text-align left, Alignement horizontal

center,
right,
justify.

vertical-align baseline, Alignement vertical (cellules

middle, sub, de tableau ou éléments
super, top, inline-block uniquement)
bottom

line-height 18px, Hauteur de ligne

120%,
normal,
etc.

text-indent 25px Alinéa

white-space pre, Césure

nowrap,
normal.

word-wrap break-word, Césure forcée

normal.

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]
 text-shadow 5px 5px 2px Ombre de texte
blue
(horizontale,
verticale, fondu,
couleur)

Propriétés de couleur et de fond

Propriété Valeurs Description
(exemples)

color nom, RGB Couleur du texte

(rouge,vert,bleu),
RGBA
(rouge,vert,bleu,t
ransparence),
#CF1A20

background-color Identique à color Couleur de fond

background-image url('image.png') Image de fond

background-attachme fixed, Fond fixe

nt scroll.

background-repeat repeat-x, Répétition du fond

repeat-y,
no-repeat,
repeat.

background-position (x y), Position du fond

top,
center,
bottom,
left,
right.

background - Super-propriété de fond qui

combine :
background-image,
background-repeat,
background-attachment,
background-position

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]
 opacity 0.5 Transparence

Propriétés des boîtes

Propriété Valeurs Description
(exemples)

width 150px, Largeur

80%,
etc.

height 150px, Hauteur

80%,
etc.

min-width 150px, Largeur minimale

80%,
etc.

max-width 150px, Largeur maximale

80%,
etc.

min-height 150px, Hauteur minimale

80%,
etc.

max-height 150px, Hauteur maximale

80%,
etc.

margin-top 23px Marge en haut

margin-left 23px Marge à gauche

margin-right 23px Marge à droite

margin-bottom 23px Marge en bas

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]
 margin 23px 5px 23px Super-propriété de marge
5px qui combine :
(haut, droite, bas, margin-top,
gauche) margin-right,
margin-bottom,
margin-left.

padding-left 23px Marge intérieure à gauche

padding-right 23px Marge intérieure à droite

padding-bottom 23px Marge intérieure en bas

padding-top 23px Marge intérieure en haut

padding 23px 5px 23px Super-propriété de marge

5px qui combine :
(haut, droite, bas, padding-top,
gauche) padding-right,
padding-bottom,
padding-left.

border-width 3px Épaisseur de bordure

border-color nom, RGB Couleur de bordure

(rouge,vert,bleu),
ou RGBA
(rouge,vert,bleu,tr
ansparence),
#CF1A20

border-style solid, dotted, Type de bordure

dashed,
double,
groove, ridge,
inset, outset.

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]
 border 3px solid Super-propriété de bordure
black qui combine :
border-width,
border-color,
border-style.

Existe aussi en version

border-top,
border-right,
border-bottom,
border-left.

border-radius 5px Bordure arrondie

box-shadow 6px 6px 0px Ombre de boîte

black
(horizontale,
verticale, fondu,
couleur)

Propriétés de positionnement et d'affichage

Propriété Valeurs Description
(exemples)

display block, Type d'élément (block,

inline, inline, inline-block,
inline-block, none…)
table,
table-cell,
none.

visibility visible, Visibilité

hidden.

clip rect (0px, Affichage d'une partie de

60px, 30px, l'élément
0px)
rect (haut,
droite, bas,
gauche)

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]
 overflow auto, Comportement en cas de
scroll, dépassement
visible,
hidden.

float left, Flottant

right,
none.

clear left, Arrêt d'un flottant

right,
both,
none.

position relative, Positionnement

absolute,
static

top 20px Position par rapport au haut

bottom 20px Position par rapport au bas

left 20px Position par rapport à la

gauche

right 20px Position par rapport à la

droite

z-index 10 Ordre d'affichage en cas de

superposition.
La plus grande valeur est
affichée par-dessus les
autres.

Propriétés des listes

Propriété Valeurs Description
(exemples)

list-style-type disc, Type de liste

circle,
square,
decimal,
lower-roman,
upper-roman,

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]
 lower-alpha,
upper-alpha,
none.

list-style-position inside, Position en retrait

outside.

list-style-image URL ('puce.png') Puce personnalisée

list-style - Super-propriété de liste

qui combine :
list-style-type,
list-style-position,
list-style-image.

Propriétés des tableaux

Propriété Valeurs Description
(exemples)

border-collapse collapse, Fusion des bordures

separate.

empty-cells hide, Affichage des cellules

show. vides

caption-side bottom, Position du titre du tableau

top.

Autres propriétés
Propriété Valeurs Description
(exemples)

cursor crosshair, Curseur de souris

default, help,
move, pointer,
progress, text,
wait, e-resize,
ne-resize,
auto, etc.

[Créez votre site web avec HTML5 et CSS3 - Glossaire des balises HTML]