Référence CSS
=============

Cette **référence CSS** fournit un **index alphabétique** de toutes les propriétés CSS standards, des pseudo-classes, des pseudo-éléments, des types de données et des règles @. Vous pouvez également trouver une liste alphabétique de tous les **sélecteurs CSS par type** et une liste des **concepts clés de CSS**. Enfin est inclus un bref sommaire de **référence sur DOM-CSS / CSSOM**.

Syntaxe de règle basique
------------------------

### Syntaxe de style basique
```

règle-de-style-basique ::=
    liste-de-sélecteurs {
      liste-de-propriétés
    }
```


... où :
```

liste-de-sélecteurs ::=
    sélecteur[:pseudo-classe] [::pseudo-élément]
    [, liste-de-sélecteurs]

liste-de-propriétés ::=
    [propriété : valeur] [; liste-de-propriétés]
```


Voir aussi les *sélecteurs*, *pseudo-classes*, et *pseudo-éléments* listés ci-dessous. La syntaxe des *valeurs* dépend du type de données attendu pour chaque *propriété* indiquée.

#### Exemples de règle de style


```css
strong {
  color: red;
}

div.menu-bar li:hover > ul {
  display: block;
}
```


Pour une introduction à la syntaxe des sélecteurs CSS, consultez ce tutoriel. Soyez conscient que n'importe quelle erreur de syntaxe CSS dans une définition de règle l'invalide entièrement. Les règles non validées sont ignorées par le navigateur. Note : les définitions de règles CSS sont intégralement basées sur du texte (ASCII) alors que DOM-CSS / CSSOM (le système de gestion des règles) est basé sur des objets.

### Syntaxe des règles @

Comme la structure des règles @ varie grandement, veuillez consulter règle @ pour trouver la syntaxe que vous souhaitez.

Index des mots-clés
-------------------

**Note :** Les noms de propriétés de cet index n'incluent **pas** les noms de l'API DOM JavaScript lorsqu'ils sont différents des noms standards CSS.

### -

* `--*`
* `-webkit-line-clamp`

### A

