références CSS
références CSS
Tableau de référence CSS
- Marges (margin)
- Marges internes (padding)
- Bordures (border)
- Détour (outline)
- Arrière-plan (background)
- Tableaux (table)
- Listes et puces (list, marker)
- Pseudo-classes
- 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)
| 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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
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 |
