Cette référence CSS illustre la base de la syntaxe permettant d'écrire une règle CSS, liste les propriétés CSS standard, les pseudo-classes, les pseudo-éléments, les règles @, les unités, les sélecteurs par ordre alphabétique et par type. Elle inclue également un bref aperçu des méthodes et objets du CSSOM.
Note : Les règles CSS sont uniquement basées sur du texte (ASCII) alors que la gestion des règles CSSOM s'effectue via des objets.
Pour les extensions propriétaires des différents moteurs, voir les pages : extensions CSS de Mozilla (pour Gecko, avec les propriétés préfixées par -moz) et extensions CSS de WebKit pour les propriétés spécifiques à WebKit.
Index des mots-clés en CSS
A
/* CSS3 syntax */ ::after { <var>style properties</var> } /* CSS2 syntax */ :after { <var>style properties</var> }:active { <var>style properties</var> }additive-symbols (@counter-style)align-contentalign-itemsalign-selfall<angle>animationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-function@annotation (@font-feature-values)annotation()attr()
/* CSS3 syntax */ ::before { <var>style properties</var> } /* CSS2 syntax */ :before { <var>style properties</var> }::backdrop { <var>style properties</var> }backface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-size<basic-shape><blend-mode>block-sizeblur()borderborder-block-endborder-block-end-colorborder-block-end-styleborder-block-end-widthborder-block-startborder-block-start-colorborder-block-start-styleborder-block-start-widthborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-inline-endborder-inline-end-colorborder-inline-end-styleborder-inline-end-widthborder-inline-startborder-inline-start-colorborder-inline-start-styleborder-inline-start-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidebrightness()
calc()caption-sidech@character-variant (@font-feature-values)character-variant()@charset:checked { <var>style properties</var> }circle()clearclipclip-pathcm<color>colorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcontrast()<counter>counter-incrementcounter-reset@counter-stylecross-fade()cubic-bezier()cursor<custom-ident>
:default { <var>style properties</var> }deg:dir( ltr | rtl ) { <var>style properties</var> }direction:disabled { <var>style properties</var> }displaydpcmdpidppxdrop-shadow()
element()ellipse()emempty-cells:empty { <var>style properties</var> }:enabled { <var>style properties</var> }ex
/* CSS3 syntax */ ::first-letter { <var>style properties</var> } /* CSS2 syntax */ :first-letter { <var>style properties</var> }/* CSS3 syntax */ ::first-line { <var>style properties</var> } /* CSS2 syntax */ :first-line { <var>style properties</var> }fallback (@counter-style)filter:first-child { <var>style properties</var> }:first-of-type { <var>style properties</var> }:first { <var>style properties</var> }flexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloat:focus { <var>style properties</var> }font@font-facefont-familyfont-family (@font-face)font-feature-settingsfont-feature-settings (@font-face)@font-feature-valuesfont-kerningfont-language-overridefont-sizefont-size-adjustfont-stretchfont-stretch (@font-face)font-stylefont-style (@font-face)font-synthesisfont-variantfont-variant (@font-face)font-variant-alternatesfont-variant-capsfont-variant-east-asianfont-variant-ligaturesfont-variant-numericfont-variant-positionfont-weightfont-weight (@font-face)format()format() (@font-face)<frequency>:fullscreen { <var>style properties</var> }
grad<gradient>grayscale()gridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rows
<image>image()image-orientationimage-renderingimage-resolutionimage-set()ime-mode@importin:in-range { <var>style properties</var> }:indeterminate { <var>style properties</var> }inheritinitialinline-sizeinset()<integer>:invalid { <var>style properties</var> }invert()isolation
:lang( <language-code> ) { <var>style properties</var> }:last-child { <var>style properties</var> }:last-of-type { <var>style properties</var> }left:left { <var>style properties</var> }<length>letter-spacingline-breakline-heightlinear-gradient():link { <var>style properties</var> }list-stylelist-style-imagelist-style-positionlist-style-typelocal()
marginmargin-block-endmargin-block-startmargin-bottommargin-inline-endmargin-inline-startmargin-leftmargin-rightmargin-topmaskmask-clipmask-compositemask-imagemask-modemask-originmask-positionmask-repeatmask-sizemask-typematrix()matrix3d()max-block-sizemax-heightmax-height (@viewport)max-inline-sizemax-widthmax-width (@viewport)max-zoom (@viewport)@mediamin-block-sizemin-heightmin-height (@viewport)min-inline-sizemin-widthmin-width (@viewport)min-zoom (@viewport)minmax()mix-blend-modemmms
@namespacenegative (@counter-style):not( <selector># ) { <var>style properties</var> }:nth-child( <an-plus-b> [ of <selector># ]? ) { <var>style properties</var> }:nth-last-child( <an-plus-b> [ of <selector># ]? ) { <var>style properties</var> }:nth-last-of-type( <an-plus-b> ) { <var>style properties</var> }:nth-of-type( <an-plus-b> ) { <var>style properties</var> }<number>
object-fitobject-positionoffset-block-endoffset-block-startoffset-inline-endoffset-inline-start:only-child { <var>style properties</var> }:only-of-type { <var>style properties</var> }opacityopacity():optional { <var>style properties</var> }orderorientation (@viewport)@ornaments (@font-feature-values)ornaments()orphans:out-of-range { <var>style properties</var> }outlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-wrapoverflow-xoverflow-y
pad (@counter-style)paddingpadding-block-endpadding-block-startpadding-bottompadding-inline-endpadding-inline-startpadding-leftpadding-rightpadding-top@pagepage-break-afterpage-break-beforepage-break-insidepc<percentage>perspectiveperspective()perspective-originpointer-eventspolygon()<position>positionprefix (@counter-style)ptpx
radradial-gradient()range (@counter-style)<ratio>:read-only { <var>style properties</var> }:read-write { <var>style properties</var> }rect()remrepeat()repeating-linear-gradient()repeating-radial-gradient():required { <var>style properties</var> }resize<resolution>revertrgb()rgba()right:right { <var>style properties</var> }:root { <var>style properties</var> }rotate()rotate3d()rotateX()rotateY()rotateZ()ruby-alignruby-mergeruby-position
ssaturate()scale()scale3d()scaleX()scaleY()scaleZ():scope { <var>style properties</var> }scroll-behaviorscroll-snap-coordinatescroll-snap-destinationscroll-snap-type::selection { <var>style properties</var> }sepia()<shape>shape-image-thresholdshape-marginshape-outsideskew()skewX()skewY()speak-as (@counter-style)src (@font-face)steps()<string>@styleset (@font-feature-values)styleset()@stylistic (@font-feature-values)stylistic()suffix (@counter-style)@supports@swash (@font-feature-values)swash()symbols (@counter-style)symbols()system (@counter-style)
tab-sizetable-layout:target { <var>style properties</var> }text-aligntext-align-lasttext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-position<time><timing-function>toptouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslate()translate3d()translateX()translateY()translateZ()turn
unicode-bidiunicode-range (@font-face):unresolved { <var>style properties</var> }unset<url>url()<user-ident>user-zoom (@viewport)
:valid { <var>style properties</var> }var()vertical-alignvh@viewportvisibility:visited { <var>style properties</var> }vmaxvminvw
Sélecteurs
- Les sélecteurs simples
- Les combinateurs
- Les pseudo-elements
- Les pseudo-classes standard
:active:any:checked:default:dir():disabled:empty:enabled:first:first-child:first-of-type:fullscreen:focus:hover:indeterminate:in-range:invalid:lang():last-child:last-of-type:left:link:not():nth-child():nth-last-child():nth-last-of-type():nth-of-type():only-child:only-of-type:optional:out-of-range:read-only:read-write:required:right:root:scope:target:valid:visited
La liste des sélecteurs établie par la spécification.
Tutoriels CSS3
Ces courtes pages illustrent certaines des technologies apparues avec CSS3 ou CSS2.1 mais qui étaient peu prises en charge :
- Utiliser les requêtes média (media queries) CSS
- Utiliser les compteurs CSS
- Utiliser les dégradés CSS
- Utiliser les transformations CSS
- Utiliser les animations CSS
- Utiliser les transitions CSS
- Utiliser plusieurs arrière-plans en CSS
- Utiliser les boîtes flexibles (flexbox) en CSS
- Utiliser une disposition multi-colonnes en CSS
Concepts relatifs à CSS
- La syntaxe CSS
- Les règles @
- Les commentaires
- La spécificité
- La valeur initiale
- L'héritage
- La valeur spécifiée
- La valeur calculée
- La valeur utilisée
- La valeur réelle
- La valeur résolue
- Le modèle de boîtes
- Les éléments remplacés
- La syntaxe de définition des valeurs
- Les propriétés raccourcies
- Maîtriser la fusion des marges
- Le modèle de formatage visuel
- Le mode de disposition
DOM-CSS / CSSOM
Les types d'objets principaux :
document . styleSheetsstyleSheets[x] . cssRulescssRules[x] . cssText(selector & style)cssRules[x] . selectorTextelem . styleelem . style . cssText(just style)elem . classNameelem . classList
Des méthodes importantes :
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight,
Oliviermoz,
challet,
teoli,
thenew,
Fredchat,
wakka27,
tregagnon,
FredB,
jackblack,
Jeremie,
openjck,
groovecoder,
the prisoner,
BenoitL,
Mgjbot,
Nathymig
Dernière mise à jour par :
SphinxKnight,