* `abs()`
* `accent-color`
* `acos()`
* `:active`
* `additive-symbols (@counter-style)`
* `::after (:after)`
* `align-content`
* `align-items`
* `align-self`
* `align-tracks`
* `all`
* `<an-plus-b>`
* `<angle>`
* `<angle-percentage>`
* `animation`
* `animation-composition`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-range` (en-US)
* `animation-range-end` (en-US)
* `animation-range-start` (en-US)
* `animation-timeline`
* `animation-timing-function`
* `@annotation`
* `:any-link`
* `appearance`
* `ascent-override (@font-face)`
* `asin()`
* `aspect-ratio`
* `atan()` (en-US)
* `atan2()` (en-US)
* `attr()`

### B

* `::backdrop`
* `backdrop-filter`
* `backface-visibility`
* `background`
* `background-attachment`
* `background-blend-mode`
* `background-clip`
* `background-color`
* `background-image`
* `background-origin`
* `background-position`
* `background-position-x`
* `background-position-y`
* `background-repeat`
* `background-size`
* `base-palette (@font-palette-values)` (en-US)
* `<basic-shape>`
* `::before (:before)`
* `:blank`
* `bleed (@page)`
* `<blend-mode>`
* `block-size`
* `blur()`
* `border`
* `border-block`
* `border-block-color`
* `border-block-end`
* `border-block-end-color`
* `border-block-end-style`
* `border-block-end-width`
* `border-block-start`
* `border-block-start-color`
* `border-block-start-style`
* `border-block-start-width`
* `border-block-style`
* `border-block-width`
* `border-bottom`
* `border-bottom-color`
* `border-bottom-left-radius`
* `border-bottom-right-radius`
* `border-bottom-style`
* `border-bottom-width`
* `border-collapse`
* `border-color`
* `border-end-end-radius`
* `border-end-start-radius`
* `border-image`
* `border-image-outset`
* `border-image-repeat`
* `border-image-slice`
* `border-image-source`
* `border-image-width`
* `border-inline`
* `border-inline-color`
* `border-inline-end`
* `border-inline-end-color`
* `border-inline-end-style`
* `border-inline-end-width`
* `border-inline-start`
* `border-inline-start-color`
* `border-inline-start-style`
* `border-inline-start-width`
* `border-inline-style`
* `border-inline-width`
* `border-left`
* `border-left-color`
* `border-left-style`
* `border-left-width`
* `border-radius`
* `border-right`
* `border-right-color`
* `border-right-style`
* `border-right-width`
* `border-spacing`
* `border-start-end-radius`
* `border-start-start-radius`
* `border-style`
* `border-top`
* `border-top-color`
* `border-top-left-radius`
* `border-top-right-radius`
* `border-top-style`
* `border-top-width`
* `border-width`
* `bottom`
* `@bottom-center`
* `box-decoration-break`
* `box-shadow`
* `box-sizing`
* `break-after`
* `break-before`
* `break-inside`
* `brightness()`

### C

* `calc()`
* `caption-side`
* `caret`
* `caret-color`
* `caret-shape`
* `@character-variant`
* `@charset`
* `:checked`
* `circle()`
* `clamp()`
* `clear`
* `clip`
* `clip-path`
* `<color>`
* `color`
* `color-scheme`
* `column-count`
* `column-fill`
* `column-gap`
* `column-rule`
* `column-rule-color`
* `column-rule-style`
* `column-rule-width`
* `column-span`
* `column-width`
* `columns`
* `conic-gradient()`
* `contain`
* `contain-intrinsic-block-size` (en-US)
* `contain-intrinsic-height` (en-US)
* `contain-intrinsic-inline-size` (en-US)
* `contain-intrinsic-size`
* `contain-intrinsic-width` (en-US)
* `container` (en-US)
* `container-name` (en-US)
* `container-type` (en-US)
* `content`
* `content-visibility`
* `contrast()`
* `cos()` (en-US)
* `<counter>`
* `counter-increment`
* `counter-reset`
* `counter-set`
* `@counter-style`
* `counters()`
* `cross-fade()`
* `cubic-bezier()` (en-US)
* `::cue`
* `::cue-region`
* `:current`
* `cursor`
* `<custom-ident>`
* `length#cap`
* `length#ch`
* `length#cm`

### D

* `angle#deg`
* `<dashed-ident>` (en-US)
* `:default`
* `:defined`
* `descent-override (@font-face)`
* `<dimension>`
* `:dir`
* `direction`
* `:disabled`
* `display`
* `<display-box>`
* `<display-inside>`
* `<display-internal>`
* `<display-legacy>`
* `<display-listitem>`
* `<display-outside>`
* `drop-shadow()`
* `resolution#dpcm`
* `resolution#dpi`
* `resolution#dppx`

### E

* `<easing-function>`
* `element()`
* `ellipse()`
* `:empty`
* `empty-cells`
* `:enabled`
* `env()`
* `exp()` (en-US)
* `length#em`
* `length#ex`

### F

* `fallback (@counter-style)`
* `filter`
* `<filter-function>`
* `:first`
* `:first-child`
* `::first-letter (:first-letter)`
* `::first-line (:first-line)`
* `:first-of-type`
* `fit-content()`
* `<flex>`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `flex_value#fr`
* `float`
* `:focus`
* `:focus-visible`
* `:focus-within`
* `font`
* `font-display (@font-face)`
* `@font-face`
* `font-family`
* `font-family (@font-face)`
* `font-family (@font-palette-values)` (en-US)
* `font-feature-settings`
* `font-feature-settings (@font-face)` (en-US)
* `@font-feature-values`
* `font-kerning`
* `font-language-override`
* `font-optical-sizing`
* `font-palette` (en-US)
* `@font-palette-values` (en-US)
* `font-size`
* `font-size-adjust`
* `font-stretch`
* `font-stretch (@font-face)`
* `font-style`
* `font-style (@font-face)`
* `font-synthesis`
* `font-synthesis-position` (en-US)
* `font-synthesis-small-caps` (en-US)
* `font-synthesis-style` (en-US)
* `font-synthesis-weight` (en-US)
* `font-variant`
* `font-variant-alternates`
* `font-variant-caps`
* `font-variant-east-asian`
* `font-variant-emoji` (en-US)
* `font-variant-ligatures`
* `font-variant-numeric`
* `font-variant-position`
* `font-variation-settings`
* `font-variation-settings (@font-face)`
* `font-weight`
* `font-weight (@font-face)`
* `forced-color-adjust`
* `format()`
* `<frequency>`
* `<frequency-percentage>`
* `:fullscreen`
* `:future`

