Référence CSS
Cette référence CSS fournit un index alphabétique de toutes les propriétés, pseudo-classes, pseudo-éléments, types de données, notations fonctionnelles et règles @ des standards CSS. 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
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
Pour une introduction à la syntaxe des sélecteurs, consultez ce guide des sélecteurs CSS. 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 (angl.) (ASCII) alors que DOM-CSS / CSSOM (le système de gestion des règles) est basé sur des objets (angl.).
Syntaxe des règles @
Comme la structure des règles @ varie grandement, veuillez consulter règle @ pour trouver la syntaxe que vous souhaitez.
Index
Note : Cet index n'inclut pas les attributs de présentation exclusifs à SVG, qui peuvent être utilisés comme propriétés CSS sur les éléments SVG.
Note : Les noms de propriétés dans cet index n'incluent pas les noms JavaScript, qui diffèrent des noms standards CSS.
-
A
Attribute selectorsabs() CSS function<absolute-size>accent-coloracos() CSS function:active CSS pseudo-class:active-view-transition CSS pseudo-class:active-view-transition-type() CSS pseudo-classadditive-symbols (@counter-style)::after CSS pseudo-elementalign-contentalign-itemsalign-selfalignment-baselineall<alpha-value>anchor() CSS functionanchor-nameanchor-scopeanchor-size() CSS function<angle><angle-percentage>animationanimation-compositionanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-rangeanimation-range-endanimation-range-startanimation-timelineanimation-timing-function:any-link CSS pseudo-classappearanceascent-override (@font-face)asin() CSS functionaspect-ratioatan() CSS functionatan2() CSS functionattr() CSS function:autofill CSS pseudo-class<axis>
B
::backdrop CSS pseudo-elementbackdrop-filterbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-position-xbackground-position-ybackground-repeatbackground-repeat-xbackground-repeat-ybackground-sizebase-palette (@font-palette-values)<baseline-position>baseline-shiftbaseline-source<basic-shape>::before CSS pseudo-element:blank CSS pseudo-class<blend-mode>block-sizeblur() CSS functionborderborder-blockborder-block-colorborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-block-styleborder-block-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-end-end-radiusborder-end-start-radiusborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inlineborder-inline-colorborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-inline-styleborder-inline-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-start-end-radiusborder-start-start-radiusborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-break<box-edge>box-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness() CSS function:buffering CSS pseudo-class
C
Class selectorsCustom properties (--*): CSS variablescalc() CSS function<calc-keyword>calc-size() CSS function<calc-sum>caption-sidecaretcaret-animationcaret-colorcaret-shape@charset:checked CSS pseudo-class::checkmark CSS pseudo-elementcircle() CSS functionclamp() CSS functionclearclip-pathclip-rule<color>colorcolor() CSS functioncolor-interpolationcolor-interpolation-filters<color-interpolation-method>color-mix() CSS function@color-profilecolor-scheme::column CSS pseudo-elementcolumn-countcolumn-fillcolumn-gapcolumn-heightcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumn-wrapcolumnsconic-gradient() CSS functioncontaincontain-intrinsic-block-sizecontain-intrinsic-heightcontain-intrinsic-inline-sizecontain-intrinsic-sizecontain-intrinsic-width@containercontainercontainer-namecontainer-typecontent<content-distribution><content-position>content-visibilitycontrast() CSS functioncontrast-color() CSS functioncorner-block-end-shapecorner-block-start-shapecorner-bottom-left-shapecorner-bottom-right-shapecorner-bottom-shapecorner-end-end-shapecorner-end-start-shapecorner-inline-end-shapecorner-inline-start-shapecorner-left-shapecorner-right-shapecorner-shape<corner-shape-value>corner-start-end-shapecorner-start-start-shapecorner-top-left-shapecorner-top-right-shapecorner-top-shapecos() CSS functioncounter() CSS functioncounter-incrementcounter-resetcounter-set@counter-stylecounters() CSS functioncross-fade() CSS functioncubic-bezier() CSS function::cue CSS pseudo-element:current CSS pseudo-classcursor<custom-ident>@custom-mediacxcy
D
d<dashed-function>: CSS custom functions<dashed-ident>:default CSS pseudo-class:defined CSS pseudo-classdescent-override (@font-face)::details-content CSS pseudo-elementdevice-cmyk() CSS function<dimension>:dir() CSS pseudo-classdirection:disabled CSS pseudo-classdisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dominant-baselinedrop-shadow() CSS functiondynamic-range-limitdynamic-range-limit-mix() CSS function
E
<easing-function>element() CSS functionellipse() CSS function:empty CSS pseudo-classempty-cells:enabled CSS pseudo-classenv() CSS functionexp() CSS function
F
fallback (@counter-style)field-sizing::file-selector-button CSS pseudo-elementfillfill-opacityfill-rulefilter<filter-function>:first CSS pseudo-class:first-child CSS pseudo-class::first-letter CSS pseudo-element::first-line CSS pseudo-element:first-of-type CSS pseudo-classfit-contentfit-content() CSS function<flex>flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatflood-colorflood-opacity:focus CSS pseudo-class:focus-visible CSS pseudo-class:focus-within CSS pseudo-classfontfont-display (@font-face)font-display (@font-feature-values)@font-facefont-familyfont-family (@font-face)font-family (@font-palette-values)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-optical-sizingfont-palette@font-palette-valuesfont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-synthesis-positionfont-synthesis-small-capsfont-synthesis-stylefont-synthesis-weightfont-variantfont-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-emojifont-variant-ligaturesfont-variant-numericfont-variant-positionfont-variation-settingsfont-variation-settings (@font-face)font-weightfont-weight (@font-face)font-widthfont-width (@font-face)forced-color-adjust<frequency><frequency-percentage>:fullscreen CSS pseudo-class@function:future CSS pseudo-class
G
gap<generic-family><gradient>::grammar-error CSS pseudo-elementgrayscale() CSS functiongridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-startgrid-rowgrid-row-endgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
H
hanging-punctuation:has() CSS pseudo-class:has-slotted CSS pseudo-class:heading CSS pseudo-class:heading() CSS pseudo-classheight<hex-color>::highlight() CSS pseudo-element:host CSS pseudo-class:host() CSS pseudo-class:hover CSS pseudo-classhsl() CSS function<hue><hue-interpolation-method>hue-rotate() CSS functionhwb() CSS functionhyphenate-characterhyphenate-limit-charshyphenshypot() CSS function
I
ID selectors<ident>if() CSS function<image>image() CSS functionimage-orientationimage-renderingimage-resolutionimage-set() CSS function@import!important:in-range CSS pseudo-class:indeterminate CSS pseudo-classinheritinherits (@property)initialinitial-letterinitial-value (@property)inline-sizeinsetinset() CSS functioninset-blockinset-block-endinset-block-startinset-inlineinset-inline-endinset-inline-start<integer>interactivityinterest-delayinterest-delay-endinterest-delay-start:interest-source CSS pseudo-class:interest-target CSS pseudo-classinterpolate-size:invalid CSS pseudo-classinvert() CSS function:is() CSS pseudo-classisolation
J
K
L
lab() CSS function:lang() CSS pseudo-class:last-child CSS pseudo-class:last-of-type CSS pseudo-class@layerlayer() CSS functionlch() CSS functionleft:left CSS pseudo-class<length><length-percentage>letter-spacinglight-dark() CSS functionlighting-colorline-breakline-clampline-gap-override (@font-face)line-heightline-height-step<line-style>linear() CSS functionlinear-gradient() CSS function:link CSS pseudo-classlist-stylelist-style-imagelist-style-positionlist-style-type:local-link CSS pseudo-classlog() CSS function
M
marginmargin-blockmargin-block-endmargin-block-startmargin-bottommargin-inlinemargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmargin-trimmarker::marker CSS pseudo-elementmarker-endmarker-midmarker-startmaskmask-bordermask-border-modemask-border-outsetmask-border-repeatmask-border-slicemask-border-sourcemask-border-widthmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typemath-depthmath-shiftmath-stylematrix() CSS functionmatrix3d() CSS functionmax() CSS functionmax-block-sizemax-contentmax-heightmax-inline-sizemax-width@mediamin() CSS functionmin-block-sizemin-contentmin-heightmin-inline-sizemin-widthminmax() CSS functionmix-blend-modemod() CSS function:modal CSS pseudo-class:muted CSS pseudo-class
N
Namespace separator<named-color>@namespacenegative (@counter-style)& nesting selector:not() CSS pseudo-class:nth-child() CSS pseudo-class:nth-last-child() CSS pseudo-class:nth-last-of-type() CSS pseudo-class:nth-of-type() CSS pseudo-class<number>
O
object-fitobject-positionobject-view-boxoffsetoffset-anchoroffset-distanceoffset-pathoffset-positionoffset-rotateoklab() CSS functionoklch() CSS function:only-child CSS pseudo-class:only-of-type CSS pseudo-classopacityopacity() CSS function:open CSS pseudo-class:optional CSS pseudo-classorderorphans:out-of-range CSS pseudo-classoutlineoutline-coloroutline-offsetoutline-styleoutline-width<overflow>overflowoverflow-anchoroverflow-blockoverflow-clip-marginoverflow-inline<overflow-position>overflow-wrapoverflow-xoverflow-yoverlayoverride-colors (@font-palette-values)overscroll-behavioroverscroll-behavior-blockoverscroll-behavior-inlineoverscroll-behavior-xoverscroll-behavior-y
P
pad (@counter-style)paddingpadding-blockpadding-block-endpadding-block-startpadding-bottompadding-inlinepadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepagepage-orientation (@page)paint() CSS functionpaint-orderpalette-mix() CSS function::part() CSS pseudo-element:past CSS pseudo-classpath() CSS function:paused CSS pseudo-class<percentage>perspectiveperspective() CSS functionperspective-origin::picker() CSS pseudo-element::picker-icon CSS pseudo-element:picture-in-picture CSS pseudo-classplace-contentplace-itemsplace-self::placeholder CSS pseudo-element:placeholder-shown CSS pseudo-class:playing CSS pseudo-classpointer-eventspolygon() CSS function:popover-open CSS pseudo-class<position>positionposition-anchor<position-area>position-area@position-tryposition-tryposition-try-fallbacksposition-try-orderposition-visibilitypow() CSS functionprefix (@counter-style)print-color-adjustprogress() CSS function@property
Q
R
rradial-gradient() CSS functionrandom() CSS functionrange (@counter-style)<ratio>ray() CSS function:read-only CSS pseudo-class:read-write CSS pseudo-classreading-flowreading-orderrect() CSS function<relative-size>rem() CSS functionrepeat() CSS functionrepeating-conic-gradient() CSS functionrepeating-linear-gradient() CSS functionrepeating-radial-gradient() CSS function:required CSS pseudo-classresize<resolution>revertrevert-layerrgb() CSS functionright:right CSS pseudo-class:root CSS pseudo-classrotaterotate() CSS functionrotate3d() CSS functionrotateX() CSS functionrotateY() CSS functionrotateZ() CSS functionround() CSS functionrow-gapruby-alignruby-overhangruby-positionrule-listrxry
S
Selector listsaturate() CSS functionscalescale() CSS functionscale3d() CSS functionscaleX() CSS functionscaleY() CSS functionscaleZ() CSS function@scope:scope CSS pseudo-classscroll() CSS functionscroll-behavior::scroll-button() CSS pseudo-elementscroll-initial-targetscroll-marginscroll-margin-blockscroll-margin-block-endscroll-margin-block-startscroll-margin-bottomscroll-margin-inlinescroll-margin-inline-endscroll-margin-inline-startscroll-margin-leftscroll-margin-rightscroll-margin-top::scroll-marker CSS pseudo-elementscroll-marker-group::scroll-marker-group CSS pseudo-elementscroll-paddingscroll-padding-blockscroll-padding-block-endscroll-padding-block-startscroll-padding-bottomscroll-padding-inlinescroll-padding-inline-endscroll-padding-inline-startscroll-padding-leftscroll-padding-rightscroll-padding-topscroll-snap-alignscroll-snap-stopscroll-snap-typescroll-target-groupscroll-timelinescroll-timeline-axisscroll-timeline-namescrollbar-colorscrollbar-gutterscrollbar-width::search-text CSS pseudo-element:seeking CSS pseudo-class::selection CSS pseudo-element<self-position>sepia() CSS functionshape() CSS functionshape-image-thresholdshape-marginshape-outsideshape-renderingsibling-count() CSS functionsibling-index() CSS functionsign() CSS functionsin() CSS functionsize (@page)size-adjust (@font-face)skew() CSS functionskewX() CSS functionskewY() CSS function::slotted() CSS pseudo-elementspeak-asspeak-as (@counter-style)::spelling-error CSS pseudo-elementsqrt() CSS functionsrc (@font-face):stalled CSS pseudo-class@starting-style:state() CSS pseudo-classsteps() CSS functionstop-colorstop-opacity<string>strokestroke-dasharraystroke-dashoffsetstroke-linecapstroke-linejoinstroke-miterlimitstroke-opacitystroke-widthsuffix (@counter-style)superellipse() CSS function@supportssymbols (@counter-style)symbols() CSS functionsyntax (@property)system (@counter-style)<system-color>
T
Type selectorstab-sizetable-layouttan() CSS function:target CSS pseudo-class:target-after CSS pseudo-class:target-before CSS pseudo-class:target-current CSS pseudo-class::target-text CSS pseudo-elementtext-aligntext-align-lasttext-anchortext-autospacetext-boxtext-box-edgetext-box-trimtext-combine-uprighttext-decorationtext-decoration-colortext-decoration-insettext-decoration-linetext-decoration-skip-inktext-decoration-styletext-decoration-thickness<text-edge>text-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-size-adjusttext-spacing-trimtext-transformtext-underline-offsettext-underline-positiontext-wraptext-wrap-modetext-wrap-style<time><time-percentage><timeline-range-name>timeline-scopetoptouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-behaviortransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate() CSS functiontranslate3d() CSS functiontranslateX() CSS functiontranslateY() CSS functiontranslateZ() CSS functiontype() CSS function
U
Universal selectorsunicode-bidiunicode-range (@font-face)unset<url>url() CSS function:user-invalid CSS pseudo-classuser-select:user-valid CSS pseudo-class
V
:valid CSS pseudo-classvar() CSS functionvector-effectvertical-alignview() CSS functionview-timelineview-timeline-axisview-timeline-insetview-timeline-name@view-transition::view-transition CSS pseudo-elementview-transition-class::view-transition-group() CSS pseudo-element::view-transition-image-pair() CSS pseudo-elementview-transition-name::view-transition-new() CSS pseudo-element::view-transition-old() CSS pseudo-elementvisibility:visited CSS pseudo-class:volume-locked CSS pseudo-class
W
:where() CSS pseudo-classwhite-spacewhite-space-collapsewidowswidthwill-changeword-breakword-spacingwriting-mode
X
Y
Z
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 universel
* - Sélecteur de type
nomElement - Sélecteur de classe
.nomClasse - Sélecteur d'identifiant
#nomID - Sélecteur d'attribut
[attr=valeur]
Sélecteur de groupe
- Sélecteur de conjonction
A, B -
Indique que les éléments des sélecteurs
AetBdoivent ê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
Aet parBont le même parent et que celui sélectionné parBsuit immédiatement celui sélectionné parA. - Combinateur de voisin général
A ~ B -
Indique que les éléments sélectionnés par
Aet parBont le même parent et que celui sélectionné parBsuit celui sélectionné parA, mais pas nécessairement immédiatement après lui. - Combinateur d'enfant
A > B -
Indique que l'élément sélectionné par
Best un enfant direct de l'élément sélectionné parA. - Combinateur de descendant
A B -
Indique que l'élément sélectionné par
Best un descendant de l'élément sélectionné parA, mais n'en est pas nécessairement un enfant direct. - Combinateur de colonne
A || BExpérimental -
Indique que l'élément sélectionné par
Best situé dans la colonne de table indiquée parA. 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.