Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Tout en un

Cette page vient d'être traduite, mais elle a besoin d'un relecteur différent du traducteur. Pensez également à toujours vérifier le contenu avec sa toute dernière version en anglais.
Ce document présente rapidement la spécification CSS 2, pour les débutants et pour les confirmés. Les propriétés de style sont décrites avec une grammaire simplifiée.

Modèle de boîte

margin-top : length | percentage | auto;
margin-right : length | percentage | auto;
margin-bottom : length | percentage | auto;
margin-left : length | percentage | auto;
margin : margin-top margin-right margin-bottom margin-left;

padding-top : length | percentage;
padding-right : length | percentage;
padding-bottom : length | percentage;
padding-left : length | percentage;
padding : padding-top padding-right padding-bottom padding-left;

border-top-width : thin | medium | thick | length;
border-right-width : thin | medium | thick | length;
border-bottom-width : thin | medium | thick | length;
border-left-width : thin | medium | thick | length;
border-width : thin | medium | thick | length;

border-top-color : color | transparent;
border-right-color : color | transparent;
border-bottom-color : color | transparent;
border-left-color : color | transparent;
border-color : border-top-color border-right-color border-bottom-color border-left-color;

border-top-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-right-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-bottom-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-left-style : none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset;
border-style : border-top-style border-right-style border-bottom-style border-left-style;

border-top : border-width border-style border-color;
border-right : border-width border-style border-color;
border-bottom : border-width border-style border-color;
border-left : border-width border-style border-color;
border : border-width border-style border-color;

Modèle de formatage visuel

display : none | inline | block | inline-block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | tablefooter-group | table-row | table-column-group | table-column | table-cell | table-caption;

position : static | relative | absolute | fixed;

top : length | percentage | auto; right : length | percentage | auto; bottom : length | percentage | auto; left : length | percentage | auto;

float : left | right | none;
clear : none | left | right | both;

z-index : auto | integer;

direction : ltr | rtl;
unicode-bidi : normal | embed | bidi-override;

Détails de formatage visuel

width : length | percentage | auto; min-width : length | percentage; max-width : length | percentage | none;

height : length | percentage | auto; min-height : length | percentage; max-height : length | percentage | none;

line-height : normal | number | length | percentage;

vertical-align : baseline | sub | super | top | text-top | middle | bottom | text-bottom | percentage | length;

Effets visuels

overflow : visible | hidden | scroll | auto;

clip : rect(top,right,bottom,left) | auto;

visibility : visible | hidden | collapse;

Listes

list-style-type : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | none;
list-style-image : uri | none;
list-style-position : inside | outside;
list-style : list-style-type list-style-position list-style-image;

Couleurs et arrière-plans

color : color;

background-color : color | transparent;
background-image : uri | none;
background-repeat : repeat | repeat-x | repeat-y | no-repeat;
background-attachment : scroll | fixed;
background-position : [percentage | length | left | center | right] [percentage | length | top | center | bottom]  ;
background : background-color background-image background-repeat background-attachment background-position;

Polices

font-family: family-name | generic-family, family-name | generic-family, ... ;
font-style: normal | italic | oblique;
font-variant: normal | small-caps;
font-weight: normal | bold | bolder | lighter | 100 | ... | 900;
font-size: absolute-size | relative-size | length | percentage;
font: [font-style font-variant font-weight] font-size [/line-height] font-family;

Texte

text-indent : length | percentage;
text-align : left | right | center | justify ;
text-decoration : none | [ underline overline line-through blink ];
text-transform : capitalize | uppercase | lowercase | none;

letter-spacing : normal | length;
word-spacing : normal | length;
white-space : normal | pre | nowrap | pre-wrap | pre-line;

Tableaux

caption-side : top | bottom;

table-layout : auto | fixed;

vertical-align : baseline | top | bottom | middle;

border-collapse : collapse | separate;
border-spacing : length [length];

empty-cells : show | hide;

Interface utilisateur

cursor : [uri] [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | swresize | s-resize | w-resize| text | wait | help ], ...;

outline-color : color | invert;
outline-style : border-style;
outline-width : border-width;
outline : outline-color outline-style outline-width;

Unités

Unités de longueur relatives : em, ex, px

  • em : 1 em équivaut à font-size
  • ex : 1 ex équivaut à la x-height de la police
  • px : Pixel

Unités de longeur absolues : in, cm, mm, pt, pc

  • in : Pouce (inch)
  • cm : Centimètre
  • mm : Millimètre
  • pt : Point
  • pc : Pica

Unités de couleur : #336699, #fa5, rgb(127,255,0), rgb(40%,50%,60%)

  • #306090 : Rouge est à 30 hex, vert est à 60 hex, bleu est à 90 hex.
  • #fa5 : Rouge est à FF hex, vert est à AA hex, bleu est à 55 hex.
  • rgb(127,255,0) : Rouge est à 127, vert est à 255, bleu est à 0.
  • rgb(40%,50%,60%) : Rouge est à 40%, vert est à 50%, bleu est à 60%.

Sélecteurs

Sélecteur de type

h1 { text-decoration: underline; }

Sélecteur de classe

.myclass { text-decoration: underline; }

Sélecteur d'identifiant ID

#myid { text-decoration: underline; }

Sélecteur descendant

#mainpage h1 { text-decoration: underline; }

Sélecteur de pseudo-classe lien

a:link { color: blue; }
a:visited { color: purple; }

Sélecteur de pseudo-classe dynamique

a:hover { text-decoration: underline; }
a:active { color: #666666; }
a:focus { outline: 1px dashed red; }

Sélecteur de pseudo-classe typographique

p:first-line { font-weight: bold; }
p:first-letter { font-size: 2em; }

Sélecteur de pseudo-classe de contenu

p:before { content: "["; }
p:after { content: "]"; }

Sélecteur enfant

#title > p { font-weight: bold; }

Sélecteur de pseudo-classe :first-child

p:first-child { margin-top: 0; }

Sélecteur de parent adjacent

h1 + p { font-style: italic; }

Sélecteur d'attribut

option[selected] { color: #ff0000; }
input[type="password"] { color: #cccccc; }
a[rel~="next"] { background: #ffffff; }
*[lang|="en"] { color: red; }

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : Mgjbot, Fredchat
 Dernière mise à jour par : Mgjbot,