">

La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Cours XHTML/CSS Lundi 9 Février 2009

Présentations similaires


Présentation au sujet: "Cours XHTML/CSS Lundi 9 Février 2009"— Transcription de la présentation:

1 Cours XHTML/CSS Lundi 9 Février 2009
Aujourd'hui, l'arrière-plan des balises <div>

2 Un arrière-plan dans un div
Pour définir une image d'arrière-plan dans une balise <div>, il suffit de préciser son URL dans la propriété background-image : <div style="background-image: url(chute-eau.jpg); ">

3 Exercice Définissez une balise <DIV> en utilisant un arrière-plan JPG de votre choix. Définissez les propriétés suivantes pour ce DIV : Taille du texte : 40 px Couleur du texte : red

4 Solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <div style="background-image: url(image.jpg); font-size: 40px; color: yellow;"> Ce texte est affiché au dessus de l'arrière-plan image.jpg. </div> </body> </html>

5 Répétition de l'arrière-plan
Pour répéter un arière-plan sur toute la surface d'un <DIV>, il suffit de le positionner en flottant à gauche du <DIV> : <div style="width: largeur_du_div; height: hauteur_du_div; background-image: url(image.jpg); float: left;"></div>

6 Exercice Définissez une balise <DIV> ayant les caractéristiques suivantes : Largeur : 300px Hauteur : 200px Image d'arrière-plan : téléchargée depuis Style de bordure (border-style) initialisé à solid Positionnement float: left Vous devriez obtenir ce résultat :

7 La solution <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <body> <div style="width: 300px; height: 200px; background-image: url(20.jpg); border-style: solid; float: left;"></div> </body> </html>

8 Répétition partielle de l'arrière-plan
Pour ne répéter l'arrière-plan qu'horizontalement, vous utiliserez un positionnement flottant et vous initialiserez la propriété background-repeat avec la valeur repeat-x. Bien évidemment, la valeur repeat-y limite la répétition à l'axe vertical. <div style="background-image: url(image.jpg); background-repeat: repeat-x; float: left;"></div>

9 Exercice Définissez une balise <DIV> ayant les caractéristiques suivantes : Largeur : 300px Hauteur : 200px Image d'arrière-plan : téléchargée depuis Style de bordure (border-style) initialisé à solid Positionnement float: left Répétition horizontale seulement (background-repeat: repeat-x) Vous devriez obtenir ce résultat :


Télécharger ppt "Cours XHTML/CSS Lundi 9 Février 2009"

Présentations similaires


Annonces Google