Skip to main content

Visit Mozilla.org

Précis CSS 2:Tout en un

Un article de MDC.

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.

Sommaire

[modifier] 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;

[modifier] 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;

[modifier] 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;

[modifier] Effets visuels

overflow : visible | hidden | scroll | auto;

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

visibility : visible | hidden | collapse;

[modifier] 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;

[modifier] 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;

[modifier] 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;

[modifier] 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;

[modifier] 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;

[modifier] 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;

[modifier] 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%.

[modifier] 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; }

Récupérée de « http://developer.mozilla.org/fr/docs/Pr%C3%A9cis_CSS_2:Tout_en_un »