1 / 9

Cours XHTML/CSS

Cours XHTML/CSS. Lundi 9 Février 2009 Aujourd'hui, l'arrière-plan des balises <div>. 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 :

jeff
Download Presentation

Cours XHTML/CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 http://lem.korp.free.fr/mulots/texture.jpg • 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 http://lem.korp.free.fr/mulots/texture.jpg • 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 :

More Related