### G

* `angle#grad`
* `gap`
* `<gradient>`
* `::grammar-error`
* `grayscale()`
* `grid`
* `grid-area`
* `grid-auto-columns`
* `grid-auto-flow`
* `grid-auto-rows`
* `grid-column`
* `grid-column-end`
* `grid-column-start`
* `grid-row`
* `grid-row-end`
* `grid-row-start`
* `grid-template`
* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`

### H

* `frequency#Hz`
* `hanging-punctuation`
* `:has`
* `height`
* `@historical-forms`
* `:host()`
* `:host-context()`
* `:hover`
* `hsl()`
* `hsla()`
* `hue-rotate()`
* `hwb()`
* `hyphenate-character` (en-US)
* `hyphenate-limit-chars` (en-US)
* `hyphens`
* `hypot()` (en-US)

### I

* `<ident>` (en-US)
* `<image>`
* `image()`
* `image-orientation`
* `image-rendering`
* `image-resolution`
* `image-set()`
* `@import`
* `:in-range`
* `:indeterminate`
* `inherit`
* `inherits (@property)` (en-US)
* `initial`
* `initial-letter`
* `initial-letter-align`
* `initial-value (@property)` (en-US)
* `inline-size`
* `input-security`
* `inset`
* `inset()`
* `inset-block`
* `inset-block-end`
* `inset-block-start`
* `inset-inline`
* `inset-inline-end`
* `inset-inline-start`
* `<integer>`
* `:invalid`
* `invert()`
* `:is`
* `isolation`
* `length#ic`
* `length#in`

### J

* `justify-content`
* `justify-items`
* `justify-self`
* `justify-tracks` (en-US)

### K

* `frequency#kHz`
* `@keyframes`

### L

* `lab()`
* `:lang`
* `:last-child`
* `:last-of-type`
* `@layer`
* `layer()`
* `layer() (@import)`
* `lch()`
* `leader()`
* `:left`
* `left`
* `@left-bottom`
* `<length>`
* `<length-percentage>`
* `letter-spacing`
* `light-dark()`
* `line-break`
* `line-clamp`
* `line-gap-override (@font-face)`
* `line-height`
* `line-height-step`
* `<line-style>` (en-US)
* `linear-gradient()`
* `:link`
* `list-style`
* `list-style-image`
* `list-style-position`
* `list-style-type`
* `local()`
* `:local-link`
* `log()` (en-US)

### M

* `length#mm`
* `margin`
* `margin-block`
* `margin-block-end`
* `margin-block-start`
* `margin-bottom`
* `margin-inline`
* `margin-inline-end`
* `margin-inline-start`
* `margin-left`
* `margin-right`
* `margin-top`
* `margin-trim`
* `::marker`
* `marks (@page)`
* `mask`
* `mask-border`
* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
* `mask-clip`
* `mask-composite`
* `mask-image`
* `mask-mode`
* `mask-origin`
* `mask-position`
* `mask-repeat`
* `mask-size`
* `mask-type`
* `masonry-auto-flow` (en-US)
* `math-depth` (en-US)
* `math-shift` (en-US)
* `math-style`
* `matrix()`
* `matrix3d()`
* `max()`
* `max-block-size`
* `max-height`
* `max-inline-size`
* `max-lines`
* `max-width`
* `@media`
* `min()`
* `min-block-size`
* `min-height`
* `min-inline-size`
* `min-width`
* `minmax()`
* `mix-blend-mode`
* `mod()` (en-US)
* `time#ms`

