【正文】 33。ralement plac233。 224。 l39。aide des propri233。t233。s top et left par rapport au coin sup233。rieur gauche du parent. 39 Positionnement relatif ? Lorsqu39。il est en position relatif, le bloc est aussi dit positionn233。. ? Positionnement qui laisse l39。233。l233。ment dans le flux normal ? d233。pend et influence les 233。l233。ments fr232。res ? tout en le d233。calant 224。 l39。aide des propri233。t233。s top et left... ? Avantage : ? peut servir de parent pour des 233。l233。ments horsflux (position absolue par exemple). 40 Le positionnement : Exemple { backgroundcolor : lightblue。 padding : 10px, 30px, 30px, 10px。 border : medium solid blue。 position : relative。 left:50px width:300px } { border : medium solid green。 position : relative。 left:10px } { backgroundcolor : pink。 padding : 10px, 10px, 10px, 10px。 border : medium solid blue。 position : absolute。 left:80px。 top:350px。 } { border : medium solid yellow。 position : absolute。 left:10px。 top:300px。 } img src=../images/ class=rel width=100pt height=100pt p class=relCeci est un paragraphe plac233。 en positionnement relatif/p img src=../images/ class=abs width=100pt height=100pt p class=absCeci est un paragraphe plac233。 en positionnement absolu/p 41 D233。passement du contenu (1/2) : propri233。t233。 Clip ? Equivalent 224。 un rognage de l’image ? S’applique lors d’un positionnement absolu ? Permet de d233。finir un masque (d’une forme donn233。e) sur l’image ? Clip:rect(haut, droit, bas , gauche) ? Exemple: { position:absolute。 top:10px。 left:10px。 clip:rect(0, 25, 25, 0)。 } 42 D233。passement du contenu (2/2) : propri233。t233。 overflow ? Permet de g233。rer le d233。passement ? Overflow : valeur ? Valeur : ? Visible : la bo238。te est agrandi aux dimensions de l’image ? Hidden : le contenu est rogn233。 ? Scroll : ajout d’une scrollbar ? Exemple: div{ width:300px。 height:300px。 overflow:scroll。 border : medium solid blue。 } divimg src=../images//div 43 La superposition : zindex ? Que faire lorsque deux boites se chevauchent ? ? Zindex : priorit233。 sur l’axe z ? Plus la valeur est grande plus l’233。l233。ment est prioritaire (valeur allant de 1 224。 ∞) ? Exemple: .toto { position:absolute。 /*Par d233。faut 1*/ } .titi { position:absolute。 zindex:2。 } 44 Gestion des background (1/2) ? Gestion facilit233。e ? Au niveau de la page mais aussi de tout les posants ? Permet de mettre en place des couleurs (backgroundcolor) ou des images ( backgroundimage) ? Exemple: body {backgroundcolor: yellow} h1 {backgroundcolor: 00ff00} h2 {backgroundcolor: transparent} p {backgroundcolor: rgb(250,0,255)} 45 Gestion des background (2/2) : backgroundimage ? Exemple : Div { backgroundimage : url(171。 chemin 187。) } ? Options int233。ressantes : ? Placement (backgroundposition) : ? 171。 top, left, right, bottom 187。 , des binaisons, des valeurs ? R233。p233。tition (backgroundrepeat) : ? 171。 repeat, repeatx, repeaty, norepeat 187。 ? Attachement (backgroundattachment): ? 171。 scroll, fixed 187。 ? l’image se d233。place ou non avec la scrollbar 46 Les listes ? Mise en forme des listes ? Options int233。ressante: ? Liststyletype : type de num233。rotation ou de puces ? Liststyleimage : url de l’image que l’on souhaite utiliser me puce 47 Quelques remandations ? Utiliser les CSS lorsque vous d233。veloppez un site Web 。) ? Eviter de m233。langer CSS et balise de mise en forme dans le code HTML ? Donner des noms explicites aux classes afin de faciliter leur utilisation ? Un site est un projet dans le temps donc vous pouvez oublier le r244。le de chacune 48 Conclusion ? CSS = outil tr232。s puissant ? Attribut ou balise HTML de mise en forme poss232。de un 233。quivalent en CSS ? privil233。gier CSS ? Ne poss232。de que des avantages ? ? ?