Glossaire Css

Glossaire des propriétés CSS
Par Torgar - Didier Mouronval
Date de publication : 14 août 2012
Dernière mise à jour : 6 décembre 2013
• Les informations de compatibilité sont données à titre d'information et sont soumises

à la version CSS prise en charge par le navigateur au moment de son déploiement.
(Source : http://csscreator.com/properties).
• Vous trouverez plus d'explications concernant la syntaxe des règles CSS sur cette
page.
Participez à l'enrichissement de ce glossaire.
Commentez
En complément sur Developpez.com

• La syntaxe d'une règle CSS
• Tous les cours et tutoriels CSS
• La FAQ CSS
• Le forum « Publications (X)HTML et CSS »
Glossaire des propriétés CSS par Torgar - Didier Mouronval
Utilisation des préfixes navigateurs............................................................................................................................. 5

I - Propriétés de mise en forme de texte....................................................................................................................6
I-A - Mise en forme de la police............................................................................................................................ 6
I-A-1 - Nom de police | font-family................................................................................................................... 6
I-A-2 - Police personnalisée | @font-face........................................................................................................ 7
I-A-3 - Taille du texte | font-size....................................................................................................................... 7
I-A-4 - Gras | font-weight.................................................................................................................................. 8
I-A-5 - Petites capitales | font-variant............................................................................................................... 8
I-A-6 - Petites capitales | font-variant............................................................................................................... 9
I-A-7 - Italique | font-style................................................................................................................................. 9
I-A-8 - La police tout-en-un | font................................................................................................................... 10
I-B - Mise en forme des paragraphes..................................................................................................................10
I-B-1 - Alignement horizontal | text-align........................................................................................................ 10
I-B-2 - Dernière ligne | text-align-last............................................................................................................. 11
I-B-3 - Alignement vertical | vertical-align.......................................................................................................12
I-B-4 - Décoration | text-decoration................................................................................................................ 13
I-B-5 - Capitales | text-transform.................................................................................................................... 13
I-B-6 - Alinéa | text-indent...............................................................................................................................14
I-B-7 - Hauteur de ligne | line-height.............................................................................................................. 14
I-B-8 - Césure | white-space...........................................................................................................................15
I-B-9 - Césure forcée | word-wrap..................................................................................................................16
I-B-10 - Ombrage | text-shadow..................................................................................................................... 16
I-C - Définition de la couleur de texte..................................................................................................................17
I-C-1 - Couleur de texte | color...................................................................................................................... 17
II - Propriétés de mise en forme des boîtes............................................................................................................. 18
II-A - Dimensions des boîtes................................................................................................................................18
II-A-1 - Largeur | width....................................................................................................................................18
II-A-2 - Hauteur | height..................................................................................................................................18
II-A-3 - Largeur minimale | min-width............................................................................................................. 19
II-A-4 - Largeur maximale | max-width........................................................................................................... 19
II-A-5 - Hauteur minimale | min-height........................................................................................................... 20
II-A-6 - Hauteur maximale | max-height......................................................................................................... 20
II-B - Marges extérieures..................................................................................................................................... 21
II-B-1 - Marge externe en haut | margin-top.................................................................................................. 21
II-B-2 - Marge externe à gauche | margin-left................................................................................................22
II-B-3 - Marge externe à droite | margin-right................................................................................................ 23
II-B-4 - Marge externe en bas | margin-bottom..............................................................................................23
II-B-5 - Marge externe | margin...................................................................................................................... 24
II-C - Espacements...............................................................................................................................................25
II-C-1 - Espacement en haut | padding-top....................................................................................................25
II-C-2 - Espacement à gauche | padding-left................................................................................................. 26
II-C-3 - Espacement à droite | padding-right.................................................................................................. 27
II-C-4 - Espacement en bas | padding-bottom............................................................................................... 28
II-C-5 - Espacement tout-en-un | padding...................................................................................................... 29
II-D - Bordures......................................................................................................................................................29
II-D-1 - Épaisseur de la bordure | border-width*............................................................................................ 30
II-D-2 - Couleur de la bordure | border-color*................................................................................................ 31
II-D-3 - Type de bordure | border-style*......................................................................................................... 31
II-D-4 - Bordure à gauche | border-left*......................................................................................................... 34
II-D-5 - Bordure en haut | border-top*............................................................................................................ 34
II-D-6 - Bordure à droite | border-right*.......................................................................................................... 35
II-D-7 - Bordure en bas | border-bottom*....................................................................................................... 35
II-D-8 - Bordure tout-en-un | border*.............................................................................................................. 36
II-D-9 - Bordure arrondie | border-radius........................................................................................................36
II-D-10 - Ombre | box-shadow........................................................................................................................37
II-E - Contours...................................................................................................................................................... 38
II-E-1 - Épaisseur du contour | outline-width.................................................................................................. 39
II-E-2 - Couleur du contour | outline-color......................................................................................................40
-2-
Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée
par les droits d'auteur. Copyright ® 2013 Torgar. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans
l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.
http://css.developpez.com/tutoriels/glossaire-proprietes-css/
II-E-3 - Type de contour | outline-style........................................................................................................... 40

II-E-4 - Décalage du contour | outline-offset.................................................................................................. 41
II-E-5 - Contour tout-en-un | outline............................................................................................................... 41
III - Propriétés de mise en forme d'arrière-plans...................................................................................................... 41
III-A - Couleur de fond......................................................................................................................................... 41
III-A-1 - Couleur de fond | background-color..................................................................................................41
III-B - Image de fond............................................................................................................................................42
III-B-1 - Image de fond | background-image.................................................................................................. 42
III-B-2 - Fond fixé | background-attachment...................................................................................................43
III-B-3 - Répétition du fond | background-repeat............................................................................................44
III-B-4 - Position du fond | background-position............................................................................................. 45
III-B-5 - Fond tout-en-un | background...........................................................................................................46
III-B-6 - Transparence | opacity...................................................................................................................... 46
IV - Propriétés des listes........................................................................................................................................... 47
IV-A - Type de liste | list-style-type......................................................................................................................47
IV-B - Position en retrait | list-style-position.........................................................................................................48
IV-C - Puce personnalisée | list-style-image........................................................................................................49
IV-D - Liste tout-en-un | list-style......................................................................................................................... 50
V - Propriétés de mise en forme des tableaux......................................................................................................... 50
V-A - Type de bordure | border-collapse............................................................................................................. 50
V-B - Cellules vides | empty-cells........................................................................................................................ 51
V-C - Position du titre | caption-side....................................................................................................................52
V-D - Affichage des cellules | table-layout...........................................................................................................53
V-E - Espacement des cellules | border-spacing.................................................................................................54
VI - Propriétés d'affichage et de positionnement...................................................................................................... 55
VI-A - Affichage.................................................................................................................................................... 55
VI-A-1 - Type d'élément | display................................................................................................................... 55
VI-A-2 - Affichage | visibility............................................................................................................................56
VI-A-3 - Afficher seulement une partie | clip.................................................................................................. 57
VI-A-4 - Limiter les dimensions | overflow......................................................................................................58
VI-B - Positionnement.......................................................................................................................................... 59
VI-B-1 - Flottant | float.................................................................................................................................... 59
VI-B-2 - Stopper un flottant | clear................................................................................................................. 60
VI-B-3 - Type de positionnement | position.................................................................................................... 61
VI-B-4 - Position par rapport aux coins | top bottom left right........................................................................62
VI-B-5 - Ordre d'affichage | z-index................................................................................................................62
VII - Propriétés de transformation et d'animation (CSS 3)........................................................................................63
VII-A - Propriétés de transformation.................................................................................................................... 64
VII-A-1 - Origine de la transformation | transform-origin................................................................................ 64
VII-A-2 - Perspective 3D | perspective........................................................................................................... 64
VII-A-3 - Origine de la perspective | perspective-origin................................................................................. 65
VII-A-4 - Fonctions de transformation | transform.......................................................................................... 66
Translation | translate()..............................................................................................................................66
Rotation | rotate().......................................................................................................................................67
Redimensionnement | scale().................................................................................................................... 68
Distorsion | skew()..................................................................................................................................... 68
Transformation matricielle | matrix().......................................................................................................... 69
VII-A-5 - Face arrière | backface-visibility.......................................................................................................69
VII-A-6 - Héritage 3D | transform-style........................................................................................................... 70
VII-A-7 - Exemple de transformation 3D........................................................................................................ 71
VII-B - Propriétés de transition.............................................................................................................................72
VII-B-1 - Nom de propriété(s) | transition-property.........................................................................................73
VII-B-2 - Durée de transition | transition-duration...........................................................................................73
VII-B-3 - Effet de transition | transition-timing-function...................................................................................74
VII-B-4 - Délai de démarrage | transition-delay..............................................................................................74
VII-B-5 - La transition tout-en-un | transition.................................................................................................. 75
VII-B-6 - Exemple récapitulatif........................................................................................................................ 75
VII-C - Propriétés d'animation.............................................................................................................................. 76
-3-
VII-C-1 - Étapes de l'animation | @keyframes............................................................................................... 77

VII-C-2 - Nom de l'animation | animation-name............................................................................................. 78
VII-C-3 - Durée de l'animation | animation-duration....................................................................................... 79
VII-C-4 - Effet de l'animation | animation-timing-function............................................................................... 79
VII-C-5 - Délai de l'animation | animation-delay............................................................................................. 80
VII-C-6 - Itérations de l'animation | animation-iteration-count........................................................................ 80
VII-C-7 - Sens de l'animation | animation-direction........................................................................................ 81
VII-C-8 - État de l'animation | animation-play-state........................................................................................81
VII-C-9 - Style de l'élément hors animation | animation-fill-mode.................................................................. 82
VII-C-10 - L'animation tout-en-un | animation................................................................................................ 82
VII-C-11 - Exemple récapitulatif...................................................................................................................... 83
-4-
Utilisation des préfixes navigateurs
CSS 3 apporte de nombreuses nouvelles fonctionnalités qui sont implémentées au fur et à

mesure par les navigateurs.
L'implémentation d'une nouvelle fonctionnalité se fait en plusieurs étapes. La dernière

d'entre elles est la mise en place sur la version stable du navigateur pour pouvoir tester la
fonctionnalité dans un contexte réel et affiner le cas échéant certains détails. Cela signifie
donc que la fonctionnalité est implémentée, mais pas encore en version finale, c'est-à-dire
que son comportement est encore susceptible d'évoluer pour corriger d'éventuels bogues ou
mieux coller aux spécifications.
Il faut donc que la fonctionnalité puisse être testée sans être pour autant disponible dans sa
version définitive. Pour pouvoir faire la distinction entre les propriétés CSS stables et celles
en cours de finalisation, le W3C a normalisé lasyntaxe des préfixes vendeurs (vendor-
specific extensions).
La règle est simple : chaque moteur de rendu peut implémenter des propriétés en les préfixant
avec leur propre identifiant entouré de tirets.
Par exemple, si le moteur XYZ souhaite expérimenter la propriété prop, il pourra le faire sous
le nom -xyz-prop.
Les principaux préfixes utilisés sont :
• -moz- (Firefox et dérivés) ;

• -webkit- (Chrome, Safari, Opera 15+ et dérivés) ;
• -ms- (Internet Explorer) ;
• -o- (Opera jusqu'à la version 12).
Même s'il est déconseillé d'utiliser les propriétés préfixées sur une page Web en production
(puisque leur implémentation est expérimentale), il est malgré tout courant de le faire,
notamment parce qu'à ce stade de développement, l'implémentation est considérée comme
suffisamment stable pour fonctionner correctement dans les cas généraux et n'être
potentiellement boguée que dans des cas limites.
Pour mettre en place ces propriétés dans votre page, vous devez lister tous les préfixes
possibles (par exemple pour border-radius) :
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
Enfin, il faut penser au futur ! N'oubliez donc pas de préciser la propriété définitive. Il est
important de mettre celle-ci en fin de liste afin d'écraser les versions expérimentales si la
version définitive est disponible :
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
-5-
Les propriétés de style avec préfixe sont utilisables en JavaScript. Si la notation CSS des
préfixes et la notation JavaScript des propriétés standards sont normalisées (en utilisant la
notation camelCase : voir Comment passer d'une propriété de style CSS à celle qui
correspond en JavaScript ?), la gestion du préfixe dans la notation JavaScript ne l'est
pas. Certains navigateurs conservent la notation camelCase (ou lowerCamelCase), d'autres
utilisent une notation dite UpperCamelCase (avec majuscule initiale) pour différencier les
propriétés préfixées de celles qui ne le sont pas.
Par exemple, pour récupérer ou affecter la valeur de la propriété border-radius pour l'élément
dont l'identifiant est element, on procèdera comme suit :
var $element = document.getElementById('element');

if($element.style.borderRadius){
// border-radius
}
else if($element.style.MozBorderRadius){
// -moz-border-radius
}
else if($element.style.webkitBorderRadius){
// -webkit-border-radius
}
else if($element.style.msBorderRadius){ // IE accepte aussi MsBorderRadius
// -ms-border-radius
}
else if($element.style.OBorderRadius){
// -o-border-radius
}
else{
// il faut peut-être changer de navigateur ?
}
Complément d'information : Liste des propriétés CSS préfixées.
I - Propriétés de mise en forme de texte
I-A - Mise en forme de la police
I-A-1 - Nom de police | font-family
font-family : permet d'indiquer les noms de polices par ordre de préférence.
Syntaxe : [[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]* ] | inherit
Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Version CSS : 1
font-family: "Arial Black", Arial, Verdana, serif;
Le contenu dynamique ne peut pas être affiché dans ce support, veuillez consulter la page en ligne pour le visualiser.
Voir la source :
<style type="text/css">
.font-fam {
-6-
Voir la source :
font-family: 'Arial Black', Arial, Verdana, serif;
}
</style>
<p class="font-fam">Lorem ipsum dolore sit amet, consectetur adipisicing elit</p>
Explications :
si le visiteur possède la police Arial Black, elle sera utilisée, sinon Arial, sinon Verdana ou
enfin serif ;
il est possible d'utiliser des polices personnalisées en combinaison avec @font-face ;
pour les polices composées de deux mots, il faut les entourer de guillemets.
I-A-2 - Police personnalisée | @font-face
@font-face : permet de déclarer une nouvelle police, qui sera téléchargée sur l'ordinateur de vos visiteurs.
Syntaxe : <font-description>+
Compatibilité : IE 9+, FF 3.5+, Chrome 0.2+, Safari 3.1+, Opera N/C
Version CSS : 2.1
Complément d'information : Comment utiliser une police personnalisée sur un site Web ?
@font-face {
font-family: 'ma_police';
src: url('ma_police.eot') format('eot'),
url('ma_police.woff') format('woff'),
url('ma_police.ttf') format('truetype'),
url('ma_police.svg') format('svg');
}
Explications :
il est important ici de voir qu'une police est définie par plusieurs formats étant donné que tous
les navigateurs ne prennent pas en charge tous les formats.
I-A-3 - Taille du texte | font-size
font-size : permet de définir la taille de la police de caractères. Elle peut être exprimée avec plusieurs unités.
Syntaxe : <absolute-size> | <relative-size> | <length> | <percentage> | inherit
Version CSS : 1
-7-
font-size: 12px;
font-size: 100%; /* normal */
font-size: 1.2em; /* 1.0 : normal */
font-size: 1ex;
font-size: xx-small; /* très très petit */
font-size: x-small; /* très petit */
font-size: small; /* petit */
font-size: medium; /* moyen */
font-size: large; /* grand */
font-size: x-large; /* très grand */
font-size: xx-large; /* très très grand */
Voir la source
<p style="font-size: 12px;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 100%;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 1.2em;">Lorem ipsum dolore sit amet</p>
<p style="font-size: 1ex;">Lorem ipsum dolore sit amet</p>
<p style="font-size: xx-small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: x-small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: small;">Lorem ipsum dolore sit amet</p>
<p style="font-size: medium;">Lorem ipsum dolore sit amet</p>
<p style="font-size: large;">Lorem ipsum dolore sit amet</p>
<p style="font-size: x-large;">Lorem ipsum dolore sit amet</p>
<p style="font-size: xx-large">Lorem ipsum dolore sit amet</p>
I-A-4 - Gras | font-weight
font-weight : permet de définir l'épaisseur de la police de caractères.
Syntaxe : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
Version CSS : 1
font-weight: bold; /* gras */

font-weight: bolder; /* plus gras */
font-weight: lighter; /* plus fin */
font-weight: normal; /* pas gras (par défaut) */
Voir la source
<p style="font-weight: bold;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: bolder;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: lighter;">Lorem ipsum dolore sit amet</p>
<p style="font-weight: normal;">Lorem ipsum dolore sit amet</p>
I-A-5 - Petites capitales | font-variant
font-variant : met le texte en petites capitales.
Syntaxe : normal | small-caps | inherit
-8-
Version CSS : 1
font-variant: small-caps; /* petites capitales */

font-variant: normal; /* normal (par défaut) */
Voir la source
<p style="font-variant: small-caps;">Lorem ipsum dolore sit amet</p>
<p>LOREM IPSUM DOLORE SIT AMET</p>
I-A-6 - Petites capitales | font-variant
font-variant : met le texte en petites capitales.
Syntaxe : normal | small-caps | inherit
Version CSS : 1
font-variant: small-caps; /* petites capitales */

font-variant: normal; /* normal (par défaut) */
Voir la source
<p style="font-variant: small-caps;">Lorem ipsum dolore sit amet</p>
<p>LOREM IPSUM DOLORE SIT AMET</p>
I-A-7 - Italique | font-style
font-style : permet de mettre un texte en italique.
Syntaxe : normal | italic | oblique | inherit
Version CSS : 1
font-style: italic; /* italique (forcément !) */

font-style: oblique; /* autre façon de mettre en italique */
font-style: normal; /* normal (par défaut) */
Voir la source
<p style="font-style: italic;">Lorem ipsum dolore sit amet</p>
<p style="font-style: oblique;">Lorem ipsum dolore sit amet</p>
<p style="font-style: normal;">Lorem ipsum dolore sit amet</p>
-9-
I-A-8 - La police tout-en-un | font
font : regroupe les propriétés de mise en forme de la police. À moins de l'utilisation d'une des valeurs "caption | icon
| menu | message-box | small-caption | status-bar | inherit", font-size et font-family sont tous les deux obligatoires
et dans cet ordre (avec éventuellement le line-height entre les deux). 'font-style' || 'font-variant' || 'font-weight' sont
optionnels, dans n'importe quel ordre, mais avant le font-size.
Syntaxe : [ [ 'font-style' || 'font-variant' || 'font-weight' ]? 'font-size' [ / 'line-height' ]? 'font-family' ] | caption | icon | menu
| message-box | small-caption | status-bar | inherit
Version CSS : 1
font: bold 16px Arial;
Voir la source
<p style="font: 14pt bolder Arial;">Lorem ipsum dolore sit amet</p>
I-B - Mise en forme des paragraphes
I-B-1 - Alignement horizontal | text-align
text-align : aligne un texte horizontalement.
Syntaxe : left | right | center | justify | inherit
Version CSS : 1
text-align: left; /* à gauche (par défaut) */

text-align: center; /* centré */
text-align: right; /* à droite */
text-align: justify; /* texte justifié */
.t-align-left {
text-align: left;
background-color: #93caff;
border: 2px solid #696969;
margin-bottom: 10px;
width: 50%;
}
.t-align-center {
text-align: center;
- 10 -
width: 50%;
}
.t-align-right {
text-align: right;
width: 50%;
}
.t-align-justify {
text-align: justify;
width: 50%;
}
</style>
<p class="t-align-left">Lorem ipsum dolore sit amet</p>
<p class="t-align-center">Lorem ipsum dolore sit amet</p>
<p class="t-align-right">Lorem ipsum dolore sit amet</p>
<p class="t-align-justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
I-B-2 - Dernière ligne | text-align-last
Cette propriété peut nécessiter l'utilisation des préfixes vendeurs.
text-align-last : aligne la dernière ligne d'un texte horizontalement.
Syntaxe : auto | start | end | left | right | center | justify
Compatibilité : IE 5.5+, FF 12.0+, Chrome, Safari, Opera
Version CSS : 3
Explications.
auto : la ligne adopte le même alignement que pour text-align, sauf si text-align vaut justify, dans ce cas, la dernière
ligne sera alignée à gauche.
start : la dernière ligne sera alignée en début de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
end : la dernière ligne sera alignée en fin de ligne, le côté dépendant du sens de lecture (ltr ou rtl).
left : la dernière ligne sera alignée à gauche.
right : la dernière ligne sera alignée à droite.
center : la dernière ligne sera centrée.
justify : la dernière ligne prendra la largeur de l'élément.
Notes.
La notion de dernière ligne correspond à la dernière ligne affichée avant tout saut de ligne forcé (fin de balise de type
bloc ou avant une balise entrainant un saut de ligne comme <br />.
Internet Explorer ne supporte pas les valeurs start et end.
Exemples :
- 11 -
text-align-last: auto; /* par défaut */

text-align-last: center; /* centré */
text-align-last: end; /* selon le sens de lecture */
text-align-last: justify; /* justifié */
Voir la source
.t-align-last-left {
text-align: right;
text-align-last: left;
width: 50%;
}
.t-align-last-center {
text-align: left;
text-align-last: center;
width: 50%;
}
.t-align-last-right {
text-align: left;
text-align-last: right;
width: 50%;
}
</style>
<p class="t-align-last-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
<p class="t-align-last-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
<p class="t-align-last-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
I-B-3 - Alignement vertical | vertical-align
vertical-align : la propriété vertical-align ne fonctionne que pour les cellules (<td></td>) ou les éléments de type
inline-block.
Syntaxe : baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit
- 12 -
Version CSS : 1
vertical-align: top; /* en haut */

vertical-align: middle; /* au milieu */
vertical-align: bottom; /* en bas */
Voir source
<table>
<tr style="height: 50px; background-color: #93caff;">
<td style="vertical-align: top;">Lorem ipsum dolore sit amet</td>
<td style="vertical-align: middle;">Lorem ipsum dolore sit amet</td>
<td style="vertical-align: bottom;">Lorem ipsum dolore sit amet</td>
</tr>
</table>
I-B-4 - Décoration | text-decoration
text-decoration : permet d'appliquer une décoration sur un texte (souligné, barré, etc.).
Syntaxe : none | [ underline || overline || line-through ] | inherit
Version CSS : 1
text-decoration: underline; /* souligné */

text-decoration: overline; /* ligne au-dessus */
text-decoration: line-through; /* barré */
text-decoration: none; /* normal (par défaut) */
Voir la source
<p style="text-decoration: underline;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: overline;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: line-through;">Lorem ipsum dolore sit amet</p>
<p style="text-decoration: none;">Lorem ipsum dolore sit amet</p>
I-B-5 - Capitales | text-transform
text-transform : permet de changer la casse du texte.
Syntaxe : capitalize | uppercase | lowercase | none | inherit
Version CSS : 1
text-transform: uppercase; /* tout mettre en majuscules */

text-transform: lowercase; /* tout mettre en minuscules */
text-transform: capitalize; /* début des mots en majuscules */
text-transform: none; /* normal (par défaut) */
- 13 -
Voir la source
<p style="text-transform: uppercase;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: lowercase;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: capitalize;">Lorem ipsum dolore sit amet</p>
<p style="text-transform: none;">Lorem ipsum dolore sit amet</p>
I-B-6 - Alinéa | text-indent
text-indent : permet de définir l'alinéa d'un texte.
Syntaxe : <length> | <percentage> | inherit
Version CSS : 1
text-indent : 20px;
Voir la source
<p style="text-indent: 20px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident,
I-B-7 - Hauteur de ligne | line-height
line-height : permet de définir l'interligne entre deux phrases. Les valeurs nulles ne sont pas autorisées.
Syntaxe : normal | <number> | <length> | <percentage> | inherit
Version CSS : 1
line-height: 30px;
line-height: 20%;
Voir la source
.line-height1 {
}
- 14 -
Voir la source
.line-height2 {
line-height: 30px;
}
.line-height3 {
line-height: 200%;
}
</style>
<div style="width: 40%;">
<p class="line-height1">Ici le line-height est à la valeur par défaut.<br />Ce qui explique
que l'interligne soit normal.</p>
<hr />
<p class="line-height2">Là on le définit à 30px<br />On se rend compte de l'écart plus
important entre les deux phrases.</p>
<hr />
<p class="line-height3">Pareil ici, le line-height est à 200%.<br />Pour un interligne
"normal" mettre 100%.</p>
</div>
I-B-8 - Césure | white-space
white-space : permet de définir comment sont gérés les espaces dans un texte.
Syntaxe : normal | pre | nowrap | pre-wrap | pre-line | inherit
Compatibilité : IE 5.5+, FF 1.0+, Chrome 1.0+, Safari 1.0+, Opera 9.5+
Version CSS : 1
Explications des valeurs :
• normal : passage à la ligne automatique (par défaut) ;

• nowrap : pas de passage à la ligne automatique, à moins qu'une balise HTML comme <br /> ne soit
présente ;
• pre : le passage à la ligne se fait tel que le texte a été saisi dans le code source (comme la balise <pre>).
Voir la source
.white-space1 {
white-space: normal;
width: 50%;
}
.white-space2 {
white-space: nowrap;
width: 50%;
}
.white-space3 {
white-space: pre;
width: 50%;
}
- 15 -
Voir la source
</style>
<p class="white-space1">
Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.
Lorem ipsum dolore sit amet.
</p>
</p>
</p>
I-B-9 - Césure forcée | word-wrap
word-wrap : permet de couper le texte si celui-ci déborde du conteneur.
Syntaxe : [ normal | break-word ]
Compatibilité : IE 5.5+, FF 3.5+, Chrome 1.0+, Safari 1.0+, Opera 10.5+
Version CSS : 3
word-wrap: normal;
word-wrap: break-word;
Voir la source
.word-wrap1 {
word-wrap: normal;
width:150px;
background-color: yellow;
}
.word-wrap2 {
word-wrap: break-word;
width: 150px;
}
</style>
<p class="word-wrap1">Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsitsit amet,
consectetur adipisicing elit</p>
<p class="word-wrap2">Lorem ipsum dolor sitsitsitsitsitsitsitsitsitsitsitsitsit amet, consectetur
adipisicing elit</p>
I-B-10 - Ombrage | text-shadow
text-shadow : permet d'ajouter une ombre sur un texte ou un élément de type bloc.
Syntaxe : none | [, ]* [ <couleur>? <longueur> <longueur> <longueur>? | <longueur> <longueur> <longueur>?

<couleur>? ] | inherit (source: MDN)
Compatibilité : IE 10+, FF 3.5+, Chrome 4+, Safari 4+, Opera 9.5+, Opera Mobile 10+
Version CSS : 3
- 16 -
text-shadow: 2px 2px 4px red;
Voir la source
.shadow-red {
text-shadow: 4px 4px 4px red;
}
.shadow-green {
text-shadow: -4px -4px 4px green;
}
.shadow-black {
text-shadow: 4px 4px 0px black;
}
</style>
<p style="font-size: 1.2em;"><span class="shadow-red">Lorem ipsum</span> <span class="shadow-
green">dolore sit amet</span>, <span class="shadow-black">consectetur adipisicing elit</span></p>
Explications des valeurs :
• décalage en pixels à droite ;

• décalage en pixels en bas ;
• force du dégradé ;
• couleur.
Le cas IE : comme (toujours ?) Internet Explorer fait bande à part, il faut utiliser la propriété filter. Voici un exemple :
filter: progid:DXImageTransform.Microsoft.Shadow(color='#ff0000', Direction=135, Strength=4);

zoom: 1;
I-C - Définition de la couleur de texte
I-C-1 - Couleur de texte | color
color : nous disposons de six types de valeur pour indiquer la couleur du texte d'un élément :
Syntaxe : <color> | inherit
Compatibilité : IE 5+, FF 1+, Chrome 0.2+, Safari 1.0+, Opera 6+
Version CSS : 1 (CSS 3 pour rgba, hsl et hsla)
• la couleur en anglais : red, black, white, blue, green, etc. ;

• la couleur en hexadécimal : #C0C0C0 ;
• la couleur en Red Green Blue (RGB ou RVB en français) : rgb(0, 255, 0) ;
• la couleur en RGB avec transparence : rgba(0, 255, 0, 0.5) ;
• la couleur en Hue Saturation Luminosity (HSL ou teinte, saturation, luminosité) : hsl(250, 100%, 50%) ;
• la couleur en HSL avec transparence : hsla(250, 100%, 50%, 0.5).
Complément d'information : Les couleurs en CSS 3.
- 17 -
Voir la source
<p style="color: red;">Lorem ipsum dolore sit amet</p>
<p style="color: #C0C0C0;">Lorem ipsum dolore sit amet</p>
<p style="color: rgb(0, 255, 0);">Lorem ipsum dolore sit amet</p>
<p style="color: rgba(0, 255, 0, 0.6);">Lorem ipsum dolore sit amet</p>
<p style="color: hsl(250, 100%, 50%);">Lorem ipsum dolore sit amet</p>
<p style="color: hsla(250, 100%, 50%, 0.6);">Lorem ipsum dolore sit amet</p>
II - Propriétés de mise en forme des boîtes
II-A - Dimensions des boîtes
II-A-1 - Largeur | width
width : permet de définir la largeur d'un élément. La valeur peut être en px, %, ou encore auto, la valeur par défaut.
Cette propriété ne tient pas compte des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | auto | inherit
Version CSS : 1
width: 200px;
Voir la source
.width {
width: 200px;
}
</style>
<div class="width">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
II-A-2 - Hauteur | height
height : idem que pour la largeur mais pour la hauteur. Cette propriété ne tient pas compte des marges, espacements
et bordures.
Version CSS : 1
height: 50px;
- 18 -
Voir la source
.height {
width: 200px;
height: 50px;
}
</style>
<div class="height">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
II-A-3 - Largeur minimale | min-width
min-width : permet de définir la largeur minimale sur un élément de type bloc. Cette propriété ne tient pas compte
des marges, espacements et bordures.
Note : la valeur inherit n'est supportée par IE 8 que si un doctype est déclaré. IE 9 supporte inherit.
Version CSS : 2.1
min-width: 500px;
Voir la source
.min-w {
min-width: 500px;
width: 10%;
}
</style>
<p class="min-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>
II-A-4 - Largeur maximale | max-width
max-width : permet de fixer la largeur maximale d'un élément de type bloc. Cette propriété ne tient pas compte des
marges, espacements et bordures.
Syntaxe : <length> | <percentage> | none | inherit
Version CSS : 2.1
max-width: 50px;
Voir la source
- 19 -
Voir la source
.max-w {
max-width: 50px;
}
</style>
<p class="max-w">Lorem ipsum dolore sit amet, consectetur adipisicing elit.</p>
II-A-5 - Hauteur minimale | min-height
min-height : permet de fixer la hauteur minimale d'un élément de type bloc. Cette propriété ne tient pas compte des
marges, espacements et bordures.
Version CSS : 2.1
min-height: 200px;
Voir la source
.min-h {
min-height: 200px;
width: 50%;
}
</style>
<p class="min-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
II-A-6 - Hauteur maximale | max-height
max-height : permet de fixer la hauteur maximale d'un élément de type bloc. Cette propriété ne tient pas compte
des marges, espacements et bordures.
Syntaxe : <length> | <percentage> | none | inherit
Version CSS : 2.1
max-height: 20px;
Voir la source
.max-h {
max-height: 20px;
- 20 -
Voir la source
width: 50%;
}
</style>
<p class="max-h">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore
ut aliquip ex ea commodo consequat</p>
II-B - Marges extérieures
II-B-1 - Marge externe en haut | margin-top
margin-top : permet de définir la marge externe en haut d'un élément. Plusieurs unités sont possibles pour cette
propriété (px, %, em). Les valeurs négatives sont autorisées.
Syntaxe : <margin-width> | inherit
Version CSS : 2.1
margin-top: 20px;
Voir la source
.m-top1 {
border: 1px solid black;
background-color: red;
width: 800px;
}
.m-top2 {
}
.m-top3 {
margin-top: 20px; background-color: yellow;
}
</style>
<div class="m-top1">
<div class="m-top2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit
sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
<div class="m-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
nisi
velit
- 21 -
Voir la source
</div>
II-B-2 - Marge externe à gauche | margin-left
margin-left : permet de définir la marge externe à gauche d'un élément. Plusieurs unités sont possibles pour cette
Version CSS : 1
margin-left: 20px;
Voir la source
.m-left1 {
width: 420px;
}
.m-left2 {
width: 200px;
float: left;
}
.m-left3 {
width: 200px;
float: left;
margin-left: 20px;
}
</style>
<div class="m-left1">
<div class="m-left2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
nisi
velit
<div class="m-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
nisi
velit
<div class="clear"></div>
</div>
- 22 -
II-B-3 - Marge externe à droite | margin-right
margin-right : permet de définir la marge externe à droite d'un élément. Plusieurs unités sont possibles pour cette
Version CSS : 1
margin-right: 20px;
Voir la source
.m-right1 {
width: 420px;
}
.m-right2 {
width: 200px;
float: left;
margin-right: 20px;
}
.m-right3 {
width: 200px;
float: left;
}
</style>
<div class="m-right1">
<div class="m-right2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
nisi
velit
<div class="m-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
nisi
velit
<div class="clear"></div>
</div>
II-B-4 - Marge externe en bas | margin-bottom
margin-bottom : permet de définir la marge externe en bas d'un élément. Plusieurs unités sont possibles pour cette
- 23 -
Version CSS : 1
Voir la source
.m-bottom1 {
width: 800px;
}
.m-bottom2 {
}
.m-bottom3 {
}
</style>
<div class="m-bottom1">
<div class="m-bottom2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
nisi
velit
<div class="m-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</div>
</div>
II-B-5 - Marge externe | margin
margin : permet de définir en une seule fois les marges externes de tous les côtés d'un élément. Les valeurs négatives
sont autorisées.
Syntaxe : <margin-width>{1,4} | inherit
Version CSS : 1
Indiquez de une à quatre valeurs à la suite. Selon le nombre de valeurs que vous mettez, la signification change :
• une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;
- 24 -
• deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la
droite ;
• trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la
troisième à la marge du bas ;
• quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
margin: 20px 5px; /* 20px de marge en haut et en bas, 5px à gauche et à droite */
Voir la source
.margin1 {
width: 800px;
}
.margin2 {
}
.margin3 {
margin: 20px 5px;
}
.margin4 {
}
</style>
<div class="margin1">
<div class="margin2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
nisi
velit
nisi
velit
nisi
velit
</div>
II-C - Espacements
II-C-1 - Espacement en haut | padding-top
padding-top : permet de définir l'espacement interne en haut d'un élément. Plusieurs unités sont possibles pour
cette propriété (px, %, em). Les valeurs négatives sont autorisées.
- 25 -
Syntaxe : <padding-width> | inherit
Version CSS : 1
padding-top: 20px;
Voir la source
.p-top1 {
width: 800px;
}
.p-top2 {
padding-top: 20px;
}
.p-top3 {
}
</style>
<div class="p-top1">
<div class="p-top2">
<div style="p-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi
velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident,
</div>
</div>
II-C-2 - Espacement à gauche | padding-left
padding-left : permet de définir l'espacement interne à gauche d'un élément. Plusieurs unités sont possibles pour
Version CSS : 1
padding-left: 20px;
Voir la source
- 26 -
Voir la source
.p-left1 {
width: 800px;
}
.p-left2 {
padding-left: 20px;
}
.p-left3 {
}
</style>
<div class="p-left1">
<div class="p-left2">
<div class="p-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
laboris nisi
velit
proident,
</div>
</div>
II-C-3 - Espacement à droite | padding-right
padding-right : permet de définir l'espacement interne à droite d'un élément. Plusieurs unités sont possibles pour
Version CSS : 1
padding-right: 20px;
Voir la source
.p-right1 {
width: 800px;
}
.p-right2 {
padding-right: 20px;
}
.p-right3 {
}
</style>
<div class="p-right1">
- 27 -
Voir la source
<div class="p-right2">
<div class="p-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
laboris nisi
velit
proident,
</div>
</div>
II-C-4 - Espacement en bas | padding-bottom
padding-bottom : permet de définir l'espacement interne en bas d'un élément. Plusieurs unités sont possibles pour
Version CSS : 1
padding-bottom: 20px;
Voir la source
.p-bottom1 {
width: 800px;
}
.p-bottom2 {
padding-bottom: 20px;
}
.p-bottom3 {
}
</style>
<div class="p-bottom1">
<div class="p-bottom2">
<div class="p-bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
laboris nisi
velit
proident,
</div>
</div>
- 28 -
II-C-5 - Espacement tout-en-un | padding
padding : permet de définir en une seule fois l'espacement interne de tous les côtés d'un élément. Les valeurs
négatives sont autorisées.
Syntaxe : <padding-width>{1,4} | inherit
Version CSS : 1
• une valeur : ce sera la marge pour le haut, le bas, la gauche et la droite ;

• deux valeurs : la première correspond à la marge pour le haut et le bas, la seconde pour la gauche et la
droite ;
• trois valeurs : la première correspond à la marge du haut, la seconde aux marges à gauche et à droite, la
troisième à la marge du bas ;
• quatre valeurs : respectivement la marge du haut, de la droite, du bas, de la gauche.
padding: 20px 5px 10px; /* 20px de marge en haut, 10px en bas, 5px à gauche et à droite */
Voir la source
.bottom1 {
width: 800px;
}
.bottom2 {
padding: 20px 5px 10px;
}
.bottom3 {
}
</style>
<div class="bottom1">
<div class="bottom2">
<div class="bottom3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
laboris nisi
velit
proident,
</div>
</div>
II-D - Bordures
Pour les propriétés de cette partie suivies d'un astérisque (border*), il est possible de définir
plus précisément l'effet voulu en "combinant" les noms de propriétés.
- 29 -
Exemples :
border-bottom
border-bottom-color
border-bottom-style
border-bottom-width
border-left
border-left-color
border-left-style
border-left-width
border-right
border-right-color
border-right-style
border-right-width
border-top
border-top-color
border-top-style
border-top-width
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius
II-D-1 - Épaisseur de la bordure | border-width*
border-width : permet de définir l'épaisseur du trait.
Syntaxe : <border-width>{1,4} | inherit
Version CSS : 1
• une valeur : bordure égale pour les quatre côtés ;

• deux valeurs : la première correspond à l'épaisseur pour le haut et le bas, la seconde pour la gauche et la
droite ;
• trois valeurs : la première correspond à l'épaisseur du haut, la seconde pour la gauche et la droite, la
troisième pour le bas ;
• quatre valeurs : respectivement l'épaisseur du haut, de la droite, du bas, de la gauche.
border-width: 5px 1px 3px 0;

border-color: black;
border-style: solid;
Voir la source
.border-w {
border-width: 5px 1px 3px 0;
}
</style>
<p class="border-w">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- 30 -
Voir la source
II-D-2 - Couleur de la bordure | border-color*
border-color : permet de définir la couleur de la bordure.
Syntaxe : [ <color> | transparent ]{1,4} | inherit
Notes : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte inherit.
Internet Explorer 6 et précédents ne supportent pas la valeur transparent.
Version CSS : 1
• une valeur : couleur unique pour les quatre côtés ;

• deux valeurs : la première correspond à la couleur pour le haut et le bas, la seconde pour la gauche et la
droite ;
• trois valeurs : la première correspond à la couleur du haut, la seconde pour la gauche et la droite, la troisième
pour le bas ;
• quatre valeurs : respectivement la couleur du haut, de la droite, du bas, de la gauche.
border-width: 5px 2px 3px 4px;

border-color: black red blue green;
Voir la source
.border-color {
border-width: 5px 2px 3px 4px;
border-color: black red blue green;
}
</style>
<p class="border-color">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
II-D-3 - Type de bordure | border-style*
border-style : permet de définir le style de bordure.
Syntaxe : <border-style>{1,4} | inherit
Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : les valeurs inherit et hidden ne sont pas supportées par IE 8 et précédents.
- 31 -
Version CSS : 1
• none : pas de bordure ;

• hidden : bordure cachée, l'espace de bordure est apparent contrairement à none ;
• solid : ligne pleine ;
• double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
• dashed : tirets ;
• dotted : pointillés ;
• inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
• outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
• ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
• groove : autre effet 3D double bordure (dépend de la couleur de la bordure).
border-style: none;
border-style: hidden
border-style: double;
border-style: dashed;
border-style: dotted;
border-style: inset;
border-style: outset;
border-style: ridge;
border-style: groove;
Voir la source
.b-style1 {
}
.b-style2 {
border-style: double;
}
.b-style3 {
border-style: dashed;
}
.b-style4 {
border-style: dotted;
}
.b-style5 {
border-style: inset;
border-width: 5px;
}
.b-style6 {
- 32 -
Voir la source
border-style: outset;
border-width: 5px;
}
.b-style7 {
border-style: ridge;
border-width: 5px;
}
.b-style7 {
border-style: groove;
border-width: 5px;
}
</style>
<div class="b-style1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
sunt in culpa qui officia deserunt mollit anim id est laborum</div>
- 33 -
II-D-4 - Bordure à gauche | border-left*
border-left : indique la couleur, l'épaisseur et le type de bordure pour la bordure gauche. L'ordre n'a pas d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-left-color' ] | inherit
Version CSS : 1
border-left: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Voir la source
.b-left {
border-left: 2px dotted red;
width: 70%;
}
</style>
<div class="b-left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
II-D-5 - Bordure en haut | border-top*
border-top : indique la couleur, l'épaisseur et le type de bordure pour la bordure en haut. L'ordre n'a pas d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-top-color' ] | inherit
Version CSS : 1
border-top: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Voir la source
.b-top {
border-top: 2px dotted red;
width: 60%;
}
</style>
<div class="b-top">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
- 34 -
Voir la source
II-D-6 - Bordure à droite | border-right*
border-right : indique la couleur, l'épaisseur et le type de bordure pour la bordure à droite. L'ordre n'a pas
d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-right-color' ] | inherit
Version CSS : 1
border-right: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Voir la source
.b-right {
border-right: 2px dotted red;
width: 60%;
}
</style>
<div class="b-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
II-D-7 - Bordure en bas | border-bottom*
border-bottom : indique la couleur, l'épaisseur et le type de bordure pour la bordure en bas. L'ordre n'a pas
d'importance.
Syntaxe : [ <border-width> || <border-style> || 'border-bottom-color' ] | inherit
Version CSS : 1
border-bottom: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Voir la source
.b-bottom {
border-bottom: 2px dotted red;
width: 60%;
- 35 -
Voir la source
}
</style>
<div class="b-bottom">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
II-D-8 - Bordure tout-en-un | border*
border : permet de définir la bordure en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.
Syntaxe : [ <border-width> || <border-style> || 'border-color' ] | inherit
Version CSS : 1
border: 2px dotted red; /* Bordure en pointillé rouge de 2px */
Voir la source
.border {
border: 2px dotted red;
width: 60%;
}
</style>
<div class="border">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
II-D-9 - Bordure arrondie | border-radius
border-radius : permet d'arrondir les angles
Syntaxe : <valeur>{1,4} / <valeur>{1,4}
Compatibilité : IE 9+, FF 4+, Chrome 0.2+, Safari 5+, Opera 6+
Version CSS : 3
• une valeur : angle unique pour les quatre côtés ;

• deux valeurs : la première correspond à l'angle pour le haut et le bas, la seconde pour la gauche et la droite ;
• trois valeurs : la première correspond à l'angle du haut, la seconde pour la gauche et la droite, la troisième
pour le bas ;
• quatre valeurs : respectivement : l'angle du haut, de la droite, du bas, de la gauche.
- 36 -
Complément d'information : Les bordures en CSS 3.
border-radius: 5px 10px 0 15px;

border: 1px solid red;
padding: 5px; /* Pour éviter que le texte déborde des bordures arrondies */
Voir le code source

.border-radius {
border-radius: 5px 10px 0 15px;
border: 1px solid red;
padding: 5px; width: 60%;
}
</style>
<div class="border-radius">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
II-D-10 - Ombre | box-shadow
box-shadow : permet d'ajouter un ombrage sur un élément.
Syntaxe : none | [, ]* <ombre> | inherit ou <ombre> [ <couleur>? <length> <longueur> <longueur>? <longueur>? |
<longueur> <longueur> <longueur>? <longueur>? <couleur>? ] (source : MDN)
Compatibilité : IE 9+, FF 4+, Chrome 10+, Safari 4+, Opera 10.5+
Version CSS : 3
Explications sur la syntaxe (source : Créer des effets étonnants avec la propriété CSS3 box-shadow) :
• une valeur positive pour le décalage horizontal décale l'ombre vers la droite, une valeur négative vers la
gauche ;
• une valeur positive pour le décalage vertical décale l'ombre vers le bas, une valeur négative vers le haut ;
• vous ne pouvez pas donner une valeur négative pour l'étendue de flou. Plus la valeur est grande, plus le flou
s'étale ;
• une distance de propagation positive entraine une expansion de la zone d'ombre dans toutes les directions,
une valeur négative entraine une contraction ;
• la couleur est celle de l'ombre ;
• la propriété inset indique une ombre interne plutôt qu'externe.
box-shadow: 2px 2px 4px black;

box-shadow: 2px 2px 4px black inset;
box-shadow: 3px 3px 10px 1px #7b7b7b;
Voir le code source

.box1 {
width: 200px;
height: 100px;
box-shadow: 2px 2px 4px black;
- 37 -
Voir le code source

position: relative;
}
.box2 {
position: absolute;
top: 1px;
left: 1px;
font-style: italic;
font-weight: bold;
}
.box3 {
position: absolute;
top: 1px;
right: 1px;
}
.box4 {
width: 200px;
height: 100px;
box-shadow: 2px 2px 4px black inset;
position: relative;
}
.box5 {
position: absolute;
top: 3px;
left: 5px;
font-style: italic;
font-weight: bold;
}
.box6 {
position: absolute;
top: 3px;
right: 1px;
}
.box7 {
box-shadow: 3px 3px 10px 1px #7b7b7b;
border: 1px solid #cecdcd;
background-color: white;
width: 80px;
height: 80px;
}
</style>
<div class="box1">
<div class="box2">Note :</div>
<div class="box3">[X]</div>
</div>
<div class="box4">
<div class="box5">Note :</div>
<div class="box6">[X]</div>
</div>
<div class="box7"></div>
II-E - Contours
Les contours permettent d'entourer un élément. Bien que similaires aux bordures, ils diffèrent sur certains points :
• ils n'augmentent pas l'espace utilisé par l'élément mais se positionnent par dessus le contenu (voir exemple) ;
• ils ne sont pas nécessairement rectangulaires, bien que la plupart des navigateurs ne respectent pas la
spécification (et dessinent des contours rectangulaires) ;
• on ne peut pas définir de contour spécifique à chaque côté ;
- 38 -
• en cas de saut de ligne, le contour n'est pas coupé, il est fermé en fin de ligne et ouvert à la ligne suivante,
donnant visuellement deux contours.
Exemple :
Voir la source
.outline-w-p {
outline-width: thick;
outline-color: gold;
outline-style: solid;
outline-offset: 5px;
padding: 0.8em;
width: 80%;
margin: 10px auto 20px; /* Évite de chevaucher le cadre de code */
}
.outline-w-span {
outline-width: 0.8em;
outline-color: silver;
outline-color: rgba(214,214,214,0.8);
}
</style>
<p class="outline-w-p">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
et dolore <span class="outline-w-span">magna aliqua.<br />Ut enim</span> ad minim veniam, quis
nostrud exercitation ullamco laboris nisi
II-E-1 - Épaisseur du contour | outline-width
outline-width : permet de définir l'épaisseur du trait.
Syntaxe : thin | medium | thick | <longueur> | inherit
Note : Les valeurs prédéfinies dépendent de l'agent utilisateur, néanmoins, les valeurs habituelles sont de 1px pour
thin, 3px pour medium et 5px pour thick.
Version CSS : 2.1
Le contour est placé en avant du contenu, cachant éventuellement une partie de ce dernier
comme dans l'exemple ci-dessus. Cependant, il ne constitue pas lui-même un élément et
ne masque pas réellement les éléments qui sont en-dessous. Notamment, les liens restent
cliquables ou le texte sélectionnable.
Exemples :
outline-width: thin;
outline-width: 0.2em;
outline-width: 4px;
- 39 -
II-E-2 - Couleur du contour | outline-color
outline-color : permet de définir la couleur du contour.
Syntaxe : <couleur> | invert | inherit
Notes.
La valeur invert (qui est pourtant la valeur par défaut) n'est pas supportée par Chrome, Opera 15+ et Safari et a été
abandonnée par Firefox 3.0+.
Pour les navigateurs ne supportant pas invert, la valeur par défaut correspond à la valeur calculée pour color.
Version CSS : 2.1
Exemples :
outline-color: green;
outline-color: #93caff;
outline-color: rgba(127, 218, 54, 0.8);
II-E-3 - Type de contour | outline-style
outline-style : permet de définir le style du contour.
Syntaxe : <outline-style> | inherit
Note : même si elle est peu appliquée, la spécification prévoit que le contour doit s'adapter aux débordements
éventuels du contenu et peut ne pas être rectangulaire (Opera 12 et inférieurs respecte la spécification).
Version CSS : 2.1
• none (par défaut) : pas de bordure ;

• solid : ligne pleine ;
• double : ligne double : nécessite une taille de bordure de 3 pixels minimum) ;
• dashed : tirets ;
• dotted : pointillés ;
• inset : effet 3D "enfoncé" (dépend de la couleur de la bordure) ;
• outset : effet 3D "surélevé" (dépend de la couleur de la bordure) ;
• ridge : effet 3D double bordure (dépend de la couleur de la bordure) ;
• groove : autre effet 3D double bordure (dépend de la couleur de la bordure).
Exemples :
outline-style: none;
outline-style: double;
outline-style: dashed;
outline-style: dotted;
outline-style: inset;
outline-style: outset;
outline-style: ridge;
outline-style: groove;
- 40 -
II-E-4 - Décalage du contour | outline-offset
outline-offset : permet de décaler les limites du contour.
Syntaxe : <longueur> | inherit
Compatibilité : IE, FF 1.5+, Chrome 1.0+, Safari 1.2+, Opera 9.5+
Note : par défaut, le contour est collé aux limites de l'élément, si offline-offset est différent de 0, un espacement
transparent est créé entre l'élément et le contour (si la valeur est négative, le contour est contracté à l'intérieur de
l'élément).
Version CSS : 3
Exemples :
outline-offset: 0;
outline-offset: 5px;
outline-offset: -5px;
outline-offset: 0.4em;
II-E-5 - Contour tout-en-un | outline
outline : permet de définir le contour en une seule fois, aussi bien pour le style, l'épaisseur que la couleur.
Syntaxe : [ <outline-width> || <outline-style> || <outline-color> ] | inherit
Note : la propriété outline-offset ne peut pas être intégrée à la propriété raccourcie outline.
Version CSS : 2.1
Exemples :
outline: thin dotted blue;

