Tableau de référence CSS [Link]

html

Tableau de référence CSS

Marges (margin) Classification Tableaux (table)
Marges internes (padding) Dimensions Listes et puces (list,
Bordures (border) Positionnement (position) marker)
Détour (outline) Texte (text) Pseudo-classes
Arrière-plan (background) Police (font) Pseudo-éléments (pseudo-
elements)
Contenu généré
(generated content)

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

Exemples d'utilisation des marges (en anglais)

Marges internes (padding)

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

1 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

padding-left Définit la marge interne gauche de l'élément. length 4 1 4 1

%
padding- Définit la marge interne droite de l'élément. length 4 1 4 1
right %
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)
Valeurs
Propriété Description IE FF NS CSS
possibles
border Raccourci d'écriture pour spécifier une épaisseur, un style border-width 4 1 4 1
et une couleur pour les 4 bordures en une seule fois. border-style
border-color
border-bottom Raccourci d'écriture pour spécifier toutes les propriétés de border- 4 1 6 1
la bordure inférieure en une seule fois. bottom-width
border-style
border-color
border- Définit la couleur de la bordure inférieure. border-color 4 1 6 2
bottom-color
border- Définit le style de la bordure inférieure. border-style 4 1 6 2
bottom-style
border- Définit l'épaisseur de la bordure inférieure. thin 4 1 4 1
bottom-width medium
thick
length
border-color Définit la couleur des 4 bordures, accepte de 1 à 4 color 4 1 6 1
paramètres.
border-left Raccourci d'écriture pour spécifier toutes les propriétés de border-left- 4 1 6 1
la bordure gauche en une seule fois. width
border-style
border-color
border-left- Définit la couleur de la bordure de gauche. border-color 4 1 6 2
color
border-left- Définit le style de la bordure de gauche. border-style 4 1 6 2
style
border-left- Définit l'épaisseur de la bordure de gauche. thin 4 1 4 1
width medium
thick
length
border-right Raccourci d'écriture pour spécifier toutes les propriétés de border-right- 4 1 6 1
la bordure de droite en une seule fois. width
border-style
border-color
border-right- Définit la couleur de la bordure de droite. border-color 4 1 6 2
color
border-right- Définit le style de la bordure de droite. border-style 4 1 6 2
style

2 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

border-right- Définit l'épaisseur de la bordure de droite. thin 4 1 4 1

width medium
thick
length
border-style Définit le style des 4 bordures, accepte de 1 à 4 none 4 1 6 1
paramètres. hidden
dotted
dashed
solid
double
groove
ridge
inset
outset
border-top Raccourci d'écriture pour spécifier toutes les propriétés de border-top- 4 1 6 1
la bordure supérieure en une seule fois. width
border-style
border-color
border-top- Définit la couleur de la bordure supérieure. border-color 4 1 6 2
color
border-top- Définit le style de la bordure supérieure. border-style 4 1 6 2
style
border-top- Définit l'épaisseur de la bordure supérieure. thin 4 1 4 1
width medium
thick
length
border-width Définit la couleur des 4 bordures, accepte de 1 à 4 thin 4 1 4 1
paramètres. medium
thick
length

Exemples d'utilisation des bordures (en anglais)

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

3 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

outline- Définit l'épaisseur du détour de l'élément. thin - 1.5 - 2

width medium
thick
length

Arrière-plan (background)
Propriété Description Valeurs possibles IE FF NS CSS
background Raccourci d'écriture pour background-color background-image 4 1 6 1
spécifier toutes les propriétés background-repeat background-
d'arrière-plan en une seule fois. attachment background-position
background- Définit si l'image d'arrière-plan scroll 4 1 6 1
attachment est fixe ou si elle défile avec fixed
l'élément.
background- Définit la couleur d'arrière-plancolor-rgb 4 1 4 1
color d'un élément. color-hex
color-name
transparent
background- Affiche une image d'arrière-plan url 4 1 4 1
image pour cet élément. none
background- Définit la position à partir de top left 4 1 6 1
position laquelle l'image sera dessinée. top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background- Définit comment/si une image se repeat 4 1 4 1
repeat répète. repeat-x
repeat-y
no-repeat

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

Classification
Valeurs
Propriété Description IE FF NS CSS
possibles
clear Définit le(s) côté(s) où les éléments flottants sont autorisés. left 4 1 4 1
right
both
none
cursor Définit le type de curseur à afficher. url 4 1 6 2
auto
crosshair
default
pointer
move

4 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
display Définit comment/si l'élément doit s'afficher. none 4 1 4 1
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
float Définit comment/si une image ou du texte va "flotter" dans la left 4 1 4 1
mise en page. right
none
position Place un élément de manière statique, relative, absolue ou static 4 1 4 2
fixe. relative
absolute
fixed
visibility Définit si un élément doit être visible ou non. visible 4 1 6 2
hidden
collapse

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 4 1 6 1
length
%
line-height Définit la hauteur de ligne. normal 4 1 4 1
number
length

5 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

%
max-height Définit la hauteur maximum autorisée pour un élément. none - 1 6 2
length
%
max-width Définit la largeur maximum d'un élément. none - 1 6 2
length
%
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 4 1 4 1
%
length

Exemples d'utilisation du dimensionnement (en anglais)

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

6 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

%
z-index Définit l'ordre de l'élément dans l'axe de la profondeur. auto 4 1 6 2
number

Exemples d'utilisation du positionnement (en anglais)

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

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

Police (font)
Valeurs
Propriété Description IE FF NS CSS
possibles
font Raccourci d'écriture pour spécifier toutes les propriétés de font-style 4 1 4 1
police en une seule fois. font-variant
font-weight

7 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

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

8 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

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

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

Listes et puces (list, marker)

Valeurs
Propriété Description IE FF NS CSS
possibles
list-style Raccourci d'écriture pour spécifier toutes les propriétés list-style-type 4 1 6 1
d'une liste en une seule fois. list-style-position
list-style-image
list-style- Définit une image comme marqueur de liste (puce). none 4 1 6 1
image url
list-style- Définit la position du marqueur de liste dans l'élément. inside 4 1 6 1
position outside
list-style-type Définit le type de marqueur utilisé. none 4 1 4 1
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

9 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

marker-offset Définit l'espacement horizontal du marqueur. auto 1 7 2

length

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 5 1 8 1
lettre de l'élément.
:first-line Permet de styler de manière particulière la première ligne 5 1 8 1
de l'élément.
: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 string 1 6 2
avec les pseudo-éléments :before et :after 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
counter- Définit la valeur dont le compteur est incrémenté none 2
increment à chaque nouvel élément de liste. identifier number
counter-reset Définit la valeur à laquelle est mis le compteur à none 2
chaque occurrence d'un nouvel élément de liste. identifier number

10 sur 11 20/12/2020 à 09:12

Tableau de référence CSS [Link]

quotes Définit le type de guillemets utilisé. none - 1 6 2

string string

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

11 sur 11 20/12/2020 à 09:12