Glossaire des propriétés 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.
Syntaxe : <length> | <percentage> | auto | inherit
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 -

Glossaire des propriétés CSS

Glossaire des propriétés CSS

Recommandé

Recommandé

Contenu connexe

Similaire à Glossaire des propriétés CSS

Similaire à Glossaire des propriétés CSS (20)

Plus de saqrjareh

Plus de saqrjareh (7)

Glossaire des propriétés CSS