Tableau de référence CSS

Dans la colonne valeur, celles en italique sont à remplacer par une valeur au format donné. Les autres sont des mots-clés reconnus.

Marges (margin)

Propriété Description Valeurs possibles IE FF NS CSS
margin Raccourci d'écriture pour spécifier toutes les propriétés de marge en une seule fois. margin-top
margin-right
margin-bottom
margin-left
4 1 4 1
margin-bottom Définit la marge inférieure de l'élément. auto
length
%
4 1 4 1
margin-left Définit la marge gauche de l'élément. auto
length
%
3 1 4 1
margin-right Définit la marge droite de l'élément. auto
length
%
3 1 4 1
margin-top Définit la marge supérieure de l'élément. auto
length
%
3 1 4 1

Exemples d'utilisation des marges (en anglais)

Marges internes (padding)

Propriété Description Valeurs possibles IE FF NS CSS
padding Raccourci d'écriture pour spécifier toutes les propriétés de marge interne en une seule fois. padding-top
padding-right
padding-bottom
padding-left
4 1 4 1
padding-bottom Définit la marge interne inférieure de l'élément. length
%
4 1 4 1
padding-left Définit la marge interne gauche de l'élément. length
%
4 1 4 1
padding-right Définit la marge interne droite de l'élément. length
%
4 1 4 1
padding-top Définit la marge interne supérieure de l'élément. length
%
4 1 4 1

Exemples d'utilisation des marges internes (en anglais)

Bordures (border)

Propriété Description Valeurs possibles IE FF NS CSS
border Raccourci d'écriture pour spécifier une épaisseur, un style et une couleur pour les 4 bordures en une seule fois. border-width
border-style
border-color
4 1 4 1
border-bottom Raccourci d'écriture pour spécifier toutes les propriétés de la bordure inférieure en une seule fois. border-bottom-width
border-style
border-color
4 1 6 1
border-bottom-color Définit la couleur de la bordure inférieure. border-color 4 1 6 2
border-bottom-style Définit le style de la bordure inférieure. border-style 4 1 6 2
border-bottom-width Définit l'épaisseur de la bordure inférieure. thin
medium
thick
length
4 1 4 1
border-color Définit la couleur des 4 bordures, accepte de 1 à 4 paramètres. color 4 1 6 1
border-left Raccourci d'écriture pour spécifier toutes les propriétés de la bordure gauche en une seule fois. border-left-width
border-style
border-color
4 1 6 1
border-left-color Définit la couleur de la bordure de gauche. border-color 4 1 6 2
border-left-style Définit le style de la bordure de gauche. border-style 4 1 6 2
border-left-width Définit l'épaisseur de la bordure de gauche. thin
medium
thick
length
4 1 4 1
border-right Raccourci d'écriture pour spécifier toutes les propriétés de la bordure de droite en une seule fois. border-right-width
border-style
border-color
4 1 6 1
border-right-color Définit la couleur de la bordure de droite. border-color 4 1 6 2
border-right-style Définit le style de la bordure de droite. border-style 4 1 6 2
border-right-width Définit l'épaisseur de la bordure de droite. thin
medium
thick
length
4 1 4 1
border-style Définit le style des 4 bordures, accepte de 1 à 4 paramètres. none
hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
4 1 6 1
border-top Raccourci d'écriture pour spécifier toutes les propriétés de la bordure supérieure en une seule fois. border-top-width
border-style
border-color
4 1 6 1
border-top-color Définit la couleur de la bordure supérieure. border-color 4 1 6 2
border-top-style Définit le style de la bordure supérieure. border-style 4 1 6 2
border-top-width Définit l'épaisseur de la bordure supérieure. thin
medium
thick
length
4 1 4 1
border-width Définit la couleur des 4 bordures, accepte de 1 à 4 paramètres. thin
medium
thick
length
4 1 4 1

Exemples d'utilisation des bordures (en anglais)

Détour (Outline)

Propriété Description Valeurs possibles IE FF NS CSS
outline Raccourci d'écriture pour spécifier toutes les propriétés de détour d'un élément en une seule fois. outline-color
outline-style
outline-width
- 1.5 - 2
outline-color Définit la couleur du détour de l'élément. color
invert
- 1.5 - 2
outline-style Définit le style de détour de l'élément. none
dotted
dashed
solid
double
groove
ridge
inset
outset
- 1.5 - 2
outline-width Définit l'épaisseur du détour de l'élément. thin
medium
thick
length
- 1.5 - 2

Arrière-plan (background)

