Glossaire des propriétés CSS

(1)

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.

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 »

(2)

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... 9

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... 22

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... 27

II-C-5 - Espacement tout-en-un | padding...28

II-D - Bordures...29

II-D-1 - Épaisseur de la bordure | border-width*... 29

II-D-2 - Couleur de la bordure | border-color*... 30

II-D-3 - Type de bordure | border-style*... 31

II-D-4 - Bordure à gauche | border-left*... 33

II-D-5 - Bordure en haut | border-top*...34

II-D-6 - Bordure à droite | border-right*...34

II-D-7 - Bordure en bas | border-bottom*... 35

II-D-8 - Bordure tout-en-un | border*... 35

II-D-9 - Bordure arrondie | border-radius...36

II-D-10 - Ombre | box-shadow...36

II-E - Contours... 38

II-E-1 - Épaisseur du contour | outline-width...39

II-E-2 - Couleur du contour | outline-color...39

(3)

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

II-E-4 - Décalage du contour | outline-offset... 40

II-E-5 - Contour tout-en-un | outline... 40

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...42

III-B-3 - Répétition du fond | background-repeat...43

III-B-4 - Position du fond | background-position...44

III-B-5 - Fond tout-en-un | background...45

III-B-6 - Transparence | opacity... 46

IV - Propriétés des listes... 46

IV-A - Type de liste | list-style-type...46

IV-B - Position en retrait | list-style-position...47

IV-C - Puce personnalisée | list-style-image...48

IV-D - Liste tout-en-un | list-style... 49

V - Propriétés de mise en forme des tableaux... 49

V-A - Type de bordure | border-collapse... 49

V-B - Cellules vides | empty-cells...50

V-C - Position du titre | caption-side...51

V-D - Affichage des cellules | table-layout...52

V-E - Espacement des cellules | border-spacing...53

VI - Propriétés d'affichage et de positionnement... 54

VI-A - Affichage... 54

VI-A-1 - Type d'élément | display... 54

VI-A-2 - Affichage | visibility...55

VI-A-3 - Afficher seulement une partie | clip... 56

VI-A-4 - Limiter les dimensions | overflow...57

VI-B - Positionnement... 58

VI-B-1 - Flottant | float... 58

VI-B-2 - Stopper un flottant | clear... 59

VI-B-3 - Type de positionnement | position... 60

VI-B-4 - Position par rapport aux coins | top bottom left right...61

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... 63

VII-A-1 - Origine de la transformation | transform-origin... 63

VII-A-2 - Perspective 3D | perspective... 64

VII-A-3 - Origine de la perspective | perspective-origin... 65

VII-A-4 - Fonctions de transformation | transform... 65

Translation | translate()...66

Rotation | rotate()...66

Redimensionnement | scale()...67

Distorsion | skew()... 67

Transformation matricielle | matrix()...68

VII-A-5 - Face arrière | backface-visibility...69

VII-A-6 - Héritage 3D | transform-style...69

VII-A-7 - Exemple de transformation 3D... 70

VII-B - Propriétés de transition...71

VII-B-1 - Nom de propriété(s) | transition-property...72

VII-B-2 - Durée de transition | transition-duration...72

VII-B-3 - Effet de transition | transition-timing-function...73

VII-B-4 - Délai de démarrage | transition-delay...73

VII-B-5 - La transition tout-en-un | transition... 74

VII-B-6 - Exemple récapitulatif...74

VII-C - Propriétés d'animation... 75

(4)

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

VII-C-2 - Nom de l'animation | animation-name... 77

VII-C-3 - Durée de l'animation | animation-duration...78

VII-C-4 - Effet de l'animation | animation-timing-function... 78

VII-C-5 - Délai de l'animation | animation-delay...79

VII-C-6 - Itérations de l'animation | animation-iteration-count... 79

VII-C-7 - Sens de l'animation | animation-direction...80

VII-C-8 - État de l'animation | animation-play-state...80

VII-C-9 - Style de l'élément hors animation | animation-fill-mode... 81

VII-C-10 - L'animation tout-en-un | animation... 81

VII-C-11 - Exemple récapitulatif... 81

(5)

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é la syntaxe 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;

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

(6)

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 :

.font-fam {

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

}

</style>

<p class="font-fam">Lorem ipsum dolore sit amet, consectetur adipisicing elit</p>

(7)

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 Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Version CSS : 1

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 */

(8)

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 Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

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

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

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>

(9)

Voir la source

<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>

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.

(10)

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;

width: 50%;

}

.t-align-right { text-align: right;

width: 50%;

(11)

}

.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.

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 :

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

(12)

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 eiusmod tempor incididunt ut labore

<p class="t-align-last-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

<p class="t-align-last-right">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

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.

Version CSS : 1

vertical-align: top; /* en haut */

vertical-align: middle; /* au milieu */

vertical-align: bottom; /* en bas */

(13)

Voir source

<table>

<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 Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

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) */

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>

(14)

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 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-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 Compatibilité : IE 5+, FF 1.0+, Chrome 0.2+, Safari 1.0+, Opera 6+

Version CSS : 1

line-height: 30px;

line-height: 20%;

Voir la source

.line-height1 {

}

.line-height2 {

line-height: 30px;

}

.line-height3 {

(15)

Voir la source

line-height: 200%;

}

</style>

<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.

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%;

}

</style>

Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet. Lorem ipsum dolore sit amet.

Lorem ipsum dolore sit amet.

</p>

(16)

Voir la source

</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

text-shadow: 2px 2px 4px red;

Voir la source

(17)

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.

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>

(18)

Voir la source

<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 ;

Voir la source

.height {

width: 200px;

(19)

Voir la source

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

max-width: 50px;

Voir la source

.max-w {

max-width: 50px;

(20)

Voir la source

}

</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.

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

max-height: 20px;

Voir la source

.max-h {

max-height: 20px;

width: 50%;

(21)

Voir la source

}

</style>

<p class="max-h">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</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

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-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 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 class="m-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

</div>

(22)

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 propriété (px, %, em). Les valeurs négatives sont autorisées.

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-left2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

<div class="m-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

</div>

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 propriété (px, %, em). Les valeurs négatives sont autorisées.

(23)

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-right2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

<div class="m-right3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

</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 propriété (px, %, em). Les valeurs négatives sont autorisées.

Version CSS : 1

Margin-bottom : 20px ;

(24)

Voir la source

.m-bottom1 {

width: 800px;

}

.m-bottom2 {

}

.m-bottom3 {

}

</style>

<div class="m-bottom2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

<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 ;

• 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;

(25)

Voir la source

}

.margin2 {

}

.margin3 {

margin: 20px 5px;

}

.margin4 {

}

</style>

<div class="margin2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

</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.

Syntaxe : <padding-width> | inherit

Version CSS : 1

padding-top: 20px;

Voir la source

.p-top1 {

width: 800px;

}

.p-top2 {

(26)

Voir la source

padding-top: 20px;

}

.p-top3 {

}

</style>

<div style="p-top3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

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-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 cette propriété (px, %, em). Les valeurs négatives sont autorisées.

Syntaxe : <padding-width> | inherit

Version CSS : 1

padding-left: 20px;

Voir la source

.p-left1 {

width: 800px;

}

.p-left2 {

padding-left: 20px;

}

.p-left3 {

}

</style>

<div class="p-left3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore

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>