### N

* `@namespace`
* `negative (@counter-style)`
* `:not`
* `:nth-child`
* `:nth-last-child`
* `:nth-last-of-type`
* `:nth-of-type`
* `<number>`

### O

* `object-fit`
* `object-position`
* `offset`
* `offset-anchor`
* `offset-distance`
* `offset-path`
* `offset-position`
* `offset-rotate`
* `:only-child`
* `:only-of-type`
* `opacity`
* `opacity()`
* `:optional`
* `order`
* `@ornaments`
* `orphans`
* `:out-of-range`
* `outline`
* `outline-color`
* `outline-offset`
* `outline-style`
* `outline-width`
* `<overflow>`
* `overflow-anchor`
* `overflow-block`
* `overflow-clip-margin` (en-US)
* `overflow-inline`
* `overflow-wrap`
* `overflow-x`
* `overflow-y`
* `overlay` (en-US)
* `override-colors (@font-palette-values)` (en-US)
* `overscroll-behavior`
* `overscroll-behavior-block` (en-US)
* `overscroll-behavior-inline` (en-US)
* `overscroll-behavior-x`
* `overscroll-behavior-y`

### P

* `Pseudo-classes`
* `Pseudo-elements`
* `length#pc`
* `length#pt`
* `length#px`
* `pad (@counter-style)`
* `padding`
* `padding-block`
* `padding-block-end`
* `padding-block-start`
* `padding-bottom`
* `padding-inline`
* `padding-inline-end`
* `padding-inline-start`
* `padding-left`
* `padding-right`
* `padding-top`
* `@page`
* `page` (en-US)
* `page-break-after`
* `page-break-before`
* `page-break-inside`
* `page-orientation (@page)` (en-US)
* `paint()`
* `paint-order`
* `::part`
* `:past`
* `path()`
* `:paused`
* `<percentage>`
* `perspective`
* `perspective()`
* `perspective-origin`
* `:picture-in-picture`
* `place-content`
* `place-items`
* `place-self`
* `::placeholder`
* `:placeholder-shown`
* `:playing`
* `pointer-events`
* `polygon()`
* `<position>`
* `position`
* `pow()` (en-US)
* `prefix (@counter-style)`
* `print-color-adjust`
* `@property`

### Q

* `length#Q`
* `quotes`

### R

* `angle#rad`
* `length#rem`
* `radial-gradient()`
* `range (@counter-style)`
* `<ratio>`
* `ray()` (en-US)
* `:read-only`
* `:read-write`
* `rect()`
* `rem()` (en-US)
* `repeat()`
* `repeating-conic-gradient()`
* `repeating-linear-gradient()`
* `repeating-radial-gradient()`
* `:required`
* `resize`
* `<resolution>`
* `reversed()`
* `revert`
* `rgb()`
* `rgba()`
* `:right`
* `right`
* `@right-bottom`
* `:root`
* `rotate`
* `rotate()`
* `rotate3d()`
* `rotateX()`
* `rotateY()`
* `rotateZ()`
* `round()` (en-US)
* `row-gap`
* `ruby-align`
* `ruby-merge`
* `ruby-position`

### S