Propriété Description Valeurs possibles IE FF NS CSS
background Raccourci d'écriture pour spécifier toutes les propriétés d'arrière-plan en une seule fois. background-color background-image background-repeat background-attachment background-position 4 1 6 1
background-attachment Définit si l'image d'arrière-plan est fixe ou si elle défile avec l'élément. scroll
fixed
4 1 6 1
background-color Définit la couleur d'arrière-plan d'un élément. color-rgb
color-hex
color-name

transparent
4 1 4 1
background-image Affiche une image d'arrière-plan pour cet élément. url
none
4 1 4 1
background-position Définit la position à partir de laquelle l'image sera dessinée. top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
4 1 6 1
background-repeat Définit comment/si une image se répète. repeat
repeat-x
repeat-y
no-repeat
4 1 4 1

Exemples d'utilisation de l'arrière-plan (en anglais)

Classification

Propriété Description Valeurs possibles IE FF NS CSS
clear Définit le(s) côté(s) où les éléments flottants sont autorisés. left
right
both
none
4 1 4 1
cursor Définit le type de curseur à afficher. url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
4 1 6 2
display Définit comment/si l'élément doit s'afficher. none
inline
block
list-item
run-in
compact
marker
table
inline-table
table-row-group
table-header-group
table-footer-group
table-row
table-column-group
table-column
table-cell
table-caption
4 1 4 1
float Définit comment/si une image ou du texte va "flotter" dans la mise en page. left
right
none
4 1 4 1
position Place un élément de manière statique, relative, absolue ou fixe. static
relative
absolute
fixed
4 1 4 2
visibility Définit si un élément doit être visible ou non. visible
hidden
collapse
4 1 6 2

Exemples d'utilisation de ces propriétés (en anglais)

Dimensions

Propriété Description Valeurs possibles IE FF NS CSS
height Définit la hauteur de l'élément. auto
length
%
4 1 6 1
line-height Définit la hauteur de ligne. normal
number
length
%
4 1 4 1
max-height Définit la hauteur maximum autorisée pour un élément. none
length
%
- 1 6 2
max-width Définit la largeur maximum d'un élément. none
length
%
- 1 6 2
min-height Définit la hauteur minimum d'un élément. length
%
- 1 6 2
min-width Définit la largeur minimum d'un élément. length
%
- 1 6 2
width Définit la largeur d'un élément. auto
%
length
4 1 4 1

Exemples d'utilisation du dimensionnement (en anglais)

Positionnement (position)

Propriété Description Valeurs possibles IE FF NS CSS
bottom Définit la distance entre la limite inférieure d'un élément et celle de son élément parent (ou conteneur). auto
%
length
5 1 6 2
clip Définit la forme d'un élément. Celui-ci est découpé à la forme voulue, et affiché. shape
auto
4 1 6 2
left Définit la distance entre la limite gauche d'un élément et celle de son élément parent (ou conteneur). auto
%
length
4 1 4 2
overflow Définit comment réagir lorsqu'un élément déborde de son emplacement. visible
hidden
scroll
auto
4 1 6 2
position Place un élément de manière statique, relative, absolue ou fixe. static
relative
absolute
fixed
4 1 4 2
right Définit la distance entre la limite droite d'un élément et celle de son élément parent (ou conteneur). auto
%
length
5 1 6 2
top Définit la distance entre la limite supérieure d'un élément et celle de son élément parent (ou conteneur). auto
%
length
4 1 4 2
vertical-align Définit l'alignement vertical d'un élément. baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
4 1 4 1
z-index Définit l'ordre de l'élément dans l'axe de la profondeur. auto
number
4 1 6 2

Exemples d'utilisation du positionnement (en anglais)

Texte (text)

Propriété Description Valeurs possibles IE FF NS CSS
color Définit la couleur du texte. color 3 1 4 1
direction Définit la direction du texte. ltr
rtl
6 1 6 2
letter-spacing Augmente ou diminue l'écart entre les lettres. normal
length
4 1 6 1
text-align Définit l'alignement du texte. left
right
center
justify
4 1 4 1
text-decoration Définit les effets appliqués au texte. none
underline
overline
line-through
blink
4 1 4 1
text-indent Définit le retrait de première ligne appliqué au texte. length
%
4 1 4 1
text-shadow Définit la couleur et la distance de l'ombre portée appliquée au texte. none
color
length
       
text-transform Définit la casse de l'élément. none
capitalize
uppercase
lowercase
4 1 4 1
unicode-bidi   normal
embed
bidi-override
5     2
white-space Définit comment/si les caractères non imprimables (espaces, tabulations et retours à la ligne) sont traités. normal
pre
nowrap
5 1 4 1
word-spacing Augmente ou diminue l'écart entre les mots. normal
length
6 1 6 1

Exemples d'utilisation des propriétés du texte (en anglais)

Police (font)