outline: solid #FFD700;
outline: 6px double;
III - Propriétés de mise en forme d'arrière-plans
III-A - Couleur de fond
III-A-1 - Couleur de fond | background-color
background-color : définit la couleur de fond de l'élément.
Syntaxe : <color> | transparent | inherit
- 41 -
Complément d'information : Les couleurs en CSS 3.
Version CSS : 1
background-color: #C0C0C0;
background-color: rgb(0, 255, 0);
background-color: rgba(0, 255, 0, 0.6);
background-color: hsl(250, 100%, 50%);
background-color: hsla(250, 100%, 50%, 0.6);
Voir la source
.background-color1 {
}
background-color: #C0C0C0;
}
background-color: rgb(0, 255, 0);
}
</style>
<div style="width: 60%;">
<p class="background-color1">Lorem ipsum dolore sit amet</p>
</div>
III-B - Image de fond
III-B-1 - Image de fond | background-image
background-image : indiquer l'URL de l'image (chemin absolu ou relatif).
Syntaxe : <uri> | none | inherit
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas
plusieurs images de fond pour un même élément. IE 9 supporte inherit.
Version CSS : 1
background-image: url("./images/background.png"); /* relatif */
Voir la source
.background-image {
width: 100px;
height: 100px;
- 42 -
Voir la source
background-image: url('./images/background.png');
}
</style>
<div class="background-image"></div>
III-B-2 - Fond fixé | background-attachment
background-attachment : permet de fixer le fond lors du défilement de la page.
Syntaxe : scroll | fixed | inherit
Version CSS : 1
• fixed : le fond reste fixe quand on scrolle ;

