flex-start | flex-end | center | space-between |
space-around | stretch
Boîtes flexibles.
| bottom | clear | border | border- radius |
back ground |
box- shadow |
content | font |
| left | float | box- sizing |
clip | color | opacity | letter- spacing |
line- height |
| position | right | cursor | display | text- shadow |
text-align | text- decoration |
text- indent |
| z-index | top | height | margin | max- height |
text- overflow |
white- space |
word- break |
| break- after |
break- before |
max- width |
min- height |
min- width |
align- content |
align- items |
word- spacing |
| break- inside |
column- count |
outline | resize | overflow | align- self |
flex- direction |
animation |
| column- fill |
column- gap |
padding | visibility | width | flex- grow |
flex- shrink |
transform |
| column- rule |
column- span |
border- collapse |
border- spacing |
caption- side |
flex- basis |
flex- wrap |
transform -origin |
| column- width |
list-style | empty- cells |
table- layout |
vertical- align |
justify- content |
order | transition |
| Position | Boîte | Couleur | Texte | propriété raccourcis | |||||
| Animation | Flex box | Tableau | Multicolonne | propriété héritée |
flex-start | flex-end | center | space-between |
space-around | stretch
flex-start | flex-end | center | baseline |
stretch
auto | flex-start | flex-end | center | baseline | stretch
[ animation-name || animation-duration || animation-timing-function ||
animation-delay || animation-iteration-count ||
animation-direction || animation-fill-mode ]
<durée> [ , <durée> ]+
normal | reverse | alternate |
alternate-reverse [ , normal | reverse | alternate |
alternate-reverse ]+
<durée> [ , <durée> ]+
none | forwards | backwards | both [
, ... ]+
infinite | <nombre> [ , infinite |
<nombre> ]
none | <nom> [ , none |
<nom> ]+
running | paused [ , running | paused
]+
ease | linear | ease-in | ease-out |
ease-in-out | step-start | stepend | steps(nombre[ , start | end
]) | cubic-bezier(x1,y1,x2,y2) [ , ... ]+
[ background-image ||
background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-color ]+ | inherit
[ scroll | fixed | local ]+ | inherit
border-box | padding-box | content-box
<couleur> | transparent
| inherit
[ none | url()[ , url() ]* | inherit
padding-box | border-box |
content-box
[ [ <longueur> |
<pourcentage> ]{1,2} | [ [ top | center | bottom ] || [ left
| center | right ] ]+ | inherit
[ repeat | repeat-x | repeat-y |
no-repeat ]+ | inherit
auto | <longueur>{1,2}
| <pourcentage>{1,2} | contain | cover
[ border-width || border-style || <couleur>
] | inherit
[ border-top-width ||
border-style || <couleur> ] | inherit
<couleur> | inherit
none | url() <pourcentage> [
<stretch | repeat | round> ]
none | <longueur> |
<pourcentage>
none | <longueur> |
<pourcentage>
none | dot-dash | dot-dot-dash | wave
| hidden | solid | dotted | dashed | double | groove | ridge |
inset | outset | inherit
thin | medium | thick | <longueur>
| inherit
collapse | separate | inherit
display: table ou display:
inline-table.
<couleur>{1,4} | transparent
| inherit
none | url() <pourcentage>{1,4}
[ <stretch | repeat | round> ]
[ border-top-width ||
border-style || <couleur> ] | inherit
<couleur> | inherit
none | url() <pourcentage> [
<stretch | repeat | round> ]
none | dot-dash | dot-dot-dash | wave
| hidden | solid | dotted | dashed | double | groove | ridge |
inset | outset | inherit
thin | medium | thick | <longueur>
| inherit
[ none | <longueur> |
<pourcentage> ]{1,4}
[ border-top-width ||
border-style || <couleur> ] | inherit
<couleur> | inherit
none | url() <pourcentage> [
<stretch | repeat | round> ]
none | dot-dash | dot-dot-dash | wave
| hidden | solid | dotted | dashed | double | groove | ridge |
inset | outset | inherit
thin | medium | thick | <longueur>
| inherit
<longueur> <longueur>? | inherit
display: table ou display:
inline-table.
<style-bordure>{1,4}
<style-bordure> peut être :
none |dot-dash | dot-dot-dash | wave
| hidden | solid | dotted | dashed | double | groove | ridge |
inset | outset | inherit
[ border-top-width ||
border-style || <couleur> ] | inherit
<couleur> | inherit
none | url() <pourcentage> [
<stretch | repeat | round> ]
none | <longueur> |
<pourcentage>
none | <longueur> |
<pourcentage>
none | dot-dash | dot-dot-dash | wave
| hidden | solid | dotted | dashed | double | groove | ridge |
inset | outset | inherit
thin | medium | thick | <longueur>
| inherit
[ thin | medium | thick | <longueur>
]{1,4} | inherit
<longueur> |
<pourcentage> | auto | inherit
none | <ombre> [ ,<ombre>
]*
<ombre> est defini par :
inset? && [ <offset-x> <offset-y>
<flou>? <grandeur>? <couleur>?
]
content-box | padding-box |
border-box
auto | always | avoid | left | right | page | column |
avoid-page | avoid-colum
auto | always | avoid | left | right | page | column |
avoid-page | avoid-colum
auto | avoid | avoid-page | avoid-colum
top | bottom | left | right | inherit
display: table ou display:
inline-table.
none | left | right | both | inherit
rect(<top>, <right>, <bottom>,
<left>) | auto | inherit
<couleur> | inherit
<column-width> ||
<column-count>
<Nombre entier> | auto
balance | auto
<longueur> | normal
<column-rule-width>
|| <column-rule-style> ||
<column-rule-color>
<couleur>
<border-style>
<border-width>
none | all
auto | <longueur>
::before ou ::after
[ <chaîne> | url()| counter(compteur) | attr() |
open-quote | close-quote | no-open-quote | no-close-quote ]+ |
inherit
:before et :after.
[ <identifiant> <entier>? ]+ | none
| inherit
[ <identifiant> <entier>? ]+ | none
| inherit
[ [ url() [ <x> <y> ]?, ]* [ auto
| default | none | context-menu | help | pointer | progress | wait
| cell | crosshair | text | vertical-text | alias | copy | move |
no-drop | not-allowed | e-resize | n-resize | ne-resize |
nw-resize | s-resize | se-resize | sw-resize | w-resize |
ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize |
row-resize | all-scroll ] ] | inherit
ltr | rtl | inherit
show | hide | inherit
display: table-cell.
none | [ flex-grow flex-shrink? || flex-basis ]
<longueur> |
<pourcentage> | auto | initial
row | row-reverse | column | column-reverse
flex-direction || flex-wrap
<entier positif>
<entier positif>
nowrap | wrap | wrap-reverse
left | right | none | inherit
[ [ font-style || font-variant || font-weight
]? font-size [ /line-height
]?font-family ] | caption | icon | menu
| message-box | small-caption | status-bar | inherit
[ [ <nom police> | <famille-générique> ]
[, <nom police> | <famille-générique> ]*] | inherit
<famille-générique> peut être :
serif, sans-serif, cursive, fantasy, monospace
<longueur> |
<pourcentage> | xx-small | x-small | small | medium | large
| x-large | xx-large | smaller | larger | inherit
ultra-condensed | extra-condensed | condensed |
semi-condensed | normal | semi-expanded |
expanded | extra-expanded | ultra-expanded | inherit
normal | italic | oblique | inherit
normal | small-caps | inherit
normal | bold | bolder | lighter |
100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
flex-start | flex-end | center | space-between | space-around
<longueur> |
<pourcentage> | auto | inherit
normal | <longueur>
| inherit
normal | <nombre> | <longueur> | <pourcentage> | inherit
[ list-style-type || list-style-position || list-style-image ] | inherit
display: list-item
url() | none | inherit
display: list-item
inside | outside | inherit
display: list-item
disc | circle | square | decimal |
decimal-leading-zero | lowerroman | upper-roman | lowergreek |
lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew |
armenian | georgian | cjk-ideographic | hiragana | katakana |
hiragana-iroha | katakana-iroha | none | inherit
display: list-item
[ <longueur> |
<pourcentage> ]{1,4} | inherit
| auto
<longueur> |
<pourcentage> | inherit
| auto
<longueur> |
<pourcentage> | inherit
| auto
<longueur> |
<pourcentage> | inherit
| auto
<longueur> |
<pourcentage> | inherit
| auto
<longueur> |
<pourcentage> | none | inherit
<longueur> |
<pourcentage> | none | inherit
<longueur> |
<pourcentage> | inherit
<longueur> |
<pourcentage> | inherit
<nombre entre 0 et 1> | inherit
<entier>
[ outline-color || outline-style || outline-width ] | inherit
<couleur> | invert
| inherit
<longueur> | inherit
none | dot-dash | dot-dot-dash | wave
| hidden | solid | dotted | dashed | double | groove | ridge |
inset | outset | inherit
<longueur> | inherit
visible | hidden | scroll | auto |
inherit
<longueur>{1,4} |
inherit
<longueur> | inherit
<longueur> | inherit
<longueur> | inherit
<longueur> | inherit
static | relative | absolute | fixed
| inherit
[ <chaîne> <chaîne> ]+ | none | inherit
none | both | horizontal | vertical |
inherit
<longueur> |
<pourcentage> | auto | inherit
auto | fixed | inherit
display: table ou display:
inline-table.
left | right | center | justify |
inherit
none | [ underline || overline ||
line-through || blink ] | inherit
<longueur> |
<pourcentage> | inherit
clip | ellipsis | inherit
none | <ombre> [
,<ombre> ]*
<ombre> est defini par :
inset? && [ <offset-x> <offset-y>
<flou>? <grandeur>? <couleur>?
]
capitalize | uppercase | lowercase | none
| inherit
<longueur> |
<pourcentage> | auto | inherit
none | translateX() | translateY() |
translate() | scaleX() | scaleY() | scale() | rotate() | skewX() |
skewY() | skew()
[ <pourcentage> | <longueur>
| left | center | right ] [ <pourcentage> | <longueur>
| top | center | bottom ] ?
[ left | center | right ] [ top | center | bottom ]
[ transition-property
|| transition-duration || transition-timing-function
|| transition-delay [ , [ transition-property || transition-duration || transition-timing-function
|| transition-delay ] ]
<durée> [ , <durée> ]+
<durée> [ , <durée> ]+
none | all | <propriété> [ ,
<propriété> ]+
ease | linear | ease-in | ease-out |
ease-in-out | step-start | step-end | steps(nombre[ , start | end
]) | cubic-bezier(x1,y1,x2,y2) [ , ... ]+
baseline | sub | super | top |
text-top | middle | bottom | text-bottom | <pourcentage> |
<longueur> | inherit
display: table-cell.
visible | hidden | collapse | inherit
normal | pre | nowrap | inherit
<longueur> |
<pourcentage> | auto | inherit
normal | break-all | keep-all
normal | <longueur>
| inherit
auto | <nombre entier> |
inherit
| a b c | a est suivi de b qui est suivi de c |
| a | b | a ou b |
| a || b | a ou b ou les deux |
| [ a b ] | groupement |
| a? | a est optionnel |
| a* | a est répété 0 ou plusieurs fois |
| a+ | a est répété 1 ou plusieurs fois |