1. top
bonom
caption-side leh
fig ht
inheril
Ce lte propr iete i ndi q ue a u va se pl ac er 10 bo ife d e lagende [bolise
<caption:» par rapport ci 1 tobl e.
0
oulO
table-layout: fixed
Inherit
La pro priete table-layout co nlr6 1 I' alg o rithme emplo ye po ur 1 dis po sition
e 0
des cellules, des ra ngaes et des colo nnes de 1 lab Ie.
0
Cf. hllp:// www .yoyodesign.or g/doc/w3c/css2/lables.html#wid th.layou t
collapse
border-collapse : seporote
inherit
Determ ine Ie choix du modele de bo rd ures d 'un ta bl eau bo rdures Ill­
slo nnees [collopse] au bordures sepcrees (separate).
bo rd e r-co llapse : se para te ba rd
- _. ~ ~ . -_ II -. - - . - ­ II ·· r­ -
.. ··
Cellule C.nule Cellul, Cl llul< CeBuIe CeUule
Co1ll~e CeIIul, Cellule Cellul< Collule Cell le
u
C, llule Ce1hJJe C. U
,d. CeI!uIe CeUu!e Cellule
bor der-spaclng .
'
.
longueur
inherit
Determ ine 10 d istance qu i sepore les bo rd ures d es cellulas adjacenle5.
show
empty-cells : hide
inherit
Ind ique 51 les bordure s do iven t etTe alfich aes (shawl o u non (h'del pour les
cellules vides de co menu,
baseline
lap
vertical-al ign bottom
middle
inherit
Appliq uee aune cellule d e tab lea u «Id:» au ci un elemenl d e type tcble­
cell, cette propriete d efinit I'a lig nement vertical du con tenu dans I'element
~ ~

2. Propriete s du media vocal
Le media aural [devenu speech depuis C55 2 .1) permel de specifier
des proprietes de reslitulion por synthese vocale : type de vo i x [voic....
family) . origine du son (azlmuthl . di recti on (elevoli on), vo lume (volume).
pauses (pause-before, pouse-cher], limb re [pltch] et po rtee de 1 voix (rich.
0
ness], prononcialion (spook. speck-nomerol, speck .penc tuctioo], etc .
Not, Les p roprie res C55 de ces d ivers med ia s - hor mis screen et prinl ­
sont Iras mal irnp lernentees pa r les sup po rts ex isten ts Inavi ga leurs. syn· AmNnoN Lo p lupa r! des na vig a teurs. excepte O pa l a 8, ne reca nnais senl
the ses vocole s, e tc .], Le med ia ha nd held prevu pour les suppons mobil es pas Ie ma iorit e de ces pro prieres.
esl encore peu p ris en cha rg e par les na vig a leurs na til s de telap ho nes.
Determiner Ie media
Exem pl es em p loyont 10 balise dink>
type
pasilion
list-style : uri (image)
Exemples employanl 10 proprie te C552 @im porl inheri t
Ce lie proprieta est 10 forme cond ensee des proprieles individuelles list-styl...
type. lisl-Style-po sitlon et liSl·style-lmage
II est possible de comb iner 10 vc leur typo et uri/image}. Dans ce co s, Ie type
cho isi sera allich a en cas de non dispanibi lite de "image.
Prop rie te s de sortie imprima nte (print)
none
@page : (proprie /6s .1 list-style-image : urllimogeJ
inherit
La propriete C5S2 @page perm ot d' erobllr les regl es d e mise en page av, Designe I'image qu i sera affi chee comma marqueur (puce) d';,I;,ment de liste.
les proprletes decrlres ci -dessous
disc lower-olpha
longueur h,rogona
d rd e lower-la tin
au to katakana
square upper-olpho
size par lrai t
• decima l upper-lotin
h,rogono.
landscape
iroho
inherit; list-style-type dec i~o l. hebrew kata kono­
leadlng·zero armenian iroha
Definit 10 taille et l'onentofion lpar tralt au poysoqe] d e 10 page imp rimee . l.o lower -rcmcn georgian none
la,lIe comprend dons l'e rdre 1 largeur et 10 hau teur seporees par un e spo ce,
0 upper -rorncn cik.ldeogrc. inherit
lower-g",..k phic
crop
cross Dellnlll'a spect du marqueur [puce) d ';, lemenl de lisre, Lor sque 10 valeu r est
mar ks none none, euc une puce n'cppcrolt , Lorsque 10 proprieh~ lisl·style-image est deli.
inheri' ; nie, cane derni;,re rem piece Ie propriete Iist·style-typo.
Hirondelles [reperes imprirnes sur 1 page
0 pour en fociliter Ie co upe], inside
auto list-style-position: outside
always inheril
page-break-before a void
page-break-ofter left
lndi que ['ernplocement de 10 puce por ropr.0rl C 10 lisle l.o veleur inside
page.break.inside p lace 1 p uce dans 10 liste, Ie reste de eel e-ci s' ocou lant au taur de ceue
0
right
inhen t; c
puce (eq uiva le nt un posilionnement nallanl 6 gauchel . La voleur outside
xclu t 10 pu ce du ca nlenu de lisre.
Impose un saut de page evanl (beforel , cpres lafter) au dens (inside) I'ele­
menI designe
en,ier Chez Ie rnerne editeur.. .
orp hans : inherll CSS2 - Pratique du design web. 3" eel. ~%' ~cn
U".::r = N
NU" _~
R GnulU
~; lY
Evite les orphelines llignes isol es SUI leur page cor ne lena nt pas sur 1 page
e 0 'Itento XHTMI., 2' ed. R oe
,
.. ~ ---~ ~
Ito Cek. S. GAUOCR
preceden le) en dOlinissont un nambre minimum de lignll$ par page Imp ri mee .
to Excel. M. B RGAMf
I' ~~==_
...... 00
N ~
0,
ent;er Ito Firelo", et Thunderbird. M_GIlf'Y :C,..... = =N Z
,~ O = =N ~
widows rnherit; .to Moe os X. G. Get' '" .. = a:> .g
Ito Uni,vLinw<. l, HL.I1IIAI. ' -g~ - "" ~
Ito Lou, C. JACO.E1
u ~ ---en .5
Evite les lig nes veuves en precisont un nombre d e lignes avan t Ie $Oul de page. I
~ ~~ I~ ~~
5€

3. div: l a n g (fr) {} long de slg ne tour elemenl <div> qUi ern­
p lole une la ng ue desig nee, icl Ie [roncc ls.
div[c1ass] {} designe toul elemen t <div> qUI pOS­
se de un a tlri but closs
dlv [c lass = ' ma C/a sse"] {} desi gne toul
element <div> qui po ssede un attribul class ayant pour va leur maC/osse
div[c1ass- = "maC/osse1 {} designe to ut element
<div> qui possed e un oll rlbul cla ss a yon l plu sieur s va leurs se porees
par des e spoces el don i I'u ne d' entre-ell s est moClosse
e
d iv [ closs I = ' moC/osse' ] {} de slqne tau I element
<div> qui possede un o ttribul closs ayo nl plusieurs va leurs seporees par
d es lirels el do ni 10 p rem iere esl maClosse.
div: f i r st - eh i l d {} desi gne Ie 1,- enfon l de I'elemen t
<div>
nnenr un "Iemenl de div: f i f s t- l i n e II s'opplique a1
0 ligne de I'ele.
menl <dlv>
<l'naD> <oblec1> <.serlpl> div: f i r s t-Ie tte r {} d esign e la lerrre de texle d e
l' elernent <div>
SelecteufS
NOTt Dans cette lisle, les selecteu rs div el span sonl ciles ci tilre d'e xemple. II IE6 ne reco nnai t ni les selecteurs d 'enlcnts, nl eeux d'elemenls odp
lis represen tent les bolises HTML <div> el <spon> mais peuvenl eire rem­ cents, nl ceux po r c nributs (ee bogue sera peu t-etre co rrige d ans IE I I.
ploces par d 'o utres bolises. !mEl
• {} designe reus les elements d iv p:l a st· ch il d 1I selectionne Ie dernier pa rographe des elements div
div {} designe la bollse <dlv> d iv p:n t h -ch il d(2) {} selectionne Ie 2' parogrophe de s elemenls d lv
.maC/asse II designe les elements ayan l recu 10 dlv: n o t l[c1ass= ' moC/osse 11 (} ne select ienne pas les div doni
c1ass-'maClosse' I'otl ribul closs est maC/asse
div.maC/osse II designe les elemen ts <div> ayonl d iv[c1oss" ='moCfosse1 11 selection ne tout elemenl div don i 1 valeur
de J 'ottribul closs commence par moC/osse
0
recu la doss.· moC/a....•
d iv[c1oss$ = ' maC/osse 1 {} selectionne to ut element div doni 1 valeur
0
# mon/d {} designe I'element unique ayant recu
de "otlribut eloss lini l pa r moC/osse
Id. 'monld
d iv[c1ass· = ·moC/oss e1 {} selection ne loul elemenl div don t 1 valeur
0
div #monld II deslgne I'element <div> ayanl de I'otlribu l closs contienl 10 choine moC/osse
recu id='monld'
div span element II
design e les elements co ntenus da ns un
elemen l <span> lul-rnerne con tenu dons des ele ments <div>
dlv, sport, element II de signe les elements <diY>, les
elemen ts <spon>, el les elemen ls <el""",nl>
M oyen mnerno lec hn ique : "Iove H ale"
d iv + span {} desi gne lOU I alemen t <spon> imme­
dialemen l precede par un eleme nl <div>
Unites de veleurs
div > spon II designe to ul elemen t <SpO directe­
il> o inutile de preciser une un ite pour 10 voleur ze ro (01
ment enlcnr de I'element <dlv>
em centimetres
a :link visited II designe Ie lien <0> no n visite em cadrotin . Unite relorlve : 1em correspond a
10 /oille de texte
[link] au deja visile [visited] haut eur de 10 letlre majusc ule M de I'element porent.
elemenr.active hover locus {} au elemen' peul eire rou te bolise au ex unite relot ive . 1ex co rrespond a10 io llle de texle la rg eur de 10
classe lell re x de I'element parent.
in inches . mm mtll lrnetres .
pc p icas. pI points picas co nsel lles po ur Ie medi a impr ima nle .
nlrp Ie momenl au I' uillisa ieul plesse Ie bouton de 1 saulis
0
px pixels d 'ecron . II Unile flgee sur IE pos d 'ograndlssement
I'll Ie reliic llE
I'elampnt esl survale
0.75
i
U2
-;Il-
9
,:.
ZLZ
oaJ
~..
7>
,,..
quand un element rec;o ll I'a ttenlion, que ce soil au claVier au
d'oulres formes d' enlrees de leXle 7>
IIJ j usqu'ci so vers ion 6 co mp rise , ne reco nnoit 10 p seud o .
c10sse que sl elle esl oppliquee sur Ie sillecleur de 10 bol ise plQlP<)
"5<1
1 · Ifdt ( ,, )
~ ~~~ r~ ~ ~~~

4. none
tex t-d ecora tion :
letter-spacing " underlone
overline
font-
slze "]
IQ1U line-through
Determ ine Ie wulignemen t au Ie surlignemenl de I'lliemeni. Un texte peut
iHre soul/gne, surllg na, ba rre . II esl possib le de cumu ler les vo leurs.
flam dopo/<e' leH
font-family : generj" u~ rig ht
(scn..... . lf" nl.n, text-align center
justify
Permet de cho isir 1 pol ico oppllq«
0 inherit
d 'ind iq ue r plusleurs velour s par o ,d "
DeFinil l'o ll9 nemenl du tex te dans un ele menl.
polices co ntenont des espoc os sont l) pk" eu
none
taille capita lize
font-size : poummlog text-tra nsfo rm uppercase
low erca se
Determine 10 ta ill e de palice d Ol I'/II.." Inherit
em, ex et % ol in de preserver 10 l1u"JII
M ise en majuscule au en minuscule du texre. La va leur capi talize offich e les
premieres lellres en majus cule . uppercase offiche to utes les lenres en me­
couleur rgbf}
[uscules el lowercase a Hiche toutes les letlres en minuscu les.
cOlIleur /JC)(a
color mo/·de (silver I IU5Ch io I"'''')'I lOr, I
valeur
transparent
mherit
text-indent : pourre nloge
Applique une couleur de polico au 111, 1 0/.. I ~I" ,
..
lelle de 16 couleurs de base (blo<: Determine 10 valeur de I' a lineo (relrai l de 1 premiere Iig ne de texte]
0
est prise en charge pos l'en sembb
La polelle elergie (256 couleurs] normal
des {antlquewhile, chocolate, oliv. , nombre
line-height : longueur
pourcenloge
normal
inherit
italic
font-style : oblique Precise 10 hauleur de ligne de texle . A ne pos conlondre avec les merges
Inherit enlre chaque paragraphe.
Determine I'o riento lio n de police il"II' l' I' normal
[penche " gauche sl 10 po lice est pr uvt' " J
letter-spaci ng : !ongu.eur
inheri!
mots·des (botd l b"lclntl l'''''''' III
font-weight : voleu: numon
'flu" Precise I'espace entre cheque lellre de texle. Une valeur neg at ive est cu­
tori see olin de ropprocher les lell res
Choisil 10 groisse de police dons "6111"'"n ' ,n
Ihickl el les va leurs numeriqvas 11 00, 200 ,,' normal
I'ensemble des novigaleurs II est pm l..",,,, word-spocinq : !ongueur
mots-des bold, bolder el normal. ",henl
normal Precise l'espoce entre choque mol . Une vo leur negative est outorisee olin
font-variant small<:aps de rcpprocher les mots.
te xt -Indent
I
I- margin -top
1
-- IIne -helght
L margln­
I bo tto m
~ ~ ~ ~

5. Applicables a tous les elements, de type bloc comme en-liqne. Applicobles a tous les eleme nts, de type bloc comme en-ligne.
NOTt II est preferab le de ne po s les a ppliquer a ux elements en-lign e car couleur
ce ux-ci, en reg ie gene rale , ne permenent pos d'elre dimensionnes, uri(image)
rope /ilion
epo;sseur
background al10Chement
position
border : :::'7eur inheril
Inherit bockground est 10 forme co nden ses des propriellls expliq uees cl-op res bock.
Peul cantenir les dilferentes valeurs d'epaisseur IWidthl, de slyle Istylel et de ground<:olor, background-image, background-repeal, background-allachmen t
couleur (color) a l s'applique aux qualre bordures . et bockground-position.
border est 1 forme con de nsee des propr ietos border-top , border-right, borde r­
0
bouorn el border-left, couleur
background-ealor : inheril
epai...,.,r 10 couleur de
border-width : inherit Determine fond d 'un element. Peul se cumuler avec une imoge
d'orrtere-plcn [per exemple une Illuslration en parlie Iransporenle) .
Specifie 10 valeur de I'epaisseur de bordure du haul, de drone, du bas el
url(image)
de gauche d 'un element. background-image : Inherit
border-widt h est 1 forme co nd en se s des propri elo s border-top-widt h,
0
border-right-width, border-bottom-width e t bcrder-leh-wldth. Specifie une imoge d'orrlere-plcn qui vienl sa superposer 6 10 couleur de
fond de "element .
couleur QT. Eviter lorsque possible le s gu illemets dan s I'URL car Ils peuvenl po­
border-color : Ironsporenl
ser des problemas de ccrnporibilite ovec d'on ciens navigateurs.
inheril
Delermine 10 couleur des quatre bordures d 'un elemenl epeat
repecf-x
border-color est 10 forme condensee des proprietes bcrder-top-color. border­ background-repeat : repeat-y
right<:olor, berder-bcttom-celor el border-left-color. no-repeal
Inherit
Non La valeur trcnsporent can servera I'epo isseur d e 10 bor dure. Specihe 10 repetilion de I'imoge d'orrlere-plcn (repeal est 10valeur par de­
faut). La voleur repeal-y specifie que I'image ne doil se repe ter que dons
Ie sens verlicol, repect-x dans le sens horizonlol. La valeur no-repeal ern­
style (daJ..d I !OIic/) peche 10 repetition de I'imoge .
border-style : inheril
scroll
S'cpplique aux quo tre bordures de I'element 6 10 Iois. background-attachment : fixed
Inheril
border-style esl 1 forme condenses des proprietes border-top-style. border.
0 Indique si I'lmage est fixee par roppon au document , c'esto-diee si elle de­
right-style, border-bottom-style et border-left-style . file ou non selon 10zone de visualisation et l'cscenseur. Un crriere-plon donI
10voleur est fixed ne se deplace pos lorsque l'oscenseur foil defiler I'element.
Styles de bordures
• •• • ••••
• I"" - ., paurcentoge
... LJ
•
•
• •
dcued
• I
dashed
I
• mset
background-position: mols-c/es
longueur
•
• • inherit
• •
•
•••• • • •• L.
do'Jble
­
groove ridge <>UU cI
Indique 10position initiole de I'image d 'crrlere-plcn . lorsqu'une seule valeur
est indiquee lex : bockground-position : 5px .l, celle-cl correspond 6 1 posi­
0
lion horizontale, I'imoge elan t verlicolemenl centree, Lorsque deux valeurs
sonl indiquees (ex : background·posilion : righl lOp:), 10 premiere correspond
6 10 posilion horizonlale et 10 seconde correspond a
10 posillon verticole .
Ces valeurs peuvent eIre expr imees por un nombre [ex : 2cml, par un pour­
centage (ex : 25%) au por des mots-des (top righI, benem, leN et cenler],
.
II est possible de combiner des valeurs en pourcen toqe el en longueur lex ,
bockqrocnd-position : 40% 20 px ;1. mois pas de combiner des mots-des
[nE border-image Cree une bordure en image . Valeurs : uri d 'image , lor­ ovec d 'outres voleurs .
geur, streich, repeal , round .
[nE op aci ty (non reconnue por lEal Indice d 'opccire d 'un element
border-rad ius [non reconnue por lEal Arrondil las coins de I'element
Valeurs rayon, rayon.
~ ~ ~ ~~

6. top
bottom
caption-side lel1
right
inherit
Cette proprie te indique ou vo se placer 1 boile de legende (ba lise
0
<coption>1 par rapport ci 1 table.
0
auto
table-layout : fixed
inherit
La propriete labl.,.layout controle I'olgarithme employe pour 1 disposition
0
des cellules, des rangees el des colannes de la toble.
Cr. hllp ://www.yoyodeslgn .arg/doc/w3c/css2/tables.html#width.loyout
collapse
border-eollapse : seporote
Inherit
Determine Ie chaix du modele de bordures d'un tableau bordures lu­
sionnees [cellc pse) au bordures seporees ',eparate)
bo rd e r-co lla p se : se pa rat e bord -
- - --- -- II... . - ..... --.._,--­
_ II
C.UuIe ~Dule CeUul<: Cel1ul~ Cellule Cdulc
CaUule CeBula CcUula C.Uule CeUule CeUule
Cellula Gt:Ilul~ Cellule Cellule CeUul. eeuuIo
.
bor der-spaclng longueu r
inherit
Defermine 10 distance qui sepore les bordures des cellule. od jocenfes.
show
empty-eells : hide
inheril
Indique s; le s bordures doivenl etre affichees Ishow) ou non lhide) pour les
cellules vides de cantenu
baseline
top
vertical-al ign bottom
middle
inheril
App liquee ci une cellule de tableau I<Id» au ci un elemenl de type toble­
cell, celie prap rlete definit I'alig nement vertical du conlenu dan. I'element.
I~ I" I
~ ~

7. none
Prop rietes left
de positionnement clear right
inllne tobJe-row-g.oup both
block toble-header-g.oup inherit
none table-footer-group Determine si "element peut se trauver sur 10 meme bande horizontale qu 'un
Ii.t-item toble-row element [lollonl.
display run-In table<alumn-group Ne s'oppllque que si 10 pog" contienl des elements en mode de posltion­
compoct toble-colomn nemen t HOllant [vo ir section Posirionnem_enl 2). _
_ _ __
marker toble-cell
margin
ioble
inline-loble
table-coplion
Inherit
Proprieres de
di m ensionnement
m
Pennel de donner" un element opporlenant 0 une cerlaine sfructure (In.
line, bloc..•) les ccrocterishques d 'affichage d 'une outre struclure. On Ne s'oppliquent qu'oux ele­ heighl
pourro ainsl do ter un elemenl en ligne des corccleristiques de hauteur nor ­ ments de type bloc soul ex­
malement devalue. 6 un element de type bloc. ceptions Ie lies que <img> ,
Valeur. les plus courommenl employees : block at inllne qu i ollectanl 10
snuciure opporente des elemen ts, el none qui perme l de ne pas prendre r-­
en comple I'elemenl. forgeur co
pourcen lage width
III Ies versions inlerieures 6 lEa ne supporlenl pos toutes les valeurs ston ­ width auto
dords de 10 prcpriete disploy, nolammenl toble-cell
inherit
visible
Specille 10 largeu, du canlenu de I'element. Salon Ie modele standard, 10
isibility
VISI I I
hidden
: collapse largeur de 10 boile de I'element correspond a width + podding + border.
inherit II Selon Ie modele Microsoft, applique quond Ie document (X)HTMl n'esr
pos volide, 10 lorgeur de 10 baite corre spo nd umquernent 0 10 valeur de 10
Affiche au mosque un elemen t. La valeur hidden reserve un espoce vide de prapriete wldrh,
10 taille qu'auroil eu I'element s'iI elail represenle
hauleur
SIOIIC
height . pourcenloge
iti absolute , auto
POSI Ion : relalive Inherit
fixed
Speclfie 1 hauteur du canlenu de I'element ies modeles sont .de nnq ue s 6
0
Determine I'emplacement de I'element, etlui olfecle des coraelerlstlques de ceux de 10 propriete widlh .
type bloc. La valeur por delout , stctie, correspond au positionnement por de. largeur
raul dons Ie Aux. La voleur relative correspond 6 un decalage dons Ie Aux. pouree ntage
Ies voleurs absolute el fixed correspondent 0 un posilionnement hors du nux. min-width / max-width none
H IE6 ne supporte pos 1 valeur fixed de 10 propriete position
0 inherit
Speci!ie 10 largeur minimale au mox irncle de I'element. Les valeurs daivent
distance
toujours etre positives .
poulCf!lltage
top / right / bottom / left : oulo III ignore ces proprietes - [usqu'c so version 6 incluse.
inherit
longueur
Controle 10 distance (haute, droite, bosse au gouchel entre I'element el son poureenlage
eventuel conteneur, " delaut 10 poge . Ne s'oppliquent qu 'aux elements min-height / max-height: none
oyant recu une declaration position dllferente de stone. inf,erit
outo Spec ll ie 10 largeur minlmole au maximole de I'element. Les voleurs dolvent
z-index : entier taujoulS eIre positives .
inheril D ignore ces propnetes - [usq u'c so version 6 i ncluse.
Determine et modiBe l'ordre d'empilemenl des elements Celie proprlete ne 'ap ­
plique qu'QUX elements oyant recu une declaration posihon dillerente de "alrc . dislonce
margin inherit
left
righl Specilie les espacements exlernes 6 I'element (entre I'element el ses Ireres
float : nona au les bords du parent) .
inherit L'exemple correspond aux marges haule 12px), draite 13p"l. bosse (4pxl et
gauche (01 .
Fait passer "element en mode de posi lionnemenl Rollant el determine de
quel cote du parent celu i-ci doit s'oHicher (voir section Positionnemenr 21. O'IUIII POUR lA ,YNIU, IlACCOU.C· rncrqin est Ie roccourei pou r les prop rle­
A note, qu'un pasi!ionnement Ilollant ne pennel pas de cenlrer un element. les margin-lop, margin-right, morgin-bollom et morgrn-Ieft
,
~ ~ ~ ~ ~ ~ ~~ ~

8. ~js"'nce
padd ing : inherit Positionnement absolu
position : absolute :
Specifie lesespacements internes a I'element (ent e Ie cantenu ella bordure),
r S'opere Icrsque l 'elernent se voit appliquer 10 regie position :
l 'exemple correspond aux marges hcere [Zpx] , dro ite (3pxl, basse lapx) el absolute. L'elemem est al ors dit positionne,
gauche 101 . I'elemenl se place por rapport au dern ier porenl ou oncetre posi­
O~D'" POUR LA s"",'AAr RACcOURCII podding e st Ie roccourci pour les pro­ tionne, ou par delaut por ro pport au bords du document
prieles pod dioq-top, podding...ight, pcddlng-bonom et podding~eh . l'elernent sorl du flux [son positionnemenl sera Ie merne quelle que
soit 10 place de 10 balise dons Ie code HTML). II n'allecte pos les
I3:!E columns Nombre de colonnes et leur largeurs respe ctives.
aulres elements en Aux.
Valeurs : largeur, nombre.
I'element esl en general place per rapport aux valeurs donnees aux
proprletes lop, righi, bottom et/cu left
Positionnement fixe
position : fixed ,
S'opere lorsque I'element se voit appliquer 10 regie position : fixed .
<body> - A et B sont Ireres cor ant La seule diflerence avec Ie posilionnemen t absolu lient au lail que I'ele­
un porent commun ment lixe reste en place meme si 10 page defile avec l'cscenseur ,
ancitre - A, B et C ont Ie merne IIJ IE 6 ne reconnait pas ce mode de positionnement .
cncetre mais des porenls
differenls
Positionnement flottant
- Taus les elements sont float : left righ' none inherit;
conlenus dons I'elemenl
Permet de positionner un element 6 gauche au ci droile dons son po­
<body>
renl. le resle du contenu du perenl occupera olors I'espace lcisse Iibre
en commenc;ant par s'ecouler autour du AoHanl.
Positionnement en flux
lorsque aucun positionnement n'est specilie, les elements se placent
dons 10 page selan :
1. l'ordre dons lequel ils apporaissenl dons 10 portie HTMl • 10 pre­
miere bol ise du code HTMl sera 10 premiere 6 se placer sur 10 page
el ainsi de suile. D'ou une notion de flux.
2. leur structure (bloc au en-llq ne] : un element de type bloc se place parent
sous I'element precedent ; un element de type en-liqne se place 6 Cole
de I'element precedent.
3 . les morges internes (poddingl et exlernes lmorgin) permellenl Gere r les flottements avec la propriete clear
d'espocer et de positionne r choque elemenl por rapport aux autres clear : leh right I both none Inherit ,
tout en reslanl dons Ie flux. Empeche un element de se rrouver sur 10 meme ligne qu 'un element
4 . Le positicnnement relati l, ossoeie aux proprietes top, righ t, bot. Hcnont. l'element se placera autamatiquemenl et integrolement sous
tom et left permet de deccler un element toul en resta nt dons Ie Aux. " element AOllanl.
les elemenls freres suivants ne seront pos influences par ce decoloqe ,
Geslion des
Positionnemenl en flux ... avecmarges avec "cleor'
i , r-, ---r,::.---------;,
morglrWOp
...
maogin. l e h _
parent
pa re nt
... avec dlkalages (position relative)
i i
parent
~ ~~ ~ ~