* `saturate()`
* `scale`
* `scale()`
* `scale3d()`
* `scaleX()`
* `scaleY()`
* `scaleZ()`
* `:scope`
* `@scope` (en-US)
* `scroll()` (en-US)
* `scroll-behavior`
* `scroll-margin`
* `scroll-margin-block`
* `scroll-margin-block-end`
* `scroll-margin-block-start`
* `scroll-margin-bottom`
* `scroll-margin-inline`
* `scroll-margin-inline-end`
* `scroll-margin-inline-start`
* `scroll-margin-left`
* `scroll-margin-right`
* `scroll-margin-top`
* `scroll-padding`
* `scroll-padding-block`
* `scroll-padding-block-end`
* `scroll-padding-block-start`
* `scroll-padding-bottom`
* `scroll-padding-inline`
* `scroll-padding-inline-end`
* `scroll-padding-inline-start`
* `scroll-padding-left`
* `scroll-padding-right`
* `scroll-padding-top`
* `scroll-snap-align`
* `scroll-snap-stop`
* `scroll-snap-type`
* `scroll-timeline`
* `scroll-timeline-axis` (en-US)
* `scroll-timeline-name` (en-US)
* `scrollbar-color`
* `scrollbar-gutter` (en-US)
* `scrollbar-width`
* `::selection`
* `selector()`
* `sepia()`
* `<shape>`
* `shape-image-threshold`
* `shape-margin`
* `shape-outside`
* `sign()` (en-US)
* `sin()` (en-US)
* `size (@page)`
* `size-adjust (@font-face)`
* `skew()`
* `skewX()`
* `skewY()`
* `::slotted`
* `speak-as (@counter-style)`
* `::spelling-error`
* `sqrt()` (en-US)
* `src (@font-face)`
* `@starting-style` (en-US)
* `steps()` (en-US)
* `<string>`
* `@styleset`
* `@stylistic`
* `suffix (@counter-style)`
* `@supports`
* `supports() (@import)`
* `@swash`
* `symbols (@counter-style)`
* `symbols()`
* `syntax (@property)` (en-US)
* `system (@counter-style)`
* `time#s`

### T

* `angle#turn`
* `tab-size`
* `table-layout`
* `tan()` (en-US)
* `:target`
* `target-counter()`
* `target-counters()`
* `::target-text`
* `target-text()`
* `:target-within`
* `text-align`
* `text-align-last`
* `text-combine-upright`
* `text-decoration`
* `text-decoration-color`
* `text-decoration-line`
* `text-decoration-skip`
* `text-decoration-skip-ink`
* `text-decoration-style`
* `text-decoration-thickness`
* `text-emphasis`
* `text-emphasis-color`
* `text-emphasis-position`
* `text-emphasis-style`
* `text-indent`
* `text-justify`
* `text-orientation`
* `text-overflow`
* `text-rendering`
* `text-shadow`
* `text-size-adjust`
* `text-transform`
* `text-underline-offset`
* `text-underline-position`
* `text-wrap` (en-US)
* `<time>`
* `<time-percentage>`
* `timeline-scope` (en-US)
* `top`
* `@top-center`
* `touch-action`
* `transform`
* `transform-box`
* `<transform-function>`
* `transform-origin`
* `transform-style`
* `transition`
* `transition-behavior` (en-US)
* `transition-delay`
* `transition-duration`
* `transition-property`
* `transition-timing-function`
* `translate`
* `translate()`
* `translate3d()`
* `translateX()`
* `translateY()`
* `translateZ()`
* `type()`

### U

* `unicode-bidi`
* `unicode-range (@font-face)`
* `unset`
* `<url>`
* `url()`
* `:user-invalid`
* `user-select`
* `:user-valid`

### V

* `length#vh`
* `length#vmax`
* `length#vmin`
* `length#vw`
* `:valid`
* `var()`
* `vertical-align`
* `view()`
* `view-timeline` (en-US)
* `view-timeline-axis` (en-US)
* `view-timeline-inset` (en-US)
* `view-timeline-name` (en-US)
* `::view-transition` (en-US)
* `::view-transition-group` (en-US)
* `::view-transition-image-pair` (en-US)
* `view-transition-name`
* `::view-transition-new` (en-US)
* `::view-transition-old` (en-US)
* `visibility`
* `:visited`

### W

* `:where`
* `white-space`
* `white-space-collapse` (en-US)
* `widows`
* `width`
* `will-change`
* `word-break`
* `word-spacing`
* `word-wrap`
* `writing-mode`

### X

* `resolution#x`

### Z

* `z-index`

### Others

* `--*`

Sélecteurs
----------