• scroll : le fond défile quand on scrolle (par défaut).
background-attachment: fixed;
background-attachment: scroll;
Voir la source
.background-attch1 {
background-attachment: fixed;
background-repeat: no-repeat;
}
.background-attch2 {
background-attachment: scroll;
}
</style>
<div class="background-attch1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore
nisi
velit
ut labore
nisi
velit
ut labore
nisi
velit
- 43 -
Voir la source
</div>
<div class="background-attch2">
ut labore
nisi
velit
ut labore
nisi
velit
ut labore
nisi
velit
</div>
III-B-3 - Répétition du fond | background-repeat
background-repeat : permet de répéter ou non le fond.
Syntaxe : repeat | repeat-x | repeat-y | no-repeat | inherit
Version CSS : 1
• repeat : le fond est répété (par défaut) ;

• repeat-x : le fond est répété horizontalement ;
• repeat-y : le fond est répété verticalement ;
• no-repeat : le fond est affiché une fois, il n'est pas répété.
background-repeat: repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
Voir la source
.background-repeat1 {
width: 200px;
height: 200px;
background-repeat: repeat;
float: left;
- 44 -
Voir la source
margin-right: 20px;
}
width: 200px;
height: 200px;
background-repeat: repeat-x;
float: left;
margin-right: 20px;
}
width: 200px;
height: 200px;
background-repeat: repeat-y;
float: left;
margin-right: 20px;
}
width: 200px;
height: 200px;
float: left;
}
</style>
<div class="background-repeat1"></div>
<div style="clear: both;"></div>
III-B-4 - Position du fond | background-position
background-position : permet de définir l'emplacement du fond. Utilisé pour la gestion de sprite par exemple. Pour
fonctionner sous Firefox et Opera, la propriété background-attachment doit être à fixed.
Syntaxe : [ [ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]? ] | [ [
left | center | right ] || [ top | center | bottom ] ] | inherit
Version CSS : 1
Il y a deux possibilités pour cette propriété :
• la première, en définissant la position en px ou % depuis le coin en haut à gauche ;

