top                              bonom  caption-side                leh                              fig ht               ...
Propriete s du media vocal                                                                                       Le media ...
div: l a n g (fr) {}               long de slg ne tour elemenl <div> qUi ern­                                             ...
none                                                                              tex t-d ecora tion :	       letter-spaci...
Applicables          a tous les elements, de                type bloc comme en-liqne.              Applicobles    a tous l...
top                                bottom     caption-side               lel1                                right        ...
noneProp rietes                                                                                      leftde positionnement...
~js"nce     padd ing : inherit                                                                Positionnement absolu       ...
Prochain SlideShare
Chargement dans…5
×

Petit dépliant sur le CSS

583 vues

Publié le

0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
583
Sur SlideShare
0
Issues des intégrations
0
Intégrations
6
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Petit dépliant sur le CSS

  1. 1. top bonom caption-side leh fig ht inherilCe 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 InheritLa pro priete table-layout co nlr6 1 I alg o rithme emplo ye po ur 1 dis po sition e 0des cellules, des ra ngaes et des colo nnes de 1 lab Ie. 0Cf. hllp:// www .yoyodesign.or g/doc/w3c/css2/lables.html#wid th.layou t collapse border-collapse : seporote inheritDeterm 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 inheritDeterm ine 10 d istance qu i sepore les bo rd ures d es cellulas adjacenle5. show empty-cells : hide inheritInd ique 51 les bordure s do iven t etTe alfich aes (shawl o u non (hdel pour lescellules vides de co menu, baseline lap vertical-al ign bottom middle inheritAppliq uee aune cellule d e tab lea u «Id:» au ci un elemenl d e type tcble­cell, cette propriete d efinit Ia lig nement vertical du con tenu dans Ielement ~ ~
  2. 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 senlthe 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 mediaExem 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 inheritLa propriete C5S2 @page perm ot d erobllr les regl es d e mise en page av, Designe Iimage 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 irohaDefinit 10 taille et lonentofion lpar tralt au poysoqe] d e 10 page imp rimee . l.o lower -rcmcn georgian nonela,lIe comprend dons le 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 Dellnllla spect du marqueur [puce) d ;, lemenl de lisre, Lor sque 10 valeu r est mar ks none none, euc une puce ncppcrolt , 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) Iele­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 ~; lYEvite 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. GAUOCRpreceden 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_GIlfY :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 .5Evite les lig nes veuves en precisont un nombre d e lignes avan t Ie $Oul de page. I ~ ~~ I~ ~~ 5€
  3. 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 Iu 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 Ielemen t <div> nnenr un "Iemenl de div: f i f s t- l i n e II sopplique a1 0 ligne de Iele. menl <dlv> <lnaD> <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 de xemple. II IE6 ne reco nnai t ni les selecteurs d enlcnts, nl eeux delemenls 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 donic1ass-maClosse Iotl 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 0recu la doss.· moC/a....• d iv[c1oss$ = maC/osse 1 {} selectionne to ut element div doni 1 valeur 0 # mon/d {} designe Ielement unique ayant recu de "otlribut eloss lini l pa r moC/osseId. monld d iv[c1ass· = ·moC/oss e1 {} selection ne loul elemenl div don t 1 valeur 0 div #monld II deslgne Ielement <div> ayanl de Iotlribu l closs contienl 10 choine moC/osserecu id=monld div span element II design e les elements co ntenus da ns unelemen l <span> lul-rnerne con tenu dons des ele ments <div> dlv, sport, element II de signe les elements <diY>, leselemen 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 (01ment enlcnr de Ielement <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 Ielement 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 10classe lell re x de Ielement 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 Ill Ie reliic llE Ielampnt esl survale 0.75 i U2 -;Il- 9 ,:. ZLZ oaJ ~.. 7> ,,.. quand un element rec;o ll Ia ttenlion, que ce soil au claVier au doulres formes d enlrees de leXle 7> IIJ j usquci 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. 4. none tex t-d ecora tion : letter-spacing " underlone overlinefont-slze "] IQ1U line-through Determ ine Ie wulignemen t au Ie surlignemenl de Illiemeni. 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 justifyPermet de cho isir 1 pol ico oppllq« 0 inheritd ind iq ue r plusleurs velour s par o ,d " DeFinil lo 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 seDetermine 10 ta ill e de palice d Ol I/II.." Inheritem, 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 nlogeApplique 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] 0est prise en charge pos len sembbLa polelle elergie (256 couleurs] normaldes {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 Io 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 Iespace entre cheque lellre de texle. Une valeur neg at ive est cu­ tori see olin de ropprocher les lell resChoisil 10 groisse de police dons "6111""n ,nIhickl el les va leurs numeriqvas 11 00, 200 ,, normalIensemble des novigaleurs II est pm l..",,,, word-spocinq : !ongueurmots-des bold, bolder el normal. ",henl normal Precise lespoce 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. 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 couleurce ux-ci, en reg ie gene rale , ne permenent pos delre 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 depaisseur IWidthl, de slyle Istylel et de ground<:olor, background-image, background-repeal, background-allachmen tcouleur (color) a l sapplique 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 dorrtere-plcn [per exemple une Illuslration en parlie Iransporenle) .Specifie 10 valeur de Iepaisseur 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 dorrlere-plcn qui vienl sa superposer 6 10 couleur de fond de "element . couleur QT. Eviter lorsque possible le s gu illemets dan s IURL car Ils peuvenl po­ border-color : Ironsporenl ser des problemas de ccrnporibilite ovec don ciens navigateurs. inherilDelermine 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 Iepo isseur d e 10 bor dure. Specihe 10 repetilion de Iimoge dorrlere-plcn (repeal est 10valeur par de­ faut). La voleur repeal-y specifie que Iimage 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 Iimoge . border-style : inheril scrollScpplique aux quo tre bordures de Ielement 6 10 Iois. background-attachment : fixed Inheril border-style esl 1 forme condenses des proprietes border-top-style. border. 0 Indique si Ilmage est fixee par roppon au document , cesto-diee si elle de­ right-style, border-bottom-style et border-left-style . file ou non selon 10zone de visualisation et lcscenseur. Un crriere-plon donI 10voleur est fixed ne se deplace pos lorsque loscenseur foil defiler Ielement.Styles de bordures• •• • •••• • I"" - ., paurcentoge ... LJ••• • dcued • I dashed I • mset background-position: mols-c/es longueur•• • inherit• • ••••• • • •• L. doJble ­ groove ridge <>UU cI Indique 10position initiole de Iimage d crrlere-plcn . lorsquune seule valeur est indiquee lex : bockground-position : 5px .l, celle-cl correspond 6 1 posi­ 0 lion horizontale, Iimoge 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 elementborder-rad ius [non reconnue por lEal Arrondil las coins de IelementValeurs rayon, rayon.~ ~ ~ ~~
  6. 6. top bottom caption-side lel1 right inheritCette 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 inheritLa propriete labl.,.layout controle Iolgarithme employe pour 1 disposition 0des 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 InheritDetermine Ie chaix du modele de bordures dun 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 inheritDefermine 10 distance qui sepore les bordures des cellule. od jocenfes. show empty-eells : hide inherilIndique s; le s bordures doivenl etre affichees Ishow) ou non lhide) pour lescellules vides de cantenu baseline top vertical-al ign bottom middle inherilApp liquee ci une cellule de tableau I<Id» au ci un elemenl de type toble­cell, celie prap rlete definit Ialig nement vertical du conlenu dan. Ielement.I~ I" I ~ ~
  7. 7. noneProp rietes leftde 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 soppllque 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 mPennel de donner" un element opporlenant 0 une cerlaine sfructure (In.line, bloc..•) les ccrocterishques d affichage d une outre struclure. On Ne soppliquent quoux ele­ heighlpourro 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 10snuciure opporente des elemen ts, el none qui perme l de ne pas prendre r-­en comple Ielemenl. forgeur co pourcen lage widthIII Ies versions inlerieures 6 lEa ne supporlenl pos toutes les valeurs ston ­ width autodords de 10 prcpriete disploy, nolammenl toble-cell inherit visible Specille 10 largeu, du canlenu de Ielement. Salon Ie modele standard, 10 isibility VISI I I hidden : collapse largeur de 10 boile de Ielement correspond a width + podding + border. inherit II Selon Ie modele Microsoft, applique quond Ie document (X)HTMl nesr pos volide, 10 lorgeur de 10 baite corre spo nd umquernent 0 10 valeur de 10Affiche au mosque un elemen t. La valeur hidden reserve un espoce vide de prapriete wldrh,10 taille quauroil eu Ielement siI elail represenle hauleur SIOIIC height . pourcenloge iti absolute , auto POSI Ion : relalive Inherit fixed Speclfie 1 hauteur du canlenu de Ielement ies modeles sont .de nnq ue s 6 0Determine Iemplacement de Ielement, etlui olfecle des coraelerlstlques de ceux de 10 propriete widlh .type bloc. La valeur por delout , stctie, correspond au positionnement por de. largeurraul dons Ie Aux. La voleur relative correspond 6 un decalage dons Ie Aux. pouree ntageIes voleurs absolute el fixed correspondent 0 un posilionnement hors du nux. min-width / max-width noneH IE6 ne supporte pos 1 valeur fixed de 10 propriete position 0 inherit Speci!ie 10 largeur minimale au mox irncle de Ielement. Les valeurs daivent distance toujours etre positives . poulCf!lltage top / right / bottom / left : oulo III ignore ces proprietes - [usquc so version 6 incluse. inherit longueurControle 10 distance (haute, droite, bosse au gouchel entre Ielement el son poureenlageeventuel conteneur, " delaut 10 poge . Ne soppliquent qu aux elements min-height / max-height: noneoyant recu une declaration position dllferente de stone. inf,erit outo Spec ll ie 10 largeur minlmole au maximole de Ielement. Les voleurs dolvent z-index : entier taujoulS eIre positives . inheril D ignore ces propnetes - [usq uc so version 6 i ncluse.Determine et modiBe lordre dempilemenl des elements Celie proprlete ne ap ­plique quQUX elements oyant recu une declaration posihon dillerente de "alrc . dislonce margin inherit left righl Specilie les espacements exlernes 6 Ielement (entre Ielement el ses Ireres float : nona au les bords du parent) . inherit Lexemple correspond aux marges haule 12px), draite 13p"l. bosse (4pxl et gauche (01 .Fait passer "element en mode de posi lionnemenl Rollant el determine dequel cote du parent celu i-ci doit soHicher (voir section Positionnemenr 21. OIUIII POUR lA ,YNIU, IlACCOU.C· rncrqin est Ie roccourei pou r les prop rle­A note, quun pasi!ionnement Ilollant ne pennel pas de cenlrer un element. les margin-lop, margin-right, morgin-bollom et morgrn-Ieft ,~ ~ ~ ~ ~ ~ ~~ ~
  8. 8. ~js"nce padd ing : inherit Positionnement absolu position : absolute :Specifie lesespacements internes a Ielement (ent e Ie cantenu ella bordure), r Sopere Icrsque l elernent se voit appliquer 10 regie position :l exemple correspond aux marges hcere [Zpx] , dro ite (3pxl, basse lapx) el absolute. Lelemem est al ors dit positionne,gauche 101 . Ielemenl 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 . lelernent sorl du flux [son positionnemenl sera Ie merne quelle que soit 10 place de 10 balise dons Ie code HTML). II nallecte pos lesI3:!E columns Nombre de colonnes et leur largeurs respe ctives. aulres elements en Aux.Valeurs : largeur, nombre. Ielement esl en general place per rapport aux valeurs donnees aux proprletes lop, righi, bottom et/cu left Positionnement fixe position : fixed , Sopere lorsque Ielement 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 Iele­ un porent commun ment lixe reste en place meme si 10 page defile avec lcscenseur , 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 Ielemenl Permet de positionner un element 6 gauche au ci droile dons son po­ <body> renl. le resle du contenu du perenl occupera olors Iespace lcisse Iibre en commenc;ant par secouler autour du AoHanl.Positionnement en fluxlorsque aucun positionnement nest specilie, les elements se placentdons 10 page selan :1. lordre dons lequel ils apporaissenl dons 10 portie HTMl • 10 pre­miere bol ise du code HTMl sera 10 premiere 6 se placer sur 10 pageel ainsi de suile. Dou une notion de flux.2. leur structure (bloc au en-llq ne] : un element de type bloc se place parentsous Ielement precedent ; un element de type en-liqne se place 6 Colede Ielement precedent.3 . les morges internes (poddingl et exlernes lmorgin) permellenl Gere r les flottements avec la propriete cleardespocer 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 element4 . Le positicnnement relati l, ossoeie aux proprietes top, righ t, bot. Hcnont. lelement se placera autamatiquemenl et integrolement soustom 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 desPositionnemenl en flux ... avecmarges avec "cleori , r-, ---r,::.---------;, morglrWOp ... maogin. l e h _ parent pa re nt ... avec dlkalages (position relative) i i parent ~ ~~ ~ ~

×