Propriété Description Valeurs possibles IE FF NS CSS
font Raccourci d'écriture pour spécifier toutes les propriétés de police en une seule fois. font-style
font-variant
font-weight
font-size/line-height
font-family
caption
icon
menu
message-box
small-caption
status-bar
4 1 4 1
font-family Liste triée par ordre de priorité des polices à utiliser pour cet élément. family-name
generic-family
3 1 4 1
font-size Définit la taille de la police. xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
3 1 4 1
font-size-adjust Définit un rapport d'aspect préservant la hauteur d'un "x" dans la police de premier choix none
number
- - - 2
font-stretch Définit l'aspect condensé ou étendu de la police. normal
wider
narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
- - - 2
font-style Définit le style de la police. normal
italic
oblique
4 1 4 1
font-variant Définit si le texte doit s'afficher en petites capitales ou non. normal
small-caps
4 1 6 1
font-weight Définit l'épaisseur de la police. normal
bold
bolder
lighter
100
200
300
400
500
600
700
800
900
4 1 4 1

Exemples d'utilisation des propriétés de la police (en anglais)

Tableaux (table)

Propriété Description Valeurs possibles IE FF NS CSS
border-collapse Définit si les bordures de cellules fusionnent ou s'additionnent. collapse
separate
5 1 7 2
border-spacing Définit la distance entre les bordures de cellules adjacentes (nécessite border-collapse: separate). length length - 1 6 2
caption-side Définit l'emplacement de la légende par rapport au tableau auquel elle appartient. top
bottom
left
right
- 1 6 2
empty-cells Définit si la bordure des cellules vides doit être affichée ou non (nécessite border-collapse: separate). show
hide
- 1 6 2
table-layout Définit l'algorythme utilisé pour afficher le tableau (auto: la largeur des colonnes s'adapte à leur contenu). auto
fixed
5 1 6 2

Listes et puces (list, marker)

Propriété Description Valeurs possibles IE FF NS CSS
list-style Raccourci d'écriture pour spécifier toutes les propriétés d'une liste en une seule fois. list-style-type
list-style-position
list-style-image
4 1 6 1
list-style-image Définit une image comme marqueur de liste (puce). none
url
4 1 6 1
list-style-position Définit la position du marqueur de liste dans l'élément. inside
outside
4 1 6 1
list-style-type Définit le type de marqueur utilisé. none
disc
circle
square
decimal
decimal-leading-zero
lower-roman
upper-roman
lower-alpha
upper-alpha
lower-greek
lower-latin
upper-latin
hebrew
armenian
georgian
cjk-ideographic
hiragana
katakana
hiragana-iroha
katakana-iroha
4 1 4 1
marker-offset Définit l'espacement horizontal du marqueur. auto
length
  1 7 2

Exemples d'utilisation des listes et puces (en anglais)

Pseudo-classes

Pseudo-class Correspond à IE FF NS CSS
:active L'élément est en cours d'activation. 4 1 8 1
:focus L'élément a l'attention (le curseur ou caret s'y trouve). - - - 2
:hover Le pointeur est au-dessus de l'élément. 4 1 7 1
:link L'élément est un lien. 3 1 4 1
:visited Le lien a été visité (surcharge la pseudo-classe :link). 3 1 4 1
:first-child L'élément est le premier descendant de son conteneur.   1 7 2
:lang L'attriut lang de l'élément est défini.   1 8 2

Exemples d'utilisation des pseudo-classes (en anglais)

Pseudo-éléments (pseudo-element)

Pseudo-element But IE FF NS CSS
:first-letter Permet de styler de manière particulière la première lettre de l'élément. 5 1 8 1
:first-line Permet de styler de manière particulière la première ligne de l'élément. 5 1 8 1
:before Permet d'insérer du contenu devant un élément.   1.5 8 2
:after Permet d'insérer du contenu après un élément.   1.5 8 2

Exemples d'utilisation des pseudo-éléments (en anglais)

Contenu généré (generated content)

Propriété Description Valeurs possibles IE FF NS CSS
content Génère du contenu dans un document. S'utilise avec les pseudo-éléments :before et :after string
url
counter(name)
counter(name, list-style-type)
counters(name, string)
counters(name, string, list-style-type)
attr(attribute-name)
open-quote
close-quote
no-open-quote
no-close-quote
  1 6 2
counter-increment Définit la valeur dont le compteur est incrémenté à chaque nouvel élément de liste. none
identifier number
      2
counter-reset Définit la valeur à laquelle est mis le compteur à chaque occurrence d'un nouvel élément de liste. none
identifier number
      2
quotes Définit le type de guillemets utilisé. none
string string
- 1 6 2

Ce tableau est une traduction de la référence CSS du w3schools (en anglais). Traduction : Goulven champenois