background-position: 100px 20px; /* 100px à droite, 20px en bas */
• la seconde, en utilisant les valeurs prédéfinies pour la verticale et pour l'horizontale :
background-position: top; /* en haut, verticalement */

background-position: center; /* au milieu, verticalement */
background-position: bottom; /* en bas, verticalement */
background-position: left; /* à gauche, horizontalement */
- 45 -
background-position: center; /* au centre, horizontalement */

background-position: right; /* à droite, horizontalement */
Voir la source
.background-pos1 {
width: 200px;
height: 200px;
background-position: 100px 20px;
}
</style>
<div class="background-pos1"></div>
III-B-5 - Fond tout-en-un | background
background : comme la propriété font, il est possible de définir le fond en une seule fois via background.
L'ordre importe peu, mais il est possible de définir : background-image, background-repeat, background-attachment,
background-position.
Syntaxe : ['background-color' || 'background-image' || 'background-repeat' || 'background-attachment' || 'background-

position'] | inherit
Note : la valeur inherit n'est pas supportée par IE 7 et précédents. IE 8 requiert un doctype et ne supporte pas
plusieurs images de fond pour un même élément. IE 9 supporte inherit.
Version CSS : 1
background: url("./images/background.png") no-repeat top right; /

* l'image reste en haut à droite de l'écran et n'est pas répété */
Voir la source
.background1 {
width: 200px;
height: 200px;
background: url('./images/background.png') no-repeat top right;
}
</style>
<div class="background1"></div>
III-B-6 - Transparence | opacity
opacity / filter : permet de rendre un élément transparent à un certain pourcentage. Pour IE8 et ses précédentes
versions, il faut passer par la propriété filter. Le reste des navigateurs acceptent opacity.
Syntaxe : <valeur> | inherit
Compatibilité : IE 9, FF 3.6+, Chrome 17+, Safari 5+, Opera 11.6+
- 46 -
Note : IE 8 et précédents supporte un équivalent : filter: alpha(opacity=50).
Version CSS : 3
opacity: 0.5;
filter: alpha(opacity=50); /* <= IE8 */
Voir la source
.opacity1 {
width: 100px;
height: 100px;
}
.opacity2 {
width: 50px;
height: 50px;
opacity: 0.5;
filter: alpha(opacity=50);
}
</style>
<div class="opacity1">
<div class="opacity2"></div>
</div>
IV - Propriétés des listes
IV-A - Type de liste | list-style-type
list-style-type : permet de définir le type de la liste.
Syntaxe : disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-
latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Compatibilité : IE complète 8 - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Note : IE 8 et précédents ne supporte les valeurs : decimal-leading-zero, lower-greek, lower-latin, upper-latin,

armenian, georgian et inherit que si un doctype est déclaré.
Version CSS : 1
• Pour les listes non ordonnées (<ul>) :

• disc (par défaut) : un disque noir ;
• circle : un cercle ;
• square : un carré ;
• none : aucune puce ne sera utilisée.
• Pour les listes ordonnées (<ol>) :
• decimal : des nombres 1, 2, 3, 4, 5... (par défaut) ;
• decimal-leading-zero : des nombres commençant par zéro (01, 02, 03, 04, 05...) ;
• upper-roman : numérotation romaine, en majuscules (I, II, III, IV, V...) ;
• lower-roman : numérotation romaine, en minuscules (i, ii, iii, iv, v...) ;
• upper-alpha : numérotation alphabétique, en majuscules (A, B, C, D, E...) ;
• lower-alpha : numérotation alphabétique, en minuscules (a, b, c, d, e...) ;
• lower-greek : numérotation grecque, en minuscules ;
- 47 -
• none : aucune.
list-style-type: disc;
list-style-type: square;
list-style-type: upper-roman;
Voir la source
.list1 {
list-style-type: disc;
}
.list2 {
list-style-type: square;
}
.list3 {
list-style-type: upper-roman;
}
</style>
<div>
<ul class="list1">
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ul>
<ul class="list2">
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ul>
<ol class="list3">
<li>Article 1</li>
<li>Article 2</li>
<li>Article 3</li>
</ol>
</div>
IV-B - Position en retrait | list-style-position
list-style-position : permet de définir la position de la puce lorsque le contenu est sur plusieurs lignes.
Syntaxe : inside | outside | inherit
Version CSS : 1
• inside : sans retrait ;

• outside : avec retrait (par défaut).
list-style-position: inside;
list-style-position: outside;
Voir la source
.list-pos1 {
- 48 -
Voir la source
list-style-position: inside;
}
.list-pos2 {
list-style-position: outside;
}
</style>
<div style="width: 400px;">
<ul class="list-pos1">
<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
laboris nisi
ut aliquip ex ea commodo consequat.</li>
laboris nisi
</ul>
<ul class="list-pos2">
laboris nisi
laboris nisi
</ul>
</div>
IV-C - Puce personnalisée | list-style-image
list-style-image : permet de mettre une image en guise de puce.
Syntaxe : <uri> | none | inherit
Version CSS : 1
list-style-image: url('./images/puce.gif');
Voir la source
.list-img {
list-style-image: url('./images/puce.gif');
}
</style>
<div>
<ul class="list-img">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
</ul>
</div>
- 49 -
IV-D - Liste tout-en-un | list-style
list-style : permet de définir les valeurs de list-style-type, list-style-position et list-style-image en une seule fois. Vous
n'êtes pas obligé de mettre toutes les valeurs et l'ordre n'a pas d'importance.
Syntaxe : [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit
Version CSS : 1
list-style: inside square;
Voir la source
.list-style {
list-style: inside square;
}
</style>
<div>
<ul class="list-style">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
</ul>
</div>
V - Propriétés de mise en forme des tableaux
V-A - Type de bordure | border-collapse
border-collapse : permet de définir l'affichage des bordures des cellules d'un tableau.
Syntaxe : collapse | separate | inherit
Compatibilité : IE complète 8 - partielle 5 à 7, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Version CSS : 2.1
• collapse : les bordures du tableau et des cellules sont unifiées ;

• separate : les bordures du tableau et des cellules sont distinctes (par défaut) ;
• inherit : la valeur est reprise du parent. Non supportée par Internet Explorer (IE 9 compris).
border-collapse: collapse;
border-collapse: separate;
Voir la source
.border1 {
- 50 -
Voir la source
}
.border2 {
}
</style>
<div>
<table class="border1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
<table class="border2">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
</div>
V-B - Cellules vides | empty-cells
empty-cells : permet d'afficher ou masquer les cellules vides. Ne fonctionne que si les bordures des cellules sont
distinctes.
Syntaxe : hide | show | inherit
Compatibilité : IE complète 8 (si un doctype est déclaré) - partielle 7, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+
Version CSS : 2.1
• hide : les bordures des cellules vides sont masquées (par défaut) ;
• show : les bordures des cellules vides sont affichées.
empty-cells: hide;
empty-cells: show;
Voir la source
.empty1 {
empty-cells: hide;
}
.empty2 {
empty-cells: show;
}
</style>
<div>
<table class="empty1">
- 51 -
Voir la source
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td></td>
</tr>
</table>
<table class="empty2">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td></td>
</tr>
</table>
</div>
V-C - Position du titre | caption-side
caption-side : permet de définir la position du titre pour le tableau.
Syntaxe : top | bottom | inherit
Compatibilité : IE 8+ (si un doctype est déclaré), FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+
Version CSS : 2.1
• top : le titre sera en haut du tableau (par défaut) ;

• bottom : le titre sera en bas du tableau.
caption-side: top;
caption-side: bottom;
Voir la source
.caption1 {
caption-side: top;
}
.caption2 {
caption-side: bottom;
}
</style>
<div>
<table class="caption1" style="border: 1px solid black;">
<caption>Titre du tableau</caption>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
- 52 -
Voir la source
<table class="caption2" style="border: 1px solid black;">
<caption>Titre du tableau</caption>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
</div>
V-D - Affichage des cellules | table-layout
table-layout : permet de définir la façon dont les cellules d'un tableau se comportent.
Syntaxe : inherit | auto | fixed
Compatibilité : IE 5+, FF 1.0+, Chrome, Safari 1.0+, Opera 7+
Explication.
inherit/auto : la largeur dépend du contenu et de l'algorithme utilisé par le navigateur.
fixed : la largeur est fixe et dépend soit de la largeur de la première ligne si aucune dimensions n'est spécifiée, soit
des dimensions spécifiées. À noter que si le contenu des lignes est supérieur en terme d'espace, les cellules adoptent
un overflow automatiquement.
Version CSS : 2.1
Exemple :
Voir la source
.table-layout1 {
table-layout: fixed;
width: 200px;
}
.table-layout2 {
table-layout: auto;
width: 200px;
}
.table-layout2 td {
}
</style>
<table class="table-layout1">
<tr>
<td>Cellule 1</td>
<td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
<table class="table-layout2">
- 53 -
Voir la source
<tr>
<td>Lorem ipsum dolore sit amet, consectetur adipiscing elit</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Lorem ipsum dolore sit amet, consectetur adipiscing elit Lorem ipsum dolore sit amet,
consectetur adipiscing elit</td>
<td>Cellule 4</td>
</tr>
</table>
V-E - Espacement des cellules | border-spacing
border-spacing : permet de définir l'espacement enter les cellules. Ne fonctionne que si les cellules sont séparées
(border-collapse: separate). Cette propriété est équivalente à l'attribut de présentation cellspacing en HTML.
Syntaxe : inherit | <longueur> | <longueur> <longueur>
Compatibilité : IE 7+, FF 1.0+, Chrome, Safari 1.0+, Opera 6+
Note : indiquez de une à deux valeurs à la suite. Selon le nombre de valeurs, la signification change :
une valeur : espacement horizontaux et verticaux ;
deux valeurs : la première longueur indique l'espacement horizontal (espace entre deux cellules de colonnes
adjacentes), la seconde longueur indique l'espacement vertical (espace entre deux cellules d'une même colonne).
Version CSS : 2.1
Exemple :
Voir la source
.border-spacing1 {
width: 200px;
border-spacing: 10px;
}
.border-spacing2 {
width: 200px;
border-spacing: 10px 20px;
}
.border-spacing2 td {
}
</style>
<table class="border-spacing1">
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
<table class="border-spacing2">
<tr>
<td>Cellule 1</td>
- 54 -
Voir la source
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
VI - Propriétés d'affichage et de positionnement
VI-A - Affichage
VI-A-1 - Type d'élément | display
display : définit comment doit être affiché un élément HTML.
Syntaxe : inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-
footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
Notes : la valeur inline-block n'est supportée par IE 6 que pour les éléments initialement inline ; les valeurs inline-
table, table, table-caption, table-cell, table-column, table-column-group, table-row, table-row-group et inherit ne sont
pas supportées par IE 7 et précédents. IE 8 requiert un doctype. IE 9 supporte ces valeurs.
Version CSS : 1
On ne va reprendre ici que ceux étant les plus utilisés :
• none : l'élément ne sera pas affiché ;

