8
top bonom caption-side leh fig ht inheril Ce lte propriete indi que au va se placer 10 bo ife d e lagende [bolise <caption:» par rapport ci 10 toble. oulO table-layout: fixed Inherit La propriete table-layout co nlr6 1e I'alg orithme employe po ur 10 dis po sition des cellules, des rangaes et des colonnes de 10 lab Ie. 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 rdures d'un tabl eau bo rdures Ill- slo nnees [collopse] au bordures sepcrees (separate). bo rd e r-co llapse : se par a te Cellul e C.nule Cellul, CeIIul, Cellule C, llul e Ce1hJJe C. U ,d. II II ba rd -_ .. -. - - . - - ···· r- - Cl llul< CeBuIe CeUule Cellul< Collule Cellule CeI!uI e CeUu!e Cellule ' . longueur bor der-spaclng . inherit Determine 10 d istance qu i sepore les bo rd ure s d es cellulas adjacenle5. show empty-cells : hide inherit Ind ique 51 les bordures doivent etTe alfichaes (shawl ou non (h'del pour les cellules vides de co menu, baseline lap vertical-al ign bottom middle inherit Appl iq uee a une cellule de tab leau «Id:» au ci un elemenl de type tcble- cell, cette propriete definit I'alignement vertical du contenu dans I'element

Petit dépliant sur le CSS

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Petit dépliant sur le CSS

top bonom

caption-side leh fig ht inheril

Ce lte propr iete indi que au va se plac er 10 bo ife de lagende [bolise <caption:» par rapport ci 10 toble.

oulO table-layout: fixed

Inherit

La propriete table-layout conlr6 1e I'alg orithme employe po ur 10 dispo sition des cellules, des rangaes et des colonnes de 10 lab Ie. Cf. hllp:// www.yoyodesign.org/doc/w3c/css2/lables.html#width.layou t

collapse border-collapse : seporote

inherit

Determ ine Ie choix du modele de bo rdures d 'un tableau bo rdures Ill­slo nnees [collopse] au bordures sepcrees (separate).

bo rd e r-co llapse : se para te

Cellule C.nule Cellul,

Co1ll~e CeIIul, Cellule

C, llule Ce1hJJe C. U,d.

IIIIba rd- _. ~ ~ . -_ .. -. - - . - ­ · · ·· r­ -

Cl llul< CeBuIe CeUule

Cellul< Collule Cellule

CeI!uIe CeUu!e Cellule

' . longueurborder-spaclng . inherit

Determine 10 d istance qu i sepore les bo rdures des cellulas adjacenle5.

show

empty-cells : hide inherit

Ind ique 51 les bordures doiven t etTe alfichaes (shawl ou non (h'del pour les cellules vides de co menu,

baseline lap

vertical-al ign bottom middle inheri t

Appliq uee a une cellule de tab leau «Id:» au ci un elemenl de type tcble­cell, cette propriete definit I'a lignement vertical du con tenu dans I'element

~ ~

Page 2: Petit dépliant sur le CSS

Not, Les proprie res C55 de ces d ivers med ia s - hormis screen et prinl ­sont Iras mal irnplernentees pa r les sup ports ex isten ts Inaviga leurs. syn· theses vocole s, e tc .], Le med ia ha nd held prevu pour les suppons mobil es esl encore peu pris en cha rge par les navig a leurs natil s de telaphones.

Determiner Ie media Exempl es em p loyont 10 balise dink>

Exemples employanl 10 propriete C552 @im porl

Prop rie te s de sortie imprima nte (print)

@page : (proprie /6s .1

La propriete C5S2 @page perm ot d' erobllr les regl es de mise en page av, les proprletes decrlres ci -dessous

longueur auto

size par lrai t landscape inherit;

Definit 10 taille et l'onentofion lpar tralt au poysoqe] de 10 page imp rimee . l.o la,lIe comprend dons l'e rdre 10 largeur et 10 hau teur seporees par un espoce,

crop cross

marks none

inheri' ;

Hirondelles [reperes imprirnes sur 10 page pour

auto alwayspage-break-before avoid page-break-ofter left

page.break.inside right inhen t;

en fociliter Ie co upe],

Impose un saut de page evanl (beforel , cpres lafter) au dens (inside) I'ele­menI designe

en,ier orp hans : inherll

Evite les orphelines llignes isolees SUI leur page cor ne lena nt pas sur 10 page preceden le) en dOlinissont un nambre minimum de lignll$ par page Imprimee.

ent;erwidows rnherit;

Evite les lignes veuves en precisont un nombre de lignes avan t Ie $Oul de page.

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 rection (elevoli on), vo lume (volume). pauses (pause-before, pouse-cher], l imb re [pltch] et po rtee de 10 voix (rich.

ness], prononcialion (spook. speck-nomerol, speck .penctuctioo], etc .

AmNnoN Lo p lupa r! des na vig ateurs. excepte O pa la 8, ne reca nnais senl pas Ie ma iorit e de ces pro prieres.

type pasilionlist-style : uri(image) inheri t

Ce lie proprieta est 10 forme condensee des proprieles individuelles list-styl... type. lisl-Style-positlon et liSl·style-lmage II est possible de combiner 10 vc leur typo et uri/image}. Dans ce co s, Ie type cho isi sera allicha en cas de non dispanibi lite de "image.

none

list-style-image : urllimogeJ inherit

Designe I'image qu i sera affi chee comma marqueur (puce) d';,I;,ment de liste.

disc lower-olpha h,rogonad rd e lower-la tin katakana square upper-olpho h,rogono.

• decima l upper-lotin iroholist-style-type dec i~o l. hebrew katakono­leadlng·zero armenian iroha lower -rcmcn georgian none upper -rorncn cik.ldeogrc. inherit lower-g",..k phic

Dellnlll'aspect du marqueur [puce) d ';, lemenl de lisre, Lorsque 10 valeu r est none, euc une puce n'cppcrolt , Lorsque 10 proprieh~ lisl·style-image est deli. nie, cane derni;,re rem piece Ie propriete Iist·style-typo.

inside

list-style-position: outside inheril

lndi que ['ernplocement de 10 puce por ropr.0rl C 10 l isle l.o veleur inside place 10 p uce dans 10 liste , Ie reste de eel e-ci s'ocou lant au taur de ceue puce (equiva lent c un posil ionnement nallanl 6 gauchel . La voleur outside

xclu t 10 puce du canlenu de lisre.

Chez Ie rnerne editeur.. . CSS2 - Pratiquedu design web. 3"eel. R GnulU

'Itento XHTMI., 2' ed. R, oe Ito Cek. S. GAUOCR to Excel. M. BI'RGAMf Ito Firelo", et Thunderbird. M_GIlf'Y .to MoeosX. G. Get' Ito Uni,vLinw<. l, HL.I1IIAI. ' Ito Lou, C. JACO.E1

~ ~~ I~ ~~

~%' ~cn U"\.::r =N NU"\ _~

.. ~ ---~ ~

~~ N ~ ...... 00 ==_ 0,~; lY:C,..... ==N Z ,~ O\ ==N ~ '" .. = a:> .g -g~ - "" ~ u ~ ---en .5

I

5€

Page 3: Petit dépliant sur le CSS

nnenr un "Iemenl de

<l'naD> <oblec1> <.serlpl>

SelecteufS NOTt Dans cette lisle, les selecteu rs div el span sonl ciles citil re d'exemple. lis represen tent les bolises HTML<div> el <spon> mais peuvenl eire rem­ploces par d 'o utres bolises.

• {} designe reus les elements

div {} designe la bollse <dlv>

.maC/asse II designe les elements ayanl recu 10 c1ass-'maClosse'

div.maC/osse II designe les elemen ts <div> ayonl recu la doss.·moC/a....•

# mon/d {} designe I'element unique ayant recu Id. 'monld

div#monld II deslgne I'element <div> ayanl recu id='monld'

div span element II design e les elements co ntenus da ns un elemen l <span> lul-rnerne contenu dons des elements <div>

dlv, sport, element II de signe les elements <diY>, les elemen ts <spon>, el les elemen ls <el""",nl>

d iv + span {} desi gne lOUI alemen t <spon> imme­dialemen l precede par un eleme nl <div>

div > spon II designe toul elemen t <SpOil> directe­ment enlcnr de I'element <dlv>

a :link visited II designe Ie lien <0> non visite [l ink] au deja visile [visited]

elemenr.active hover locus {} au elemen' peul eire route bolise au classe

nlrp Ie momenl au I'uill isa ieul plesse Ie bouton de 10 saulis I'll Ie reliic llE

I'elampnt esl survale quand un element rec;o ll I'a ttenlion, que ce soil au claVier au

d'oulres formes d' enlrees de leXle IIJ jusqu'ci so vers ion 6 co mp rise , ne reconnoit 10 pseud o. c10sse que sl elle esl oppliquee sur Ie sillecleur de 10 bol ise

div: la n g (fr) {} long de slgne tour elemenl <div> qUi ern­p lole une lang 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/asse"] {} designe toul element <div> qui possede un attribul class ayant pour va leur maC/osse

div[c1ass- = "maC/osse1 {} designe tout element <div> qui possed e un oll rlbul cla ss ayon l plu sieurs va leurs se porees par des espoces el doni I'u ne d' entre-elles est moClosse

d iv [closs I = ' moC/osse' ] {} de slqne tau I element <div> qui possede un o ttribul closs ayonl plusieurs va leurs seporees par des lirels el doni 10 premiere esl maClosse.

div: f i r st -eh i ld {} desi gne Ie 1,- enfon l de I'elemen t <div>

div: f i f s t- l i n e II s'opplique a 10 ligne de I'ele. menl <dlv>

div: f i r st-Ie tte r {} design e la lerrre de texle de l' elernent <div>

II IE6 ne reconnai t ni les selecteurs d 'enlcnts, nl eeux d'elemenls odp cents, nl ceux po r cnributs (ee bogue sera peut-etre corrige dans IE I I. !mEl

d iv p:l a st· ch ild 1I selectionne Ie dernier parographe des elementsdiv

d iv p:n th -ch ild(2) {} selectionne Ie 2' parogrophe des elemenls d lv

dlv: n o t l[c1ass= ' moC/osse11 (} ne select ienne pas les div doni I'otl ribul closs est maC/asse div[c1oss" ='moCfosse1 11 selection ne tout elemenl div doni 10 valeur de J'ottribul closs commence par moC/osse

d iv[c1oss$ = ' maC/osse 1 {} selectionne tout element div doni 10 valeur de "otlribut eloss lini l par moC/osse d iv[c1ass· = ·moC/osse1 {} selection ne loul elemenl div don t 10 valeur de I'otlribu l closscontienl 10 choine moC/osse

M oyen mnerno lechn ique : "Iove Hale"

Unites de veleurs o inutile de preciser une unite pour 10 voleur zero (01 em centimetres em cadrotin . Unite relorlve : 1em correspond a 10 /oille de texte haut eur de 10 letlre majusc ule M de I'element porent. ex unite relot ive . 1ex co rrespond a 10 io llle de texle la rgeur de 10 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 imanle. px pixels d 'ecron . II Unile flgee sur IE pos d 'ograndlssement

0.75 U2 9 ZLZ ~.. ,,..i -;Il- ,:. oaJ 7>

7>

plQlP<)

"5<1

1 · Ifdt ( ,, )

~ ~~~ r~ ~ ~~~

Page 4: Petit dépliant sur le CSS

letter-spacing

1 font- IQ U slze "]

none t-d " underlone

flam dopo/<e' generj" u~ (scn..... . lf" nl.n,

font-family :

Permet de cho isir 10 pol ico oppllq« d ' ind iq ue r plusleurs velour s par o,d" polices co ntenont des espocos sont l) pk" eu

,n

I'

mots·des (botd l b"lclntl l' ''''''' III voleu: numon'flu"

taille poummlog

font-style :

font-weight :

font-size :

Choisil 10 groisse de police dons "6111"'"n' Ihickl el les valeurs numeriqvas 11 00, 200 ,,' I'ensemble des novigaleurs II est pm l..",,,, mots-des bold, bolder el normal.

normal italic oblique Inherit

Determine I'o riento lion de police il"II' l' [penche " gauche sl 10 po lice est pr uvt' " J

Determine 10 ta ille de palice d Ol I'/II.." em, ex et % ol in de preserver 10 l1u"JII

couleur rgbf} cOlIleur /JC)(a

color mo/·de (silver IIU5Ch io I"'''')'I lOr, I transparent mherit

Applique une couleur de polico au 111, 1.. 0/.. I ~I" ,

lelle de 16 couleurs de base (blo<: est prise en charge pos l'en sembb La polelle elergie (256 couleurs] des {antlquewhile, chocolate, ol iv. ,

normalfont-variant small<:aps

~ ~ ~

t tex ecora ion : overline

line-through

Determine Ie wulignement au Ie surlignemenl de I'lliemeni. Un texte peut iHre soul/gne, surllg na, ba rre . II esl possib le de cumuler les vo leurs.

leH rig ht

text-align center justify inherit

DeFinil l'o ll9nemenl du tex te dans un elemenl.

none capita lize

text-transform uppercase lowercase Inherit

M ise en majuscule au en minuscule du texre. La va leur capi talize offiche les premieres lellres en majus cule . uppercase offiche toutes les lenres en me­[uscules el lowercase aHiche toutes les letlres en minuscu les.

valeur text-indent : pourrenloge

Determine 10valeur de I'a l ineo (relrai l de 10 premiere Iig ne de texte]

normal nombre

line-height : longueur pourcenloge inherit

Precise 10 hauleur de ligne de texle . Ane pos conlondre avec les merges enlre chaque paragraphe.

normal

letter-spacing :!ongu.eur inheri!

Precise I'espace entre cheque lellre de texle. Une valeur negat ive est cu­tori see olin de ropprocher les lell res

normal

word-spocinq : !ongueur ",henl

Precise l'espoce entre choque mol . Une vo leur negative est outorisee olin de rcpprocher les mots.

te xt -Indent I- margin -topI

1-- IIne-helght

L margln­I bottom

~ ~'"

Page 5: Petit dépliant sur le CSS

• • • • • • •

Applicables a tous les elements, de type bloc comme en-liqne.

NOTt II est preferab le de ne pos les appliquer aux elements en-lign e car ce ux-ci, en regie gene rale , ne permenent pos d'elre dimensionnes,

epo;sseur

border : :::'7eur Inherit

Peul cantenir les dilferentes valeurs d'epaisseur IWidthl, de slyle Istylel et de couleur (color) a l s'applique aux qualre bordures .

border est 10 forme con densee des propr ietos border-top , border-right, borde r­bouorn el border-left,

border-width : epai...,.,r inherit

Specifie 10 valeur de I'epaisseur de bordure du haul, de drone, du bas el de gauche d 'un element.

border-widt h est 10 forme co nd en ses des propri elo s border-top-widt h, border-right-width, border-bottom-width e t bcrder-leh-wldth.

couleur border-color : Ironsporenl

inheril

Delermine 10 couleur des quatre bordures d 'un elemenl

border-color est 10 forme condensee des proprietes bcrder-top-color. border­right<:olor, berder-bcttom-celor el border-left-color.

Non La valeur trcnsporent canservera I'epo isseur de 10 bor dure.

style (daJ..d I !OIic/)border-style : inheril

S'cpplique aux quo tre bordures de I'element 6 10 Iois.

border-style esl 10 forme condenses des proprietes border-top-style. border. right-style, border-bottom-style et border-left-style .

Styles de bordures

•••• • ••••• I"" - ., • •

mset dcued dashed

I I LJ• • L. ...•••• • • •• ­ridge <>UU cIdo'Jble groove

[nE border-image Cree une bordure en image. Valeurs : uri d 'image , lor­geur, streich, repeal , round .

border-rad ius [non reconnue por lEal Arrondil las coins de I'element Valeurs rayon, rayon.

Applicobles a tous les eleme nts, de type bloc comme en-ligne.

couleur uri(image) rope/ilion background al10Chement position inheril

bockground est 10 forme co nden ses des propriellls expliquees cl-op res bock. ground<:olor, background-image, background-repeal, background-allachment et bockground-position.

couleurbackground-ealor : inheril

Determine 10 couleur de fond d 'un element. Peul se cumuler avec une imoge d'orrtere-plcn [per exemple une Illuslration en parlie Iransporenle) .

url(image)background-image : Inherit

Specifie une imoge d'orrlere-plcn qui vienl sa superposer 6 10couleur de fond de "element.

QT. Eviter lorsque possible les gu illemets dan s I'URL car Ils peuvenl po­ser des problemas de ccrnporibilite ovec d'on ciens navigateurs.

epeat repecf-x

background-repeat : repeat-y no-repeal Inherit

Specihe 10repetilion 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­peche 10 repetition de I'imoge.

scroll background-attachment : fixed

Inheril

Indique si I'lmage est fixee par roppon au document , c'esto-diee si elle de­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.

paurcentoge longueurbackground-position: mols-c/es inherit

Indique 10position initiole de I'image d'crrlere-plcn . lorsqu'une seule valeur est indiquee lex : bockground-position : 5px .l, celle-cl correspond 6 10 posi­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, leNet 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 ovec d 'outres voleurs .

[nE opaci ty (non reconnue por lEal Indice d 'opccire d 'un element

~ ~ ~ ~~""

Page 6: Petit dépliant sur le CSS

caption-side

top bottom lel1 right inherit

Cette propriete indique ou vo se placer 10 boile de legende (ba lise <coption>1 par rapport ci 10 table.

auto table-layout : fixed

inherit

La propriete labl.,.layout controle I'olgarithme employe pour 10 disposition 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 [cellcpse) au bordures seporees ' ,eparate)

bo rd e r-co lla pse : se pa rat e

C.UuIe ~Dule CeUul<:

CaUule CeBula CcUula

Cellula Gt:Ilul~ Cellule

bord II- - --- - -- ... .- ..... --II.._,--­_Cel1ul~ Cellule Cdulc

C.Uule CeUule CeUule

Cellule CeUul. eeuuIo

. longueur border-spaclng inherit

Defermine 10distance qui sepore les bordures des cellule. od jocenfes.

show empty-eells : hide

inheril

Indique s; les 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'alignement vertical du conlenu dan. I'element.

~ ~ I~ I" I

Page 7: Petit dépliant sur le CSS

Pennel de donner" un element opporlenant 0 une cerlaine sfructure (In. line, bloc..•) les ccrocterishques d 'affichage d 'une outre struclure. On pourro ainsl do ter un elemenl en ligne des corccleristiques de hauteur nor ­malement devalue. 6 un element de type bloc. Valeur. les plus courommenl employees : block at inllne qu i ollectanl 10 snuciure opporente des elements, el none qui perme l de ne pas prendre en comple I'elemenl. III Ies versions inlerieures 6 lEa ne supporlenl pos toutes les valeurs ston ­

dords de 10 prcpriete disploy, nolammenl toble-cell

Prop rietes de positionnement

none left

clear right both inherit

tobJe-row-g.oup toble-header-g.oup table-footer-group toble-row table<alumn-group toble-colomn toble-cell table-coplion Inherit

inllne block none Ii.t-item run-In compoct marker ioble inline-loble

display

top / right / bottom / left :

visible

isibility hiddenVISI I I : collapse

inherit

Affiche au mosque un element. La valeur hidden reserve un espoce vide de 10 taille qu'auroil eu I'element s'iI elail represenle

outo entier inheril

z-index :

distance poulCf!lltage oulo inherit

Controle 10distance (haute, droite, bosse au gouchel entre I'element el son eventuel conteneur, " delaut 10 poge . Ne s'oppliquent qu 'aux elements oyant recu une declaration position dllferente de stone.

SIOIIC

iti absolute POSI Ion : relalive

fixed

Determine I'emplacement de I'element, etlui olfecle des coraelerlstlques de type bloc. La valeur por delout , stctie, correspond au positionnement por de. raul dons Ie Aux. La voleur relative correspond 6 un decalage dons Ie Aux. Ies voleurs absolute el fixed correspondent 0 un posilionnement hors du nux. H IE6 ne supporte pos 10 valeur fixed de 10 propriete position

float :

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 .

left righl nona inherit

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. A note, qu'un pasi!ionnement Ilollant ne pennel pas de cenlrer un element.

~ ~ ~ ~ ~

Determine si "element peut se trauver sur 10meme bande horizontale qu 'un element [lollonl. Ne s'oppllque que si 10 pog" contienl des elements en mode de posltion­nement HOllant [vo ir section Posirionnem_enl_2). _ _ __

margin

Proprieres de m dimensionnement

heighl

ments de type bloc soul ex­ceptions Ie lies que <img>,

Ne s'oppliquent qu'oux ele­

r - ­forgeur co

width pourcen lage width auto inherit

Specille 10 largeu, du canlenu de I'element. Salon Ie modele standard, 10 largeur de 10 boile de I'element correspond a width + podding + border. II Selon Ie modele Microsoft, applique quond Ie document (X)HTMl n'esr pos volide, 10 lorgeur de 10 baite correspond umquernent 0 10 valeur de 10 prapriete wldrh,

hauleur

height . pourcenloge , auto

Inherit

Speclfie 10 hauteur du canlenu de I'element ies modeles sont .dennq ues 6 ceux de 10 propriete widlh .

largeur poureentage min-width / max-width none inherit

Speci!ie 10 largeur minimale au mox irncle de I'element. Lesvaleurs daivent toujours etre positives . III ignore ces proprietes - [usqu'c so version 6 incluse.

longueur poureenlagemin-height / max-height: none inf,erit

Spec ll ie 10 largeur minlmole au maximole de I'element. Les voleurs dolvent taujoulS eIre positives . D ignore ces propnetes - [usq u'c so version 6 incluse.

disloncemargin inherit

Specilie les espacements exlernes 6 I'element (entre I'element el ses Ireres au les bords du parent) . L'exemple correspond aux marges haule 12px), draite 13p"l. bosse (4pxl et gauche (01 .

O'IUIII POUR lA ,YNIU, IlACCOU.C· rncrqin est Ie roccourei pou r les prop rle­les margin-lop, margin-right, morgin-bollom et morgrn-Ieft,

~ ~~ ~

Page 8: Petit dépliant sur le CSS

padd ing : ~js"'nce inherit

Specifie lesespacements internes a I'element (entre Ie cantenu ella bordure), l 'exemple correspond aux marges hcere [Zpx] , dro ite (3pxl, basse lapx) el gauche 101 . O~D'" POUR LA s"",'AAr RACcOURCII podding e st Ie roccourci pour les pro­prieles pod dioq-top, podding...ight, pcddlng-bonom et podding~eh .

I3:!E columns Nombre de colonnes et leur largeurs respe ctives. Valeurs : largeur, nombre.

ancitre

<body> - A et B sont Ireres cor ant un porent commun

- A, B et C ont Ie merne cncetre mais des porenls differenls

- Taus les elements sont conlenus dons I'elemenl <body>

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 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 d'espocer et de positionne r choque elemenl por rapport aux autres tout en reslanl dons Ie flux.

4 . Le positicnnement relati l, ossoeie aux proprietes top, righ t, bot. tom et left permet de deccler un element toul en restant dons Ie Aux. les elemenls freres suivants ne seront pos influences par ce decoloqe,

Positionnemenl en flux ... avecmarges i , r-,---r,::.---------;,

morglrWOp ... maogin.leh_

parent

... avec dlkalages (position relative) i i

parent

~ ~~

Positionnement absolu position : absolute :

S'opere Icrsque l 'elernent se voit appliquer 10 regie position : absolute. L'elemem est alors dit positionne,

I'elemenl se place por rapport au dern ier porenl ou oncetre posi­tionne, ou par delaut por ropport au bords du document

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 aulres elements en Aux.

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 . La seule diflerence avec Ie posil ionnement absolu lient au lail que I'ele­ment lixe reste en place meme si 10 page defile avec l'cscenseur,

IIJ IE 6 ne reconnait pas ce mode de positionnement .

Positionnement flottant float : left righ' none inherit;

Permet de positionner un element 6 gauche au ci droile dons son po­renl. le resle du contenu du perenl occupera olors I'espace lcisse Iibre en commenc;ant par s'ecouler autour du AoHanl.

parent

Gerer les flottements avec la propriete clear clear : leh right I both none Inherit ,

Empeche un element de se rrouver sur 10 meme ligne qu 'un element Hcnont. l'element se placera autamatiquemenl et integrolement sous " element AOllanl.

Geslion des avec"cleor'

~ ~

pa re nt