Sont indiqués dans ce qui suit les divers sélecteurs, qui permettent aux styles d'être appliqués de façon conditionnelle selon diverses caractéristiques des éléments présents dans le DOM.

### Sélecteurs simples

Les sélecteurs simples sont des sélecteurs fondamentaux. Ce sont les sélecteurs les plus élémentaires qui sont fréquemment combinés pour créer d'autres sélecteurs plus complexes.

* Sélecteur de type `nomElement`
* Sélecteur de classe `.nomClasse`
* Sélecteur d'identifiant `#nomID`
* Sélecteur universel **`*`**, `ns|*`, **`*|*`**, **`|*`**
* Sélecteur d'attribut `[attr=valeur]`
### Sélecteur de groupe

Sélecteur de conjonction `A, B`

Indique que les éléments des sélecteurs `A` et `B` doivent être sélectionnés. Il s'agit d'une méthode de groupement pour sélectionner des éléments selon plusieurs critères.

### Combinateurs

Les combinateurs sont des sélecteurs qui établissent une relation entre deux sélecteurs ou plus, tel que "A est un enfant de B" ou "A est adjacent à B".

Combinateur de voisin direct `A + B`

Indique que les éléments sélectionnés par `A` et par `B` ont le même parent et que celui sélectionné par `B` suit immédiatement celui sélectionné par `A`.

Combinateur de voisin général `A ~ B`

Indique que les éléments sélectionnés par `A` et par `B` ont le même parent et que celui sélectionné par `B` suit celui sélectionné par `A`, mais pas nécessairement immédiatement après lui.

Combinateur d'enfant `A > B`

Indique que l'élément sélectionné par `B` est un enfant direct de l'élément sélectionné par `A`.

Combinateur de descendant `A B`

Indique que l'élément sélectionné par `B` est un descendant de l'élément sélectionné par `A`, mais n'en est pas nécessairement un enfant direct.

Combinateur de colonne `A || B` 
Expérimental

Indique que l'élément sélectionné par `B` est situé dans la colonne de table indiquée par `A`. Les éléments qui s'étendent sur des colonnes multiples sont considérés comme étant membres de chacune de ces colonnes.

### Pseudo

Pseudo-classes `:`

Définit un état spécial pour le ou les éléments ciblés.

Pseudo-éléments `::`

Représente des entités qui ne sont pas incluses en HTML.


See also Selectors in the Selectors Level 4 specification.

Concepts
--------

### Syntaxe et sémantique

* Syntaxe CSS
* Règles @ (*at-rules*)
* Cascade
* Commentaires
* Descripteurs
* Héritage
* Propriétés raccourcies
* Spécificité
* Syntaxe de définition des valeurs
* Unités et valeurs CSS
### Valeurs

* Valeur réelle
* Valeur calculée
* Valeur initiale
* Valeur résolue
* Valeur spécifiée
* Valeur utilisée
### Disposition

* Contexte de formatage de bloc
* Modèle de boîte
* Bloc englobant
* Modes de disposition
* Fusion des marges
* Éléments remplacés
* Contexte d'empilement
* Modèle de mise en forme visuelle
DOM-CSS / CSSOM
---------------

### Principaux types d'objets

* `Document.styleSheets`
* `styleSheets[i].cssRules`
* `cssRules[i].cssText (en-US)` (sélecteur et style)
* `cssRules[i].selectorText (en-US)`
* `HTMLElement.style`
* `HTMLElement.style.cssText` (style uniquement)
* `Element.className`
* `Element.classList`
### Méthodes importantes

* `CSSStyleSheet.insertRule()` (en-US)
* `CSSStyleSheet.deleteRule()` (en-US)
Voir aussi
----------

* Extensions spécifiques de Mozilla à CSS (préfixées avec `-moz-`)
* Extensions spécifiques de WebKit à CSS (préfixées pour la plupart avec `-webkit-`)
* Extensions spécifiques de Microsoft à CSS (préfixées pour la plupart avec `-ms-`)