• block : l'élément devient de type "bloc" (comme <div>). Un élément de type bloc ajoute un espace avant et
après le bloc, ainsi qu'un saut de ligne ;
• inline : l'élément devient de type "inline" (en ligne, comme <span>). Valeur par défaut. Il n'y a pas d'espace
avant ni après et n'ajoute pas de saut de ligne ;
• inline-block : l'élément est affiché comme un "inline" mais peut être redimensionné comme un bloc ;
• list-item : l'élément devient de type "élément de liste à puce" (comme <li>) ;
• table : l'élément est affiché comme une table ;
• table-caption : l'élément est affiché comme le titre d'un tableau ;
• table-cell : l'élément est affiché comme une cellule de tableau ;
• table-column : l'élément est affiché comme une colonne de tableau ;
• table-column-group : l'élément est affiché comme un groupe de colonnes (<colgroup>) ;
• table-header-group : l'élément est affiché comme l'en-tête d'un tableau ;
• table-footer-group : l'élément est affiché comme le pied de page d'un tableau ;
• table-row : l'élément est affiché comme une ligne de tableau ;
• table-row-group : l'élément est affiché comme un groupe de lignes.
display: none;
display: block;
display: inline;
display: inline-block;
Voir la source
.display1 {
- 55 -
Voir la source
display: none;
}
.display2 {
display: block;
}
.display3 {
display: inline;
}
.display4 {
display: inline-block;
}
</style>
<div style="border: 2px solid #696969; background-color: #93caff; margin-bottom: 10px;">Lorem
ipsum dolore sit amet,
<span class="display1">consectetur</span> adipisicing elit</div>
VI-A-2 - Affichage | visibility
visibility : permet d'afficher ou de masquer un élément.
Syntaxe : visible | hidden | collapse | inherit
Note : les valeurs inherit et collapse ne sont pas supportées par IE 8 et précédents.
Version CSS : 2.1
Contrairement à display: none;, l'élément masqué occupe toujours l'espace dans la page.
• visible : l'élément est affiché ;

• hidden : l'élément est masqué mais conserve son espace dans la page ;
• collapse : cache une ligne ou une colonne d'un tableau.
visibility: visible;
visibility: hidden;
visibility: collapse;
display: none;
Voir la source
.visible1 {
visibility: visible;
}
- 56 -
Voir la source
.visible2 {
visibility: hidden;
}
.visible3 {
visibility: collapse;
}
.display {
display: none;
}
</style>
<div style="margin-bottom: 10px; border: 2px solid #696969; background-
color: #93caff; padding: 10px; width: 60%;">
<div>lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<div class="visible1">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<p>Ici la phrase est affichée.</p>
</div>
<div class="visible2">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<p>Ici la phrase sera masquée mais l'espace est conservé.</p>
</div>
<div style="margin-bottom: 10px; background-color: #93caff; padding: 10px; width: 60%;">
<table>
<tr id="visible3" class="visible3">
<td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
</tr>
<tr>
<td>lorem ipsum dolore sit amet, consectetur adipisicing elit.</td>
</tr>
<tr>
<td><button>Cliquez ici</button></td>
</tr>
</table>
<p>Ici c'est une ligne d'un tableau que l'on masque</p>
</div>
<div class="display">lorem ipsum dolore sit amet, consectetur adipisicing elit.</div>
<p>Ici la phrase est masquée et l'espace supprimé.</p>
</div>
VI-A-3 - Afficher seulement une partie | clip
clip : permet de spécifier une zone visible d'un élément.
Syntaxe : <shape> | auto | inherit
Compatibilité : IE 5.5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+
Version CSS : 1
Indiquer quatre valeurs à la suite :
clip: rect(0px, 50px, 50px, 0px);

- 57 -
Cela permet de n'afficher qu'une partie d'un élément. rect() permet d'indiquer les coordonnées du rectangle qui sera
affiché.
Les valeurs 1 à 4 correspondent respectivement aux coins haut, droite, bas et gauche du rectangle.
Attention, clip ne s'applique qu'aux éléments dont la position est absolue.
Voir la source
.clip1 {
position: absolute;
clip: rect(0px 50px 50px 0px);
width: 150px;
}
.clip2 {
position: absolute;
width: 150px;
left: 150px;
}
</style>
<div style="position: relative; height: 110px;">
<div class="clip1">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua.</div>
<div class="clip2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor
incididunt ut labore et dolore magna aliqua.</div>
</div>
VI-A-4 - Limiter les dimensions | overflow
overflow : permet de déterminer comment sera affiché le contenu d'un élément quand il dépasse les limites de son
conteneur. C'est utilisé, entre autres, pour afficher des barres de défilement.
Syntaxe : visible | hidden | scroll | auto | inherit
Version CSS : 2.1
• visible : tout l'élément sera affiché (par défaut) ;

• hidden : l'élément sera masqué s'il dépasse les limites définies par height et width. On ne pourra pas voir la
partie du texte masquée ;
• scroll : tout comme pour hidden, l'élément sera coupé s'il dépasse les limites. Cette fois le navigateur ajoutera
des barres de défilement pour qu'on puisse voir la suite du texte. Ces barres seront obligatoirement affichées,
même si celles-ci ne sont pas nécessaires ;
• auto : c'est le navigateur qui décide d'ajouter des barres de défilement ou pas en fonction des cas.
Cette propriété peut être étendue par overflow-x et overflow-y.
overflow: visible;
overflow: hidden;
- 58 -
overflow: scroll;
overflow: auto;
Voir la source
.myDiv {
width: 300px;
height: 300px;
}
</style>
<button onclick="overflow('overflow: visible;');">visible</button>
<button onclick="overflow('overflow: hidden;');">hidden</button>
<button onclick="overflow('overflow: scroll;');">scroll</button>
<button onclick="overflow('overflow: auto;');">auto</button>
<div class="myDiv" style="overflow: visible;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies est in dui
aliquet vel dictum tellus sagittis.
Etiam fringilla laoreet tortor, ut dapibus ligula pharetra eget. Pellentesque faucibus
eleifend faucibus. Nam sapien lacus, congue at mattis mattis, blandit ac leo.</p>
<p>Vestibulum at elit cursus urna lacinia dapibus vel quis magna. Nullam nibh elit, congue
eget imperdiet id, bibendum in risus.
Suspendisse potenti. Donec nec orci ut ante luctus pharetra. Proin tristique, nibh at
porttitor tristique, enim ante aliquam justo, nec feugiat leo dolor quis dui.</p>
<p>Proin quis enim neque, ut ultricies sapien. Cras risus eros, placerat eget pharetra ut,
molestie sit amet metus. Ut tortor
purus, molestie eget dictum eget, vestibulum sed nisi. Quisque posuere feugiat arcu
at mattis. Nunc vehicula dui tortor, ut convallis odio.</p>
</div>
VI-B - Positionnement
VI-B-1 - Flottant | float
float : permet de définir le flottement d'une boîte à gauche, à droite ou pas du tout.
Syntaxe : none | left | right | inherit
Version CSS : 1
• left : l'élément flotte à gauche ;

• right : l'élément flotte à droite ;
• none : pas de flottement (par défaut).
float: none;
float: left;
float: right;
Voir la source
.float1 {
width: 500px;
- 59 -
Voir la source
height: 204px;
}
.float2 {
width: 100px;
height: 100px;
float: none;
}
.float3 {
width: 100px;
height: 100px;
float: left;
}
.float4 {
width: 100px;
height: 100px;
float: right;
}
</style>
<div class="float1">
<div class="float2">NONE</div>
<div class="float3">LEFT</div>
<div class="float4">RIGHT</div>
</div>
VI-B-2 - Stopper un flottant | clear
clear : permet de définir si un élément doit être adjacent à un autre ou placé en dessous.
Syntaxe : none | left | right | both | inherit
Version CSS : 1
• left : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche ;
• right : l'élément est déplacé vers le bas pour se libérer des éléments flottants de droite ;
• both : l'élément est déplacé vers le bas pour se libérer des éléments flottants de gauche comme de droite ;
• none : l'élément ne se déplacera pas (par défaut).
clear: left;
.div1 {
float: left;
height: 50px;
}
- 60 -
.div2 {
float: left;
height: 50px;
margin-left: 20px;
}
.clear1 {
clear: left;
}
</style>
<div style="border: 2px solid #696969; background-color: #93caff; width: 60%; padding: 10px;">
<div class="div1">Flottant à gauche</div>
<div class="div2">Flottant à gauche avec marge de 20 pixels</div>
<div class="clear1">Flottant nettoyé</div>
</div>
VI-B-3 - Type de positionnement | position
position : permet de définir le mode de positionnement d'un élément.
Syntaxe : absolute | fixed | relative | static | inherit
Version CSS : 2.1
• absolute : retire complètement l'élément du flux et le positionne par rapport à son plus proche ancêtre lui-
même positionné (ou par défaut la fenêtre du navigateur) en fonction des propriétés top, right, bottom et left ;
• fixed : position fixe. L'élément reste à sa position dans la fenêtre ;
• relative : déplace l'élément par rapport à sa position dans le flux. Il n'est pas retiré du flux ;
• static : positionnement normal (par défaut).
Voir la source
.div_position {
width: 60%;
height: 400px;
}
.position {
width: 100px;
height: 100px;
left: 10px;
top: 100px;
}
</style>
<button onclick="position('position: static;');">static</button>
<button onclick="position('position: fixed;');">fixed</button>
<button onclick="position('position: relative;');">relative</button>
<button onclick="position('position: absolute;');">absolute (sera placé tout en haut de la
page)</button>
<div class="div_position">
<div class="position" style="position: static;"></div>
</div>
- 61 -
VI-B-4 - Position par rapport aux coins | top bottom left right
top - bottom - left - right : permettent de définir la position d'un élément. Valeurs en px, %, em... À utiliser pour un
positionnement absolu, fixe ou relatif. Si la propriété position est à la valeur static, ces propriétés n'ont pas d'effet.
Version CSS : 2.1
top: 30px;
left: 50px;
bottom: 10px;
right: 30px;
Voir la source
.div_pos {
position: relative;
width: 60%;
height: 400px;
}
.pos1 {
position: absolute;
width: 100px;
height: 100px;
top: 30px;
left: 50px;
}
.pos2 {
position: absolute;
width: 100px;
height: 100px;
bottom: 10px;
right: 30px;
}
</style>
<div class="div_pos">
<div class="pos1"></div>
<div class="pos2"></div>
</div>
VI-B-5 - Ordre d'affichage | z-index
z-index : permet, pour les éléments positionnés, de définir quel élément sera placé au-dessus de l'autre. Plus le
nombre sera grand, plus il sera au premier plan.
Syntaxe : auto | <integer> | inherit
- 62 -
Complément d'information : Comprendre z-index.
Version CSS : 2.1
z-index: 1;
z-index: 2;
z-index: 5;
Voir la source
.div_index {
width: 400px;
height: 400px;
position: relative;
}
.index1 {
width: 150px;
height: 150px;
z-index: 1;
top: 50px;
left: 50px;
position: absolute;
}
.index2 {
width: 150px;
height: 150px;
z-index: 2;
top: 80px;
left: 80px;
position: absolute;
}
.index3 {
width: 150px;
height: 150px;
background-color: blue;
z-index: 2;
top: 120px;
left: 120px;
position: absolute;
}
</style>
<div class="div_index">
<div class="index1"></div>
</div>
VII - Propriétés de transformation et d'animation (CSS 3)
Les propriétés présentées dans cette partie peuvent nécessiter l'utilisation des préfixes
vendeurs.
- 63 -
VII-A - Propriétés de transformation
Les transformations permettent de modifier le rendu visuel d'un ou plusieurs éléments. Ces transformations peuvent
se faire dans le plan de la page (transformations 2D) ou dans un espace 3D.
Les transformations 2D sont correctement supportées par les navigateurs récents, en revanche, les transformations
3D, apparues plus récemment, le sont un peu moins.
Complément d'information : Les transformations 2D en CSS3.
VII-A-1 - Origine de la transformation | transform-origin
transform-origin : permet de définir quel sera le point d'origine de la transformation.
Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center
| right ] && [ <pourcentage> | <longueur> | top | center | bottom]]
Compatibilité (base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+

Compatibilité (3D ; trois valeurs) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Notes :
Trois valeurs sont possibles correspondant au déplacement sur les axes X, Y et Z (valeurs par défaut 50% 50%
0). Si une seule valeur est passée, l'origine est uniquement déplacée sur l'axe X (à moins que cette valeur soit un
mot-clé spécifique à l'axe Y :top ou bottom, dans ce cas, seul l'axe Y est impacté), les autres axes prennent leur
valeur par défaut.
Si deux valeurs sont passées, elles correspondent aux axes X et Y, l'axe Z prend sa valeur par défaut.
Seules des longueurs sont acceptées pour l'axe Z. L'origine peut se trouver en dehors de l'élément transformé (voir
les démos de rotate() et scale()).
Démo de mise en œuvre de cette propriété.
Exemples :
transform-origin: 25%;
transform-origin: top -50px;
transform-origin: 2em bottom 10px;
VII-A-2 - Perspective 3D | perspective
perspective | transform: perspective() : permettent de déterminer le point de fuite des transformations 3D et

d'appliquer des effets de perspective.
Syntaxe (perspective) : none | <longueur>

Syntaxe (transform) : perspective(none | <longueur>)
Il existe deux façons de déclarer une perspective (voir exemples). Soit avec la propriété
perspective, soit sous forme de fonction de transformation liée à la propriété transform.
- 64 -
La première permet de définir une perspective pour un ensemble d'éléments à partir d'un
élément parent commun, la seconde pour une perspective liée à un seul élément en la
combinant avec d'autres fonctions de transformation.
Compatibilité : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Explications.
La valeur de la perspective permet de déterminer la distance de l'utilisateur au plan z=0. Si elle vaut none, 0 ou une
valeur non autorisée, aucune perspective n'est appliquée.
Les dimensions affichées de chaque élément vont dépendre de leur positionnement selon l'axe z, un élément dont
la position sur l'axe z est positive sera vu plus grand et plus petit pour une position négative.
Un élément se trouvant sur un plan de coordonnée z supérieure ou égale à la valeur de la perspective sera considéré
comme « derrière » l'utilisateur et ne sera pas affiché.
Sur Firefox, un élément situé sur l'axe z à la même valeur que la perspective n'est pas affiché,
pour les valeurs supérieures, il est affiché retourné.
Exemples :
perspective: none;
perspective: 25px;
perspective: 2em;
Exemples :
transform: perspective(none);
transform: perspective(25px);
transform: perspective(2em);
Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).
Extrait du code de l'exemple

#element{ /* L'élément recevant la transformation */
transform: perspective(xpx) translateZ(zpx); /
* x : valeur du champ Perspective ; z : valeurs du champ Décalage Z */
}
VII-A-3 - Origine de la perspective | perspective-origin
transform-origin : permet de définir quel sera le point d'origine de la perspective.
Syntaxe : [<pourcentage> | <longueur> | left | center | right | top | bottom] | [[<pourcentage> | <longueur> | left | center
| right ] && [ <pourcentage> | <longueur> | top | center | bottom]]
Version CSS : 3
- 65 -
Note : par défaut, l'origine de la perspective se trouve au centre de l'élément (50% 50%).
Exemples :
perspective-origin: 25%;
perspective-origin: top -50px;
Dans la démo suivante, entrez les coefficients, puis cliquez sur « Appliquer » (cliquez sur la boîte jaune pour annuler).

#outerElement{ /* Bordure pointillée */
perspective: Zpx; /* Z : valeur de Perspective */
perspective-origin: Xpx Ypx; /* X : valeur de Origine X ; Y : valeur de Origine Y */
}
#innerElement{ /* Cadre doré */
transform: translateZ(50px);
}
VII-A-4 - Fonctions de transformation | transform
transform : permet d'appliquer une fonction de transformation sur un élément.
Syntaxe : none | <transform-fonction>+
Compatibilité (fonctions de base) : IE 9+, FF 3.5+, Chrome, Safari 3.1+, Opera 10.5+
Compatibilité (fonctions 3D) : IE 10+, FF 10+, Chrome 12+, Safari 4+, Opera 15+
Version CSS : 3
Complément d'information : Les transformations en CSS 3.
Il est possible de définir plusieurs transformations différentes sur un même élément, par
exemple :
selecteur{
transform: translate(100px, 50px) rotate(50deg);
}
Si la valeur de transform est différente de none, alors un nouveau contexte d'empilement

est créé, ce qui influe sur le comportement de z-index.
Translation | translate()
translate() | translate3d() : permettent de déplacer l'élément sur les différents axes.
Syntaxe : translate(<longueur-x>[, <longueur-y>])

Syntaxe : translate3d(<longueur-x>, <longueur-y>, <longueur-z>)
- 66 -
Notes.
longueur-x, longueur-y et le cas échéant longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Pour translate(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer une translation sur un seul axe avec les dérivés translateX(), translateY() et translateZ().
Exemples :
-moz-transform: translate(100px, -50px);

-webkit-transform: translate(100px, -50px);
-ms-transform: translate(100px, -50px);
-o-transform: translate(100px, -50px);
transform: translate(100px, -50px);
Dans la démo suivante, entrez les valeurs numériques pour les décalages en X et Y dans les champs suivants et
cliquez sur « Déplacer » (cliquez sur la boîte jaune pour annuler le déplacement).

transform: translate(xpx, ypx); /
* x : valeur du champ Décalage X ; y : valeurs du champ Décalage Y */
}
Rotation | rotate()
rotate() | rotate3d() : permettent de faire pivoter un élément suivant le point d'origine.
Syntaxe : rotate(<angle>)
Syntaxe : rotate3d(<longueur-x>, <longueur-y>, <longueur-z>, <angle>)
Notes.
Pour rotate3d(), longueur-x, longueur-y et longueur-z sont des longueurs, les pourcentages ne sont pas autorisés.
Il est possible d'effectuer une rotation sur un seul axe avec les dérivés rotateX(), rotateY() et rotateZ().
• deg (degrés), un cercle complet mesure 360 degrés (360deg) ;

• grad (grades), un cercle complet mesure 400 grades (400grad) ;
• rad (radians), un cercle complet mesure 2π (≈6.2832rad) ;
• turn (tour), un cercle complet mesure 1 tour (1turn).
Quatre unités d'angle sont autorisées :
Exemples :
-moz-transform: rotate(260deg);
-webkit-transform: rotate(300grad);
-ms-transform: rotate(1.2rad);
-o-transform: rotate(0.25turn);
transform: rotate(260deg);
Dans la démo suivante, entrez l'angle de rotation, l'unité, puis cliquez sur « Rotation » (si rien ne se passe, c'est que
l'unité n'est pas reconnue, cliquez sur la boîte jaune pour annuler la rotation).
- 67 -

transform-origin: valeur; /* Valeur du champ Origine */
transform: rotate(x<angle>); /
* x : valeur du champ Angle ; <angle> : valeurs du champ Unité */
}
Redimensionnement | scale()
scale() | scale3d() : permettent de redimensionner un élément selon les différents axes.
Syntaxe : scale(<nombre-x>[, <nombre-y>])

Syntaxe : scale3d(<nombre-x>, <nombre-y>, <nombre-z>)
Notes.
nombre-x, nombre-y et le cas échéant nombre-z correspondent aux facteurs de redimensionnement, les valeurs
négatives sont autorisées, dans ce cas, l'élément semblera retourné. Les valeurs supérieures à 1 agrandiront
l'élément, les valeurs inférieures le rétréciront.
Pour scale(), une seule valeur est autorisée, dans ce cas, elle est appliquée aux deux dimensions.
Il est possible d'effectuer un redimensionnement sur un seul axe avec les dérivés scaleX(), scaleY() et scaleZ().
Exemples :
-moz-transform: scale(1.5);
-webkit-transform: scale(0.5, 0.8);
-ms-transform: scale(1.5, 0.5);
-o-transform: scale(1);
transform: scale(2,1.5);
Dans la démo suivante, entrez les coefficients, puis cliquez sur « Redimensionner » (cliquez sur la boîte jaune pour
annuler la rotation).

transform-origin: valeur; /* Valeur du champ Origine */
transform: scale(x, y); /* x : valeur du champ Axe X ; y : valeurs du champ Axe Y */
}
Distorsion | skew()
skew() | skewX() | skewY() : permettent la distorsion des éléments.
Syntaxe : skew(<angle-x>[, <angle-y>])

Syntaxe : skewX(<angle-x>) | skewY(<angle-y>)
Notes.
angle-x et angle-y sont des angles qui déterminent l'angle de la distorsion à appliquer sur chaque axe, les valeurs
négatives sont autorisées.
Pour skew(), une seule valeur est autorisée, dans ce cas, l'angle sur l'axe y vaut 0.
Le comportement de skew() avec deux valeurs n'est pas le même que si l'on applique successivement skewX() et
skewY() avec des valeurs identiques.
- 68 -
Exemples :
-moz-transform: skew(260deg);
-webkit-transform: skew(-300grad, 45deg);
-ms-transform: skewX(1.2rad);
-o-transform: skewY(0.25turn);
transform: skew(260deg);
Dans la démo suivante, entrez les angles, puis cliquez sur « Déformer » (cliquez sur la boîte jaune pour annuler
la déformation).
Attention : certaines valeurs d'angles proches provoquent une déformation aux dimensions
excessives de l'élément, d'autres le rendent invisible.

transform: skew(adeg, adeg); /* Si skew() sélectionné ; a : valeur du champ Angle */
transform: skewX(adeg); /* Si skewX() sélectionné ; a : valeur du champ Angle */
transform: skewY(adeg); /* Si skewY() sélectionné ; a : valeur du champ Angle */
}
Transformation matricielle | matrix()
matrix() | matrix3d() : permettent de transformer un élément selon une matrice de transformation.
Syntaxe : matrix(<nombre-a>, <nombre-b>, <nombre-c>, <nombre-d>, <longueur-x>, <longueur-y>)

Syntaxe : matrix3d(<matrice-4x4>)
Notes.
En réalité, toutes les fonctions de transformation utilisent matrix() (ou matrix3d()), les autres fonctions ne sont que
des formes simplifiées.
Le fonctionnement de matrix() et matrix3d() ainsi que le détail des paramètres impliquent des notions complexes
(notamment mathématiques) qui vont au-delà du cadre de ce glossaire, ces points ne seront donc pas détaillés.
Pour les versions préfixées de Firefox (-moz-transform), les longueurs doivent contenir l'unité.
Article détaillé sur les matrices de transformation : The CSS3 matrix() Transform for the Mathematically
Challenged.
Exemples :
-moz-transform: matrix(1, 0, 0.6, 1, 250px, 25px);

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 25);
-o-transform: matrix(1, 0, 0.6, 1, 250, 25);
-ms-transform: matrix(1, 0, 0.6, 1, 250, 25);
transform: matrix(1, 0, 0.6, 1, 250, 25);
VII-A-5 - Face arrière | backface-visibility
backface-visibility : permet d'indiquer la visibilité de la face arrière d'un élément.
- 69 -
Syntaxe : visible | hidden
Version CSS : 3
Notes.
La face arrière d'un élément est toujours transparente, la visibilité indique donc si l'on peut voir la face avant en miroir
(visible) ou non (hidden).
Bien qu'il soit possible d'utiliser cette propriété pour des transformations 2D, elle est surtout utile pour les
transformations 3D, permettant ainsi de visualiser ou non les éléments superposés.
Démo.
Extrait du code HTML de l'exemple

<div id="conteneur">
<div id="element">Texte</div>
<div id="under"></div>
</div>
Extrait du code CSS de l'exemple

#conteneur{ /* Le conteneur (bordure pointillée)
transform-style: preserve-3d; /* Permet l'empilement sur l'axe z des éléments */
}
#element{ /* L'élément recevant la transformation (fond doré) */
backface-visibility: visible|hidden; /* Case Fond arrière visible cochée|décochée */
transform: rotateY(180deg|0); /* Case Élément retourné cochée|décochée */
}
#under{ /* L'élément en dessous (fond image developpez.com) */
transform: translateZ(-10px); /* Permet de déplacer en arrière sur l'axe z */
}
VII-A-6 - Héritage 3D | transform-style
transform-style : permet d'indiquer si les éléments enfants héritent de l'espace 3D de leur parent ou en créent un
nouveau à partir de celui-ci.
Syntaxe : flat | preserve-3d
Internet Explorer (y compris la version 11) ne reconnait que la valeur flat pour cette propriété.
Version CSS : 3
Explications.
Lorsque l'on crée un espace 3D, deux types de comportement peuvent être souhaités : soit chaque élément est
indépendant des autres et peut être déplacé individuellement, soit certains éléments peuvent contenir des éléments
enfants dépendants de celui-ci.
- 70 -
Par exemple, si l'on veut créer un dé, on créera six éléments (les faces) qui appartiendront à l'espace 3D puis on
intégrera à chaque face un nombre d'images constituant les points du dé, ces images devront donc être liées à la
face associée sans être intégrées à l'espace 3D.
La valeur flat indique que les éléments enfants appartiennent au plan de leur parent, la valeur preserve-3d qu'ils
appartiennent à l'espace 3D.
Démo.
Dans cet exemple, l'image est enfant du cadre doré. On applique au cadre une rotation de 45° (rotateY(45deg)) et
à l'image une translation de 50px (translateZ(50px)).
Si preserve-3d est cochée, l'image appartient à l'espace 3D et la transformation s'applique, si flat est cochée, l'image
appartient au cadre et la translation ne s'applique plus (sauf si l'on définit une valeur de perspective pour le cadre).

#conteneur{ /* Le conteneur (bordure pointillée)
perspective: 200px;
}
#element{ /* L'élément recevant la transformation (fond doré) */
transform-style: preserve-3d|flat; /* Case preserve-3d|flat cochée */
transform: rotateY(45deg);
}
#image{ /* L'élément image interne (image developpez.com) */
transform: translateZ(50px); /* Permet de déplacer en arrière sur l'axe z */
}
VII-A-7 - Exemple de transformation 3D
Voir le code de l'exemple

<style>
#cube{
position: relative;
margin: 20px auto 100px;
width: 100px;
height: 100px;
-webkit-perspective: 300px;
-ms-perspective: 300px;
perspective: 300px;
-webkit-perspective-origin: -50% -50%;
-ms-perspective-origin: -50% -50%;
perspective-origin: -50% -50%;
-webkit-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.face{
position: absolute;
width: 100px;
height: 100px;
font-size: 75px;
line-height: 100px;
text-align: center;
}
#face1{
-webkit-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
background-color: rgba(200,0,0,0.6);
}
#face2{
-webkit-transform-origin: left 50%;
-webkit-transform: rotateY(270deg);
-ms-transform-origin: left 50%;
-ms-transform: rotateY(270deg);
- 71 -

transform-origin: left 50%;
}
#face3{
-webkit-transform-origin: 50% top;
-webkit-transform: rotateX(90deg);
-ms-transform-origin: 50% top;
-ms-transform: rotateX(90deg);
transform-origin: 50% top;
transform: rotateX(90deg);
}
#face4{
-webkit-transform-origin: 50% bottom;
-webkit-transform: rotateX(90deg) translateY(100px);
-ms-transform-origin: 50% bottom;
-ms-transform: rotateX(90deg) translateY(100px);
transform-origin: 50% bottom;
transform: rotateX(90deg) translateY(100px);
}
#face5{
-webkit-transform-origin: right 50%;
-ms-transform-origin: right 50%;
transform-origin: right 50%;
}
#face6{
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
}
</style>
<div id="cube">
<div class="face" id="face6">6</div>
</div>
Dans le code HTML, l'ordre des faces est inversé pour éviter que les navigateurs ne prenant
pas en compte la valeur preserve-3d n'affichent les faces cachées au-dessus des faces
visibles.
VII-B - Propriétés de transition
Il est de plus en plus fréquent qu'une page Web modifie l'apparence de certains éléments en fonction des interactions
avec l'utilisateur, que ce soit en CSS (avec notamment la pseudoclasse :hover) ou en JavaScript.
Les transitions CSS permettent de fluidifier ces changements d'aspect visuel en animant les propriétés CSS
impliquées d'un état à un autre.
Complément d'information : Les transitions en CSS3.
S'il est possible d'animer un grand nombre de propriétés CSS, certaines ne le permettent
toutefois pas. Voir une liste des propriétés qui peuvent être animées.
- 72 -
Les principaux navigateurs ont intégré la version non préfixée des propriétés liées aux
transitions depuis plusieurs versions. Quant à IE, si l'implémentation est récente (IE 10+), il
n'y a pas eu de version préfixée de ces propriétés.
Il ne semble donc pas utile d'utiliser les versions préfixées si ce n'est pour les utilisateurs ne
mettant pas à jour leur navigateur (ce qui est rare, car ceux-ci ont un système de mise à jour
automatique activé par défaut).
VII-B-1 - Nom de propriété(s) | transition-property
transition-property : permet de définir quelle(s) propriété(s) sera (seront) animée(s).
Syntaxe : none | all | <propriete>[, <propriete>]*
Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+
Version CSS : 3
Exemples :
transition-property: none;
transition-property: all;
transition-property: width, color, transform, -webkit-transform, -ms-transform, -o-transform;
VII-B-2 - Durée de transition | transition-duration
transition-duration : permet de définir la durée de la transition.
Syntaxe : inherit | <duree>[, <duree>]*
Compatibilité : IE 10+, FF 4+, Chrome 1, Safari 3, Opera 11.6+
Version CSS : 3
Notes.
Il est nécessaire d'indiquer une unité pour les durées, les unités possibles sont la seconde s ou la milliseconde ms.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
Il est possible d'indiquer plusieurs durées (séparées par des virgules), dans ce cas, elles correspondront aux
différentes propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que de durées,
le navigateur revient au début de la liste pour compléter, s'il y a plus de durées, les dernières sont ignorées.
Exemples :
transition-duration: 2s;
transition-duration: 250ms;
transition-duration: 2s, 250ms, 120ms;
transition-duration: inherit;
- 73 -
VII-B-3 - Effet de transition | transition-timing-function
transition-timing-function : permet d'assouplir l'effet de transition selon une fonction dite d'easing.
Syntaxe : <effet>[, <effet>]*
Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-
bezier(x1, y1, x2, y2), steps(nb_pas, start|end).
Compatibilité : IE 10+, FF 4+, Chrome, Safari, Opera 11.6+
Version CSS : 3
Complément d'information : Easing Functions - Guide de référence.
Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre
0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers,
start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes
propriétés listées dans transition-property dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur
revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.
Exemples :
transition-timing-function: linear;
transition-timing-function: step(4, end);
transition-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
transition-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);
VII-B-4 - Délai de démarrage | transition-delay
transition-delay : permet d'indiquer un délai avant de démarrer une transition.
Syntaxe : initial | <duree>[, <duree>]*
Version CSS : 3
Notes.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer une valeur négative, dans ce cas, la transition débutera aussitôt, mais au point où elle aurait
dû être si elle avait commencé au moment indiqué par le délai négatif.
Exemples :
- 74 -
transition-delay: 2s;
transition-delay: -250ms;
transition-delay: 2s, 250ms, 120ms;
transition-delay: initial;
VII-B-5 - La transition tout-en-un | transition
transition : regroupe toutes les propriétés de transition.
Syntaxe : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
Version CSS : 3
Note : il est possible d'indiquer plusieurs transitions séparées par des virgules.
Exemples :
transition: all 2s;

transition: width 250ms, height 100ms 250ms;
transition: all 2s steps(5, end) 250ms, 120ms;
VII-B-6 - Exemple récapitulatif
L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités de transition.
Dans cet exemple, on affiche le dos doré d'une carte. Au survol du cadre pointillé, la carte se retourne et se déplace
sur la droite en laissant apparaitre la figure.
Vous pouvez constater dans le code HTML qu'il s'agit en fait de deux éléments distincts animés de façon
synchronisée : il n'est pas possible (du moins pas encore) de donner des styles à la face arrière d'un élément.
Une fois la carte retournée, un troisième élément, initialement transparent (opacity: 0) apparait pour afficher un
message (voir le code de l'exemple).
Les navigateurs ne reconnaissant pas les transformations 3D ne verront pas le dos doré
ni l'effet de retournement, mais juste un glissement de la carte vers la droite. Les autres
animations seront visibles.

<style>
#transition{
position: relative;
margin: 20px auto;
width: 336px;
height: 250px;
border: 1px dotted;
-webkit-perspective-origin: 50% 50% 84px;
-webkit-perspective: 500px;
-ms-perspective-origin: 50% 50% 84px;
-ms-perspective: 500px;
perspective-origin: 50% 50% 84px;
perspective: 500px;
}
- 75 -

#transition div{
transition: all 1s;
position: absolute;
width: 168px;
height: 250px;
-webkit-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
#transition .dos{
background-color: gold;
left: 0;
}
#transition .carte{
background-image: url(carte.png);
left: 0;
}
#transition .delayed{
transition: all 1s;
border-radius: 0;
background-color: #F5F2F0;
line-height: 250px;
text-align: center;
font-weight: bold;
opacity: 0;
overflow: hidden;
}
#transition:hover .dos{
transition: all 1s;
left: 168px;
}
#transition:hover .carte{
transition: all 1s;
left: 168px;
}
#transition:hover .delayed{
transition: opacity 1s 1s, border-radius 500ms 2s, box-shadow 500ms cubic-
bezier(0.75, 0.25, 0.75, 0.5) 1.5s, text-shadow 500ms linear 2s, color 500ms linear 2s;
opacity: 1;
border-radius: 50%;
box-shadow: inset 0 0 5px 2px black;
text-shadow: 1px 1px 2px black, 0 0 1em gold, 0 0 0.2em gold;
color: white;
}
</style>
<div id="transition">
<div class="delayed">Voici ma carte !</div>
<div class="dos"></div>
<div class="carte"></div>
</div>
VII-C - Propriétés d'animation
Les animations CSS permettent de modifier certaines propriétés CSS d'un ou plusieurs éléments dans le temps.
Elles se composent de deux éléments : une description de l'animation sous forme d'expression CSS (at-rule) et des
propriétés applicables à un (ou plusieurs) élément sur lequel doit s'effectuer l'animation.
Si les propriétés sont appliquées à des sélecteurs (donc à des éléments), la description est, elle, indépendante dans
le code CSS.
- 76 -
Il existe plusieurs différences notables entre une transition et une animation CSS.
Une transition est déclenchée lorsqu'une propriété CSS est modifiée alors qu'une animation
va modifier elle-même une propriété selon des règles déterminées.
En dehors des fonctione transition, une transition n'est pas paramétrable alors qu'une
animation permet de définir des étapes-clés.
Une transition nécessite une action (soit de la part de l'utilisateur, soit avec un script
JavaScript) pour être déclenchée, ce qui n'est pas forcément le cas d'une animation.
Une transition ne s'exécute qu'une fois par changement d'état alors qu'une animation peut
être répétée.
VII-C-1 - Étapes de l'animation | @keyframes
@keyframes : indique les différentes étapes de l'animation et la valeur de chaque propriété pour cette étape.
Syntaxe :
@keyframes <identifiant>{
[[ from | to | <pourcentage> ] [, from | to | <pourcentage> ]* bloc ]*
}
Compatibilité : IE 10+, FF 5+, Chrome, Safari 4+, Opera 12+
Version CSS : 3
Explications.
La syntaxe de l'expression CSS @keyframes est un peu particulière.

On commence avec le mot-clé @keyframes (éventuellement préfixé, voir les exemples) suivi du nom souhaité pour
l'animation (<identifiant>), il servira à appeler cette animation pour un sélecteur. On ouvre ensuite un bloc (à l'aide
d'accolades {}) pour définir les différentes étapes de l'animation.
Chaque étape débute par une valeur (from, to ou pourcentage) suivie d'un nouveau bloc.
Ces blocs contiendront les différentes propriétés à animer et leur valeur à cette étape de l'animation.
Les déclarations @keyframes ne sont pas liées à un sélecteur et se trouvent donc en dehors des déclarations de
styles liées à ceux-ci.
Notes.
Pour être valide, l'animation doit au moins comprendre les étapes from (ou 0%, la valeur 0 n'est pas valide) et to ( ou
100%), si l'une (ou les deux) manque, le navigateur devra la créer en utilisant les valeurs calculées des propriétés
devant être animées.
Les propriétés non animables ou les étapes hors de la plage [0% 100%] sont ignorées.
Si une propriété n'est pas déclarée à une étape (ou si sa déclaration n'est pas valide), l'animation pour cette propriété
se fera comme si cette étape n'existait pas.
Si une animation est déclarée plusieurs fois, seule la dernière déclaration est prise en compte, il n'y a pas de notion
de cascade pour @keyframes.
Si une étape est déclarée plusieurs fois, seule la dernière déclaration est utilisée, cependant, certains navigateurs
ont mis en place un système de cascade non prévu par la spécification.
Il n'y a pas d'obligation à déclarer les étapes dans l'ordre chronologique.
- 77 -
Il est possible de grouper plusieurs étapes dont les valeurs seraient identiques en les séparant par des virgules.
Exemples :
@keyframes clignote{
from, 100%{
color: red;
}
50%{
color: blue;
}
}
@-moz-keyframes bouge{
from{
left: 0%;
}
75%{
left: 90%;
}
50%{
left: 80%;
}
to{
left: 100%;
}
}
@-webkit-keyframes bordure{
50%{
border-width: 10px;
}
}
@keyframes erreur{
from{
border-radius: 0;
}
100%{
}
to{
/* Cette déclaration vide est supposée écraser la précédente
qui correspond à la même étape : aucune animation ne sera visible.
Firefox contourne la spécification et
utilise la cascade, rendant l'animation visible. */
}
}
VII-C-2 - Nom de l'animation | animation-name
animation-name : indique le nom de l'animation à utiliser.
Syntaxe : none | <nom>#
Version CSS : 3
Note : un nom valide doit commencer par une lettre ou un tiret (mais pas deux) suivi d'une lettre puis les caractères
de la classe [-_0-9a-zA-Z].
Exemples :
animation-name: foo;
- 78 -
animation-name: foo1_bar;
animation-name: -Foo-Bar2;
animation-name: foo, bar;
VII-C-3 - Durée de l'animation | animation-duration
animation-duration : permet de définir la durée de l'animation.
Syntaxe : <duree>
Version CSS : 3
Notes.
Une durée de 0s indique qu'aucun effet ne sera appliqué.
différentes propriétés listées dans animation-name.
Exemples :
animation-duration: 2s;
animation-duration: 250ms;
animation-duration: 2s, 250ms, 120ms;
VII-C-4 - Effet de l'animation | animation-timing-function
animation-timing-function : permet d'assouplir l'animation selon une fonction dite d'easing.
Syntaxe : <effet>[, <effet>]*
Valeurs possibles : linear, ease (valeur par défaut), ease-in, ease-out, ease-in-out, step-start, step-end, cubic-
bezier(x1, y1, x2, y2), steps(nb_pas, start|end).
Version CSS : 3
Complément d'information : Easing Functions - Guide de référence.
Notes.
Pour la fonction cubic-bezier(), x1, y1, x2 et y2 correspondent à des nombres (x1 et x2 doivent être compris entre
0 et 1) qui vont définir une courbe de Bézier.
Pour la fonction steps(), des états intermédiaires (le nombre de pas) seront affichés à intervalles de temps réguliers,
start et end indiquent si le nouvel état doit être affiché au début ou à la fin de l'intervalle.
Il est possible d'indiquer plusieurs effets (séparés par des virgules), dans ce cas, ils correspondront aux différentes
animations listées dans animation-name dans le même ordre ; s'il y a plus de propriétés que d'effets, le navigateur
revient au début de la liste pour compléter, s'il y a plus d'effets, les derniers sont ignorés.
- 79 -
La fonction définie s'applique à chaque intervalle de l'animation et non à l'ensemble de

l'animation.
Toutefois, il est possible d'indiquer une valeur de animation-timing-function dans un intervalle

de @keyframes, dans ce cas, c'est cette fonction qui sera utilisée pour cet intervalle.
Exemples :
animation-timing-function: linear;
animation-timing-function: step(4, end);
animation-timing-function: cubic-bezier(0.25, -0.8, 0.75, 2);
animation-timing-function: ease-in, step-start, cubic-bezier(0.2, 1.75, 0.8, 0.75);
@keyframes{
...
50%{
...
animation-timing-function: linear;
}
...
}
VII-C-5 - Délai de l'animation | animation-delay
animation-delay : permet d'indiquer un délai avant de démarrer une animation.
Syntaxe : initial | <duree>
Version CSS : 3
Notes.
Une valeur de 0s ou initial indique que la transition sera appliquée immédiatement.
Il est possible d'indiquer une valeur négative, dans ce cas, l'animation débutera aussitôt, mais au point où elle aurait
dû être si elle avait commencé au moment indiqué par le délai négatif.
Exemples :
animation-delay: 2s;
animation-delay: -250ms;
animation-delay: 2s, 250ms, 120ms;
animation-delay: initial;
VII-C-6 - Itérations de l'animation | animation-iteration-count
animation-iteration-count : détermine le nombre de répétitions de l'animation.
Syntaxe : infinite | <nombre>
- 80 -
Version CSS : 3
Notes.
La valeur infinite indique que l'animation sera répétée indéfiniment.
Les valeurs négatives ne sont pas valides.
Il est possible d'indiquer un nombre non entier. Dans ce cas, la dernière répétition sera incomplète en proportion de
la partie décimale (par exemple, la valeur 0.5 montrera la moitié de l'animation.
Exemples :
animation-iteration-count: infinite;
animation-iteration-count: 5;
animation-iteration-count: 2.5;
VII-C-7 - Sens de l'animation | animation-direction
animation-direction : permet de définir le sens de l'animation suivant les répétitions.
Syntaxe : normal | reverse | alternate | alternate-reverse
Version CSS : 3
Explications.
normal : l'animation sera jouée selon le sens prévu. reverse : l'animation sera jouée à l'envers (à partir de la fin).
alternate : l'animation se fera de façon alternée à chaque itération. alternate-reverse : l'animation se fera de façon
alternée à chaque itération, mais en commençant à l'envers.
Exemples :
animation-direction: alternate;
animation-direction: alternate, alternate-reverse;
VII-C-8 - État de l'animation | animation-play-state
animation-play-state : détermine si l'animation est en pause ou non.
Syntaxe : running | paused
Version CSS : 3
Explications.
Cette propriété permet de savoir ou d'indiquer si une animation est en cours d'exécution (running) ou en pause
(paused).
Il est possible d'interroger cet état (par exemple en JavaScript : AnimatedElement.animationPlayState) pour connaitre
son état actuel.
- 81 -
Lorsqu'une animation en pause redémarre, elle le fait au point où elle s'était arrêtée.
Exemples :
animation-play-state: running;
animation-play-state: paused;
VII-C-9 - Style de l'élément hors animation | animation-fill-mode
animation-fill-mode : indique quelles propriétés CSS sont applicables avant et après l'animation.
Syntaxe : none | backwards | forwards | both
Version CSS : 3
Explications.
Par défaut, une animation ne modifie pas les propriétés de l'élément auquel elle s'applique entre le moment où elle
est définie et le moment où elle démarre (donc pendant la période de animation-delay), ni après son exécution.
Il est possible de modifier ce comportement avec la propriété animation-fill-mode.
Si la valeur backwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du premier pas de
l'animation durant la période animation-delay. Ce premier pas est déterminé en fonction de la propriété animation-
direction : si l'animation commence à l'endroit (valeurs normal ou alternate), il s'agit des valeurs CSS de from (ou 0%),
si l'animation commence à l'envers (valeurs reverse ou alternate-reverse), il s'agit des valeurs CSS de to (ou 100%).
Si la valeur forwards est appliquée, les propriétés CSS de l'élément prendront les valeurs du dernier pas de l'animation
après l'exécution de celle-ci selon les mêmes règles concernant animation-direction.
Si la valeur both est indiquée, les règles concernant backwards et forwards seront appliquées avant et après
l'animation.
Exemple :
animation-play-state: both;
VII-C-10 - L'animation tout-en-un | animation
animation : regroupe toutes les propriétés d'animation.
Syntaxe : <animation-name> || <animation-duration> || <animation-timing-function> || <animation-delay> ||

<animation-iteration-count> || <animation-direction> || <animation-fill-mode> || <animation-play-state>
Version CSS : 3
Note : en dehors du nom, toutes les valeurs sont optionnelles et l'ordre n'importe pas sauf pour les durées : la
première durée sera toujours interprétée comme animation-duration et la seconde comme animation-delay.
Exemple :
animation: aller_retour 2s ease-in-out infinite alternate;
- 82 -
VII-C-11 - Exemple récapitulatif
L'exemple suivant vous montre la mise en œuvre de certaines fonctionnalités d'animation.
Pour activer l'animation, il faut survoler le cadre pointillé (activation de la propriété animation-play-state). Une fois
l'animation lancée (et tant que la souris survole le cadre pointillé), un carré se déplace de gauche à droite puis de
droite à gauche en effectuant une rotation et en diminuant son opacité.
Au milieu de l'animation (50%), on modifie la fonction d'easing (step-start) pour les propriété concernées par cette
étape (opacity et transform) et leur modification se fera en une seule fois au début de cet intervalle (non visible pour
transform).
Vous pouvez modifier avec les listes déroulantes les valeurs de animation-duration et animation-direction.
Tous les navigateurs ne permettent pas la modification individuelle des propriétés de

l'animation, les listes déroulantes seront sans effet avec ces navigateurs.
L'exemple est susceptible de boguer avec Internet Explorer qui implémente encore mal
l'utilisation de animation-timing-function dans @keyframes.
L'utilisation de la propriété -webkit-transform dans la version non préfixée de @keyframes

pourra sembler inutile. Elle est due au fait que Chrome reconnait @keyframes (mais
étonnamment pas encore animation-*) alors qu'Opera, qui utilise le moteur webkit depuis la
version 15, demande la version préfixée @-webkit-keyframes.
Voir le code de l'exemple initial

<style>
#animation-controles{
position: relative;
margin: 20px auto;
text-align: center;
width: 90%;
max-width: 600px;
}
#animation{
position: relative;
margin: 20px auto;
text-align: center;
width: 90%;
max-width: 600px;
height: 70px;
line-height: 70px;
border: 1px dotted;
overflow: hidden;
}
#animated{
width: 50px;
height: 50px;
background-color: #FF0000;
position: absolute;
top: 10px;
-webkit-animation: aller_retour 2s ease-in-out infinite alternate;
animation: aller_retour 2s ease-in-out infinite alternate;
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
#animation:hover #animated{
-webkit-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes aller_retour{
from{
- 83 -
Voir le code de l'exemple initial

margin-left: -50px;
}
50%{
opacity: 0.2;
-webkit-transform: rotate(180deg);
-webkit-animation-timing-function: step-start;
}
to{
margin-left: 100%;
}
}
@keyframes aller_retour{
from{
margin-left: -50px;
}
50%{
opacity: 0.2;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
animation-timing-function: step-start;
}
to{
margin-left: 100%;
}
}
</style>
<div id="animation">Survoler ce cadre pour démarrer l'animation
<div id="animated"></div>
</div>
- 84 -

Glossaire Css

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Glossaire Css

Transféré par

Droits d'auteur :

Formats disponibles

Glossaire des propriétés CSS

Par Torgar - Didier Mouronval

Date de publication : 14 août 2012

Dernière mise à jour : 6 décembre 2013

• Les informations de compatibilité sont données à titre d'information et sont soumises

Participez à l'enrichissement de ce glossaire.

En complément sur Developpez.com

Utilisation des préfixes navigateurs............................................................................................................................. 5

II-E-3 - Type de contour | outline-style........................................................................................................... 40

VII-C-1 - Étapes de l'animation | @keyframes............................................................................................... 77

Utilisation des préfixes navigateurs

CSS 3 apporte de nombreuses nouvelles fonctionnalités qui sont implémentées au fur et à

L'implémentation d'une nouvelle fonctionnalité se fait en plusieurs étapes. La dernière

Les principaux préfixes utilisés sont :

• -moz- (Firefox et dérivés) ;

var $element = document.getElementById('element');

Complément d'information : Liste des propriétés CSS préfixées.

I - Propriétés de mise en forme de texte

I-A - Mise en forme de la police

I-A-1 - Nom de police | font-family

font-family : permet d'indiquer les noms de polices par ordre de préférence.

Syntaxe : [[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]* ] | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

font-family: "Arial Black", Arial, Verdana, serif;

il est possible d'utiliser des polices personnalisées en combinaison avec @font-face ;

I-A-2 - Police personnalisée | @font-face

Compatibilité : IE 9+, FF 3.5+, Chrome 0.2+, Safari 3.1+, Opera N/C

Version CSS : 2.1

I-A-3 - Taille du texte | font-size

Syntaxe : <absolute-size> | <relative-size> | <length> | <percentage> | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

I-A-4 - Gras | font-weight

font-weight : permet de définir l'épaisseur de la police de caractères.

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

font-weight: bold; /* gras */

I-A-5 - Petites capitales | font-variant

font-variant : met le texte en petites capitales.

Syntaxe : normal | small-caps | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

font-variant: small-caps; /* petites capitales */

I-A-6 - Petites capitales | font-variant

font-variant : met le texte en petites capitales.

Syntaxe : normal | small-caps | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.2+, Opera 6+

font-variant: small-caps; /* petites capitales */

I-A-7 - Italique | font-style

font-style : permet de mettre un texte en italique.

Syntaxe : normal | italic | oblique | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

font-style: italic; /* italique (forcément !) */

I-A-8 - La police tout-en-un | font

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

font: bold 16px Arial;

I-B - Mise en forme des paragraphes

I-B-1 - Alignement horizontal | text-align

text-align : aligne un texte horizontalement.

Syntaxe : left | right | center | justify | inherit

Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

text-align: left; /* à gauche (par défaut) */

I-B-2 - Dernière ligne | text-align-last

Cette propriété peut nécessiter l'utilisation des préfixes vendeurs.

text-align-last : aligne la dernière ligne d'un texte horizontalement.

Syntaxe : auto | start | end | left | right | center | justify

Compatibilité : IE 5.5+, FF 12.0+, Chrome